/************************************************

           ==Start Base css==

		    * dark blue #0f364e , blue #0ea5e9, green  #33af91

*************************************************/

@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,800|Open+Sans:400,400i,600,700&display=swap');



/* CSS Reset */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {

	margin: 0;

	padding: 0;

	border: 0;

	font-size: 100%;

	font: inherit;

	vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {

	display: block;

}

body {

	line-height: 1;

	font-family: 'Open Sans', sans-serif;

	font-size: 14px;

}

ol, ul {

	list-style: none;

}

blockquote, q {

	quotes: none;

}

blockquote:before, blockquote:after, q:before, q:after {

	content: '';

	content: none;

}

table {

	border-collapse: collapse;

	border-spacing: 0;

}

h1, h2, h3, h4, h5, h6 {

	font-family: 'Montserrat', sans-serif;

	margin-bottom: 10px;

	font-weight: 600;

}

a {

	transition: 0.3s ease-in-out;

	-webkit-transition: 0.3s ease-in-out;

	-ms-transition: 0.3s ease-in-out;

	-moz-transition: 0.3s ease-in-out;

	text-decoration: none;

}

a:focus {

    text-decoration: none;

}

a:focus { 

    outline: 0 solid 

}

input:focus, textarea:focus{

    outline: none;

}

p {

	line-height: 26px;

    font-size: 16px;

    color: #444;

}

img {

	max-width: 100%;

}

select{  

 -webkit-border-radius: 0;

 -moz-border-radius: 0;

 border-radius: 0;

}

.margin-top30 {

	margin-top: 30px;

}

.margin-left80 {

	margin-left: 80px;

}



/*Common*/

.section {

	padding: 50px 0;

	overflow: hidden;

}

.greybg {

	background: #f6f6f6;

}

/*Section Title*/

.titleTop {

	text-align: center;

	margin-bottom: 30px;

}

.titleTop .subtitle {

	font-size:18px;

	font-weight: 600;

	color: #33af91;

    margin-bottom: 5px;

}

.titleTop h3 {

	font-size: 36px;

	font-weight: 600;

	color: #000;

}

.titleTop h3 span {

	color: #33af91;

	font-weight: 200;

}





/************************************************

           ==Tyography css==

*************************************************/



.mt-wrapper {

	margin-bottom: 30px;

}

h1, .h1 {

	font-size: 45px;

}

h2, .h2 {

	font-size: 30px;

}

h3 {

	font-size: 25px;

}

h4 {

	font-size: 20px;

}

h5 {

	font-size: 18px;

}

h6 {

	font-size: 16px;

}



.button-orng {

	background: #ffb72f;

	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffb72f), to(#ff9000));

	background: -webkit-linear-gradient(#ffb72f, #ff9000);

	background: -moz-linear-gradient(#ffb72f, #ff9000);

	background: -ms-linear-gradient(#ffb72f, #ff9000);

	background: -o-linear-gradient(#ffb72f, #ff9000);

	background: linear-gradient(#ffb72f, #ff9000);

	padding: 7px 20px;

	color: #fff;

	border-radius: 5px;

	display: inline-block;

}

.button-orng:hover {

	text-decoration: none;

	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ff9000), to(#ffb72f));

	background: -webkit-linear-gradient(#ff9000, #ffb72f);

	background: -moz-linear-gradient(#ff9000, #ffb72f);

	background: -ms-linear-gradient(#ff9000, #ffb72f);

	background: -o-linear-gradient(#ff9000, #ffb72f);

	background: linear-gradient(#ff9000, #ffb72f);

	color: #fff;

}

.sitebtn {

	-webkit-box-shadow: 3px 4px rgba(255, 209, 95, 0.3);

	-moz-box-shadow: 3px 4px rgba(255, 209, 95, 0.3);

	box-shadow: 3px 4px rgba(255, 209, 95, 0.3);

	background: #ff9000;

	font-size: 18px;

	color: #fff;

	text-transform: uppercase;

	padding: 12px 30px;

	display: inline-block;

	border-radius: 4px;

}

.sitebtn:hover {

	background: #111;

	color: #fff;

	text-decoration: none;

}

.sitebtn i, .button-orng i {

	padding-right: 7px;

	font-size: 16px;

	display: inline-block;

}

.grey_sitebtn {

	-webkit-box-shadow: 3px 4px rgba(202, 255, 127, 0.3);

	-moz-box-shadow: 3px 4px rgba(202, 255, 127, 0.3);

	box-shadow: 3px 4px rgba(202, 255, 127, 0.3);

	background: #444;

	font-size: 18px;

	color: #fff;

	text-transform: uppercase;

	padding: 12px 30px;

	display: inline-block;

	border-radius: 4px;

}

.grey_sitebtn:hover {

	background: #111;

	color: #fff;

	text-decoration: none;

}

.grey_sitebtn i {

	padding-right: 7px;

	font-size: 16px;

	display: inline-block;

}

.gree_sitebtn {

	-webkit-box-shadow: 3px 4px rgba(202, 255, 127, 0.3);

	-moz-box-shadow: 3px 4px rgba(202, 255, 127, 0.3);

	box-shadow: 3px 4px rgba(202, 255, 127, 0.3);

	background: #77c30a;

	font-size: 18px;

	color: #fff;

	text-transform: uppercase;

	padding: 12px 30px;

	display: inline-block;

	border-radius: 4px;

}

.gree_sitebtn:hover {

	background: #111;

	color: #fff;

	text-decoration: none;

}

.gree_sitebtn i {

	padding-right: 7px;

	font-size: 16px;

	display: inline-block;

}

/*Shortcode*/

.mt-shortcodes-d-styles {

	padding-bottom: 30px;

}

.mt-shortcodes-default-custom-styles .row1 {

	padding-bottom: 55px;

}

.mt-list-style h4 {

	font-size: 16px;

	font-weight: 400;

	color: #252525;

}

.mt-list-style ul {

	padding: 0;

	list-style: none;

}

.mt-list-style ul li {

	line-height: 36px;

}

.mt-list-style ul li a {

	color: #737373;

	line-height: 36px;

}

.mt-list-style ul li span {

	font-size: 16px;

	margin-right: 10px;

}

.mt-list-style-blue {

	color: #33af91;

}

/*Buttons*/

.mt-style-button {

	border-radius: 3px;

	display: inline-block;

	text-align: center;

	margin-bottom: 24px;

	text-transform: uppercase;

	cursor: pointer;

	padding: 0 20px;

}

.mt-style-button1 .mt-style-button {

	background: #33af91;

	color: #fff;

	border-radius: 3px;

}

.mt-style-button2 .mt-style-button {

	background: #ddd;

	color: #000000;

	border-radius: 3px;

}

.mt-style-button3 .mt-style-button {

	background: #fff;

	color: #252525;

	border: 2px solid #42454a;

	border-radius: 3px;

}

.mt-style-button41 .mt-style-button {

	background: #55adff;

	color: #fff;

	border-radius: 30px;

}

.mt-style-button42 .mt-style-button {

	background: #ffb72f;

	color: #fff;

	border-radius: 0px;

}

.mt-style-button43 .mt-style-button {

	background: #5fd33f;

	color: #fff;

	border-radius: 3px;

}

.mt-style-button.large {

	line-height: 51px;

	font-size: 16px;

	letter-spacing: 1px;

}

.mt-style-button.normal {

	line-height: 40px;

	font-size: 12px;

	letter-spacing: 1px;

}

.mt-style-button.small {

	line-height: 30px;

	font-size: 9px;

	letter-spacing: 1px;

}

.mt-style-button1 .mt-style-button:hover {

	background: #333;

	color: #fff;

	text-decoration: none;

}

.mt-style-button2 .mt-style-button:hover {

	background: #33af91;

	color: #fff;

	border-radius: 3px;

	text-decoration: none;

}

.mt-style-button3 .mt-style-button:hover {

	background: #33af91;

	color: #fff;

	border-radius: 3px;

	border: 2px solid #33af91;

	text-decoration: none;

}

.mt-style-button41 .mt-style-button:hover {

	background: #333;

	color: #fff;

	border-radius: 30px;

	text-decoration: none;

}

.mt-style-button42 .mt-style-button:hover {

	background: #000;

	color: #fff;

	border-radius: 0px;

	text-decoration: none;

}

.mt-style-button43 .mt-style-button:hover {

	background: #000;

	color: #fff;

	border-radius: 3px;

	text-decoration: none;

}





/************************************************

           ==Header css==

*************************************************/



.header {

	background: #ffffff;

	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);

}

.main-navbar {

	padding: 18px 0;

	background: #ffffff;

}

.main-navbar .navbar-brand {

	font-weight: 700;

	color: #0f172a;

}



.main-navbar .navbar-brand img {

  height: 38px;

  width: auto;

}

.brand-title {

	font-size: 1.1rem;

	font-weight: 700;

	color: #0f172a;

	text-transform: capitalize;

}

.brand-tagline {

	font-size: 0.7rem;

	font-weight: 600;

	letter-spacing: 0.08em;

	color: #94a3b8;

	text-transform: uppercase;

}

.main-navbar .main-menu {

	gap: 24px;

}

.main-navbar .main-menu .nav-link {

	font-weight: 600;

	font-size: 0.95rem;

	color: #1f2937;

	padding: 12px 0;

	position: relative;

	transition: color 0.2s ease;

}

.main-navbar .main-menu .nav-link.active,

.main-navbar .main-menu .nav-link:focus,

.main-navbar .main-menu .nav-link:hover {

	color: #0f364e;

}

.main-navbar .main-menu .nav-link::before {

	content: "";

	position: absolute;

	left: 0;

	right: 0;

	bottom: -6px;

	height: 3px;

	background: #0f364e;

	border-radius: 999px;

	transform: scaleX(0);

	transform-origin: center;

	transition: transform 0.25s ease;

}

.main-navbar .main-menu .nav-link.active::before,

.main-navbar .main-menu .nav-link:hover::before {

	transform: scaleX(1);

}

.main-navbar .dropdown-menu {

	border: none;

	border-radius: 16px;

	box-shadow: 0 20px 40px rgba(15, 23, 42, 0.16);

	padding: 12px 0;

}

.main-navbar .dropdown-menu .dropdown-item {

	font-weight: 600;

	color: #475569;

	padding: 12px 18px;

}

.main-navbar .dropdown-menu .dropdown-item:hover {

	background: rgba(37, 99, 235, 0.1);

	color: #1d4ed8;

}

.navbar-actions .btn {

	border-radius: 999px;

	padding: 10px 22px;

	font-weight: 600;

	font-size: 0.95rem;

}

.navbar-actions .signin-btn {

	border-color: #0f364e;

	color: #0f364e;

}

.navbar-actions .signin-btn:hover {

	background: rgba(37, 99, 235, 0.08);

	color: #1d4ed8;

}

.lang-switcher {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 4px;
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(15, 54, 78, 0.18);
    border-radius: 999px;
    margin-right: 4px;
}
.lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: #475569;
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    transition: 0.2s ease-in-out;
    line-height: 1;
}
.lang-btn:hover {
    color: #1d4ed8;
}
.lang-btn-active {
    background: #ffffff;
    color: #1d4ed8;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.10);
}
.lang-btn .fa-globe {
    font-size: 0.95rem;
}
.lang-code {
    letter-spacing: 0.04em;
}

.navbar-actions .register-btn {

	background: #33af91;

	border-color: #33af91;

	color: #ffffff;

	box-shadow: 0 10px 20px rgba(34, 197, 94, 0.25);

}

.navbar-actions .register-btn:hover {

	background: #16a34a;

	border-color: #16a34a;

	color: #ffffff;

}

.navbar-toggler {

	display: inline-block;

	border: none;

}

.navbar-toggler:focus {

	box-shadow: none;

}

.navbar-collapse.show {

	overflow: inherit;

	height: auto;

	padding: 12px 0;

}

.dropdown-menu-lg {

	min-width: 260px;

}

.navbar-actions {

	margin-left: 12px;

}



.user-dropdown .btn{width: 48px; height: 48px; border-radius: 50%; overflow: hidden; padding: 4px; background: #fff; border: 1px solid #eee;}

.user-dropdown .btn img{width: 100%; height: 100%; object-fit: cover; border-radius: 50%;}



/* Hide mobile menu elements on desktop */

.mobile-menu-close {

	display: none;

}

.mobile-menu-overlay {

	display: none;

}

    

@media (max-width: 991px) {

	/* Show mobile menu elements on mobile */

	.mobile-menu-close {

		display: flex;

	}

	.mobile-menu-overlay {

		display: block;

	}

	/* Mobile Menu Slide-in from Right */

	.mobile-menu {

		position: fixed;

		top: 0;

		right: -100%;

		width: 320px;

		max-width: 85vw;

		height: 100vh;

		min-height: 100vh;

		background: #ffffff;

		box-shadow: -4px 0 20px rgba(15, 23, 42, 0.15);

		z-index: 1050;

		overflow-y: auto;

		transition: right 0.3s ease;

		padding: 0;

		margin: 0;

		border-radius: 0;

		display: flex !important;

		flex-direction: column;

	}

	.mobile-menu.show {

		right: 0;

        padding: 40px 0;

	}

	.mobile-menu-close {

		position: absolute;

		top: 20px;

		right: 20px;

		width: 40px;

		height: 40px;

		border: none;

		background: #f1f5f9;

		border-radius: 50%;

		display: flex;

		align-items: center;

		justify-content: center;

		cursor: pointer;

		z-index: 1051;

		color: #475569;

		font-size: 1.2rem;

		transition: all 0.2s ease;

	}

	.mobile-menu-close:hover {

		background: #e2e8f0;

		color: #0f172a;

	}

	.mobile-menu-overlay {

		position: fixed;

		top: 0;

		left: 0;

		width: 100%;

		height: 100%;

		background: rgba(15, 23, 42, 0.5);

		z-index: 1049;

		opacity: 0;

		visibility: hidden;

		transition: opacity 0.3s ease, visibility 0.3s ease;

	}

	.mobile-menu-overlay.show {

		opacity: 1;

		visibility: visible;

	}

	.mobile-menu .navbar-nav {

		padding: 60px 24px 24px;

		margin: 0;

		flex-direction: column;

		align-items: stretch;

        width: 100%;

	}

	.main-navbar .main-menu {

		gap: 0;

		padding: 16px 0;

	}

	.main-navbar .main-menu .nav-link {

		padding: 14px 0;

		font-size: 1rem;

		border-bottom: 1px solid rgba(148, 163, 184, 0.15);

		display: flex;

		align-items: center;

		justify-content: space-between;

		width: 100%;

		position: relative;

	}

	.main-navbar .main-menu .nav-link:not(.dropdown-toggle) {

		justify-content: flex-start;

	}

	.main-navbar .main-menu .nav-link.dropdown-toggle {

		position: relative;

	}

	.main-navbar .main-menu .nav-link.dropdown-toggle::after {

		margin-left: 12px !important;

		margin-right: 0 !important;

		order: 2;

		position: static !important;

		transform: none !important;

		float: none !important;

		vertical-align: middle;

		flex-shrink: 0;

	}

	.main-navbar .main-menu .nav-item:last-child .nav-link {

		border-bottom: none;

	}

	.mobile-menu .dropdown-menu {

		position: static;

		float: none;

		width: 100%;

		margin: 0;

		border: none;

		box-shadow: none;

		background: #f8fafc;

		border-radius: 8px;

		margin-top: 8px;

		padding: 8px 0;

	}

	.mobile-menu .dropdown-item {

		padding: 10px 20px;

		font-size: 0.9rem;

	}

	.mobile-menu .navbar-actions {

		padding: 20px 24px;

		margin: 0;

		border-top: 1px solid rgba(148, 163, 184, 0.15);

		flex-direction: column;

		gap: 12px;

        width: 100%;

	}

	.mobile-menu .navbar-actions .btn {

		width: 100%;

		justify-content: center;

	}

	.mobile-menu .user-dropdown {

		width: 100%;

		margin-top: 8px;

	}

	.mobile-menu .user-dropdown .btn {

		width: 100% !important;

		height: auto !important;

		min-height: 56px;

		max-height: none !important;

		justify-content: flex-start;

		align-items: center;

		padding: 12px 16px;

		border-radius: 12px;

		background: #f8fafc;

		border: 1px solid rgba(148, 163, 184, 0.2);

		overflow: visible;

		display: flex;

		position: relative;

	}

	.mobile-menu .user-dropdown .btn::after {

		margin-left: auto;

	}

	.mobile-menu .user-dropdown .btn img {

		width: 40px !important;

		height: 40px !important;

		min-width: 40px !important;

		min-height: 40px !important;

		max-width: 40px !important;

		max-height: 40px !important;

		object-fit: cover !important;

		border-radius: 50%;

		flex-shrink: 0;

		display: block;

		margin: 0;

		padding: 0;

	}

	.mobile-menu .dropdown-toggle::after {

		margin-left: auto !important;

		margin-right: 0 !important;

		order: 2;

		float: none;

	}

}



/************************************************

           ==Hero Section css==

*************************************************/

.hero-section {

	position: relative;

	padding: 120px 0;

	background: radial-gradient(circle at 10% 20%, rgba(59, 130, 246, 0.12) 0%, rgba(59, 130, 246, 0) 45%),

		linear-gradient(135deg, #f0f9ff 0%, #f0fff4 45%, #ffffff 100%);

}

.hero-badge {

	display: inline-block;

	padding: 6px 18px;

	font-size: 0.82rem;

	font-weight: 600;

	letter-spacing: 0.08em;

	color: #047857;

	background: rgba(34, 197, 94, 0.12);

	border-radius: 999px;

	text-transform: uppercase;

	margin-bottom: 20px;

}

.hero-title {

	font-size: 3rem;

	font-weight: 700;

	color: #0f172a;

	margin-bottom: 16px;

	line-height: 1.1;

}

.hero-copy {

	font-size: 1.05rem;

	color: #475569;

	margin-bottom: 32px;

	max-width: 540px;

}

.hero-search {

	background: #ffffff;

	border-radius: 18px;

	padding: 14px;

	box-shadow: 0 24px 55px rgba(15, 23, 42, 0.12);

	margin-bottom: 30px;

}

.hero-search-fields {

	display: flex;

	align-items: stretch;

	gap: 12px;

}

.hero-field {

	flex: 1;

	display: flex;

	align-items: center;

	padding: 10px 16px;

	background: #f8fafc;

	border-radius: 12px;

	border: 1px solid transparent;

	transition: border-color 0.2s ease, background 0.2s ease;

}

.hero-field i {

	color: #64748b;

	font-size: 1rem;

}

.hero-field .form-control,

.hero-field .form-select {

	border: none;

	background: transparent;

	box-shadow: none;

	font-size: 0.95rem;

	color: #1f2937;

}

.hero-field .form-control::placeholder {

	color: #94a3b8;

}

.hero-field:focus-within {

	background: #ffffff;

	border-color: rgba(37, 99, 235, 0.35);

}

.hero-field .form-select {

	padding-right: 1.75rem;

}

.hero-field .form-select:focus {

	box-shadow: none;

}

.hero-search .divider {

	width: 1px;

	background: #e2e8f0;

}

.hero-submit {

	border-radius: 12px;

	background: #33af91;

	border-color: #33af91;

	color: #ffffff;

	display: flex;

	align-items: center;

	justify-content: center;

	padding: 0 22px;

	font-size: 1.1rem;

	box-shadow: 0 12px 25px rgba(34, 197, 94, 0.25);

	transition: transform 0.2s ease, background 0.2s ease;

}

.hero-submit:hover {

	background: #16a34a;

	border-color: #16a34a;

	transform: translateY(-1px);

}

.hero-actions {

	margin-top: 16px;

}

.hero-stat {

	background: #ecfeff;

	border-radius: 18px;

	padding: 14px 20px;

	display: inline-flex;

	flex-direction: column;

	min-width: 120px;

	box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.28);

}



.heroslider3{position:  relative; padding-top: 70px; padding-bottom: 180px; background:

    radial-gradient(circle at 10% 20%, rgba(59, 130, 246, 0.25) 0%, rgba(59, 130, 246, 0) 50%),

    linear-gradient(135deg, #dbeafe 0%, #dcfce7 45%, #f3f4f6 100%);}

.heroslider3:after{content: "";

    position: absolute;

    inset: 0; /* top:0; right:0; bottom:0; left:0; */

    background: #fff;

    z-index: 1;

    pointer-events: none;

    /* upside-down triangle: left-bottom, top-right, bottom-right */

    clip-path: polygon(0 100%, 180% 0, 100% 100%);}

    .heroslider3 .col-lg-6{z-index: 3;}

.stat-value {

	font-size: 1.5rem;

	font-weight: 700;

	color: #0ea5e9;

	line-height: 1.1;

}

.stat-label {

	font-size: 0.85rem;

	font-weight: 600;

	color: #0f172a;

}

.hero-links {

	display: inline-flex;

	align-items: center;

}

.hero-link {

	font-weight: 600;

	color: #0f364e;

	display: inline-flex;

	align-items: center;

	gap: 8px;

	text-decoration: none;

	transition: color 0.2s ease;

}

.hero-link i {

	color: #33af91;

}

.hero-link:hover {

	color: #1d4ed8;

}

.hero-visual {

	position: relative;

	margin-left: auto;

}



/* Hero Revolution slider fixed height */

.hero-visual .rev_slider_wrapper,

.hero-visual .rev_slider {

	height: 500px !important;

}



.hero-visual .rev-slidebg {

	width: 100%;

	height: 100%;

	object-fit: cover;

}



.hero-floating-card {

	position: absolute;

	left: 12%;

	bottom: -30px;

	background: #ffffff;

	border-radius: 20px;

	padding: 18px 20px;

	box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);

	display: flex;

	align-items: center;

	gap: 16px;

    z-index: 50;

}

.tp-simpleresponsive >ul >li{border-radius: 20px; box-shadow: 0 20px 60px rgba(15, 23, 42, 0.18); background-color: #fff;}

.hero-floating-card .card-label {

	font-weight: 700;

	color: #0f172a;

}

.hero-floating-card .btn {

	border-radius: 999px;

	padding: 8px 18px;

	font-weight: 600;

	background: #0f364e;

	border-color: #0f364e;

}

.hero-floating-card .btn:hover {

	background: #1d4ed8;

	border-color: #1d4ed8;

}



.herobgimage{background: url(../images/hero-bg.jpg) no-repeat top; background-size: cover; background-attachment: fixed; text-align: center;}

.herobgimage .hero-copy{margin: 0 auto; color: #fff; margin-bottom: 30px;}

.herobgimage .hero-title{color: #fff;}

.herobgimage .hero-badge{background: #fff; }

.herobgimage .hero-actions{justify-content: center;}

.herobgimage .hero-link{color: #fff;}





@media (max-width: 991px) {

	.hero-section {

		padding: 80px 0;

		text-align: center;

	}

	.hero-title {

		font-size: 2.4rem;

	}

	.hero-search {

		margin-left: auto;

		margin-right: auto;

	}

	.hero-search-fields {

		flex-direction: column;

	}

	.hero-search .divider {

    display: none;

}

	.hero-field {

		width: 100%;

	}

	.hero-submit {

		width: 100%;

		padding: 14px;

	}

	.hero-actions {

		justify-content: center;

		text-align: left;

	}

	.hero-visual {

		margin: 40px auto 0;

	}

	.hero-floating-card {

		left: 50%;

		transform: translateX(-50%);

		bottom: -24px;

	}

}



/* Intro boxes */

.infodatawrap{padding-top: 40px;}

.userloginbox{background:#0f364e; padding:30px 40px; padding-right: 110px;	

	display: block;

	border-radius: 100px;

	color: #fff;

	position: relative;

}

.userloginbox.postjobbox{background:#33af91;}

.userloginbox img{position: absolute; right: 30px; top: 50%; width: 70px; margin-top: -35px;}

.userloginbox h3{font-weight: 700;}

.userloginbox:hover{background: #6803e9; color: #fff;}

.userloginbox p{max-width: 770px; margin: 0 auto; font-size: 16px; color: #fff;}

.userloginbox.lessbdr{border-radius: 20px;}

.emploginbox{background:#fff; padding:50px 30px;	

	display: block;

	border: 1px solid #ddd;

	border-radius: 10px;

}

.emploginbox:after{

	background-color: #fff;

    opacity: 0.1;

    width: 1000px;

    height: 1000px;

    position: absolute;

    left: -200px;

    bottom: 30px;

    content: "";

    border-radius: 50%;

}

.emploginbox .viewallbtn{margin-top:30px;}

.emploginbox .viewallbtn a{background: #fff; color: #000;}

.emploginbox .viewallbtn a:hover{background: #000; color: #fff}

.emploginbox p{max-width: 770px; margin: 0 auto; font-size: 16px; color:#fff;}

.emploginbox .titleTop h3{color:#fff;}

.usrintxt{position: relative; z-index: 1;}

.usrintxt .titleTop h4{color:#fff;}



/* Company grid */

.company-section {

	padding-top: 80px;

	padding-bottom: 80px;

}

.company-grid .col-12 {

	display: flex;

}

.company-card {

	background: #ffffff;

	border-radius: 18px;

	padding: 32px 24px;

	box-shadow: 0 12px 35px rgba(15, 23, 42, 0.08);

	border: 1px solid rgba(148, 163, 184, 0.15);

	text-align: center;

	color: inherit;

	display: flex;

	flex-direction: column;

	align-items: center;

	gap: 12px;

	transition: transform 0.2s ease, box-shadow 0.2s ease;

	width: 100%;

}

.company-card:hover {

	transform: translateY(-6px);

	box-shadow: 0 20px 45px rgba(15, 23, 42, 0.12);

	text-decoration: none;

}

.company-logo img {

	width: 72px;

	height: 72px;

	object-fit: contain;

	border-radius: 16px;

	box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);

	padding: 10px;

	background: #f8fafc;

}

.company-section-v2 {

	padding-top: 80px;

	padding-bottom: 80px;

}

.company-carousel-wrap {

	position: relative;

}

.company-carousel-v2 {

	padding: 10px 0 4px;

}

.company-card-v2 {

	background: #ffffff;

	border-radius: 18px;

	padding: 20px 18px;

	box-shadow: none;

	border: 1px solid rgba(148, 163, 184, 0.18);

	display: flex;

	align-items: center;

	gap: 14px;

	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;

}

.company-card-v2:hover {

	transform: translateY(-4px);

	border-color: rgba(37, 99, 235, 0.45);

}

.company-card-link-v2 {

	display: flex;

	align-items: center;

	gap: 14px;

	text-decoration: none;

	color: inherit;

	width: 100%;

}

.company-logo-v2 img {

	width: 56px;

	height: 56px;

	object-fit: cover;

	border-radius: 16px;

	box-shadow: 0 8px 18px rgba(15, 23, 42, 0.15);

}

.company-body-v2 {

	display: flex;

	flex-direction: column;

	gap: 6px;

}

.company-name-v2 {

	font-size: 1rem;

	font-weight: 700;

	color: #0f172a;

	margin-bottom: 0;

}

.company-meta-v2 {

	display: flex;

	flex-direction: column;

	gap: 2px;

	font-size: 0.85rem;

	color: #6b7280;

}

.company-location-v2 i {

	color: #0f364e;

	margin-right: 4px;

}

.company-openings-v2 {

	font-weight: 600;

	color: #16a34a;

}

.company-viewall-v2 {

	margin-top: 30px;

}

.company-nav-v2 {

	position: absolute;

	top: 50%;

	transform: translateY(-50%);

	width: 34px;

	height: 34px;

	border-radius: 999px;

	background: #ffffff;

	box-shadow: 0 10px 25px rgba(15, 23, 42, 0.18);

	display: flex;

	align-items: center;

	justify-content: center;

	cursor: pointer;

	color: #111827;

	z-index: 2;

	transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;

}

.company-nav-v2:hover {

	background: #0f364e;

	color: #ffffff;

	box-shadow: 0 16px 35px rgba(37, 99, 235, 0.45);

}

.company-prev-v2 {

	left: -18px;

}

.company-next-v2 {

	right: -18px;

}

@media (max-width: 991.98px) {

	.company-nav-v2 {

		display: none;

	}

}

.company-card h5 {

	font-size: 1.05rem;

	font-weight: 700;

	color: #0f172a;

	margin-bottom: 0;

}

.company-meta {

	font-size: 0.9rem;

	color: #64748b;

	display: flex;

	align-items: center;

	gap: 6px;

}

.company-meta i {

	color: #33af91;

}

.company-openings {

	font-size: 0.92rem;

	font-weight: 600;

	color: #1f2937;

	background: rgba(37, 99, 235, 0.08);

	border-radius: 12px;

	padding: 8px 16px;

	display: inline-flex;

	align-items: center;

	gap: 8px;

}

.company-openings i {

	color: #0f364e;

}

.company-viewall {

	margin-top: 40px;

}

.company-viewall .btn {

	min-width: 260px;

	padding: 14px 26px;

	border-radius: 999px;

	box-shadow: 0 18px 35px rgba(37, 99, 235, 0.25);

	font-weight: 600;

}



@media (max-width: 767px) {

	.company-card {

		padding: 28px 20px;

	}

	.company-viewall .btn {

		min-width: auto;

		width: 100%;

	}

}





/* How it works */

.howit-section {

	background: linear-gradient(90deg, rgba(248, 250, 252, 0.9) 0%, rgba(236, 253, 245, 0.9) 100%);

	padding-top: 90px;

	padding-bottom: 90px;

}

.howit-grid {

	margin-top: 40px;

}

.howit-card {

	background: rgba(255, 255, 255, 0.92);

	border-radius: 22px;

	padding: 36px 28px;

	text-align: center;

	box-shadow: 0 15px 40px rgba(15, 23, 42, 0.08);

	border: 1px solid rgba(148, 163, 184, 0.12);

	height: 100%;

	display: flex;

	flex-direction: column;

	align-items: center;

	gap: 18px;

	transition: transform 0.25s ease, box-shadow 0.25s ease;

}

.howit-card:hover {

	transform: translateY(-8px);

	box-shadow: 0 25px 50px rgba(15, 23, 42, 0.12);

}

.howit-icon {

	width: 96px;

	height: 96px;

	border-radius: 50%;

	background: #ffffff;

	display: flex;

	align-items: center;

	justify-content: center;

	box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16);

	margin-bottom: 6px;

}

.howit-icon i {

	font-size: 40px;

	color: #0f364e;

}

.howit-card h4 {

	font-size: 1.3rem;

	font-weight: 700;

	color: #111827;

	margin-bottom: 0;

}

.howit-card p {

	margin-bottom: 0;

	color: #475569;

	font-size: 0.96rem;

	line-height: 1.6;

}



@media (max-width: 991px) {

	.howit-card {

		padding: 32px 24px;

	}

	.howit-icon {

		width: 86px;

		height: 86px;

	}

}



@media (max-width: 767px) {

	.howit-section {

		padding-top: 70px;

		padding-bottom: 70px;

	}

	.howit-card {

		padding: 28px 22px;

	}

}



/* Featured jobs */

.featured-jobs .job-card {

	background: #ffffff;

	border-radius: 28px;

	padding: 26px;

	box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08);

	border: 1px solid rgba(148, 163, 184, 0.12);

	display: flex;

	flex-direction: column;

	gap: 16px;

	height: 100%;

	transition: transform 0.25s ease, box-shadow 0.25s ease;

}

.featured-jobs .job-card:hover {

	transform: translateY(-8px);

	box-shadow: 0 30px 60px rgba(15, 23, 42, 0.12);

}

.job-card-status {

    display: flex;

    align-items: center;

}

.job-card-status .job-type {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    font-size: 0.82rem;

    font-weight: 600;

    color: #0f172a;

    padding: 6px 14px;

    border-radius: 999px;

    background: rgba(148, 163, 184, 0.2);

}

.job-type.fulltime {

    color: #166534;

    background: rgba(34, 197, 94, 0.18);

}

.job-type.contract {

    color: #b91c1c;

    background: rgba(248, 113, 113, 0.18);

}

.job-type.parttime {

    color: #6d28d9;

    background: rgba(167, 139, 250, 0.22);

}

.job-type.freelance {

    color: #b45309;

    background: rgba(251, 191, 36, 0.22);

}

.job-type.internship {

    color: #0e7490;

    background: rgba(34, 211, 238, 0.22);

}

.job-salary {

    color: #0f172a;

    font-weight: 600;

}

.job-card-title {

	font-size: 1.24rem;

	font-weight: 700;

	margin: 0;

	color: #0f172a;

}

.job-card-title a {

	color: inherit;

	text-decoration: none;

}

.job-card-title a:hover {

	color: #0f364e;

}

.job-card-location {

	display: flex;

	align-items: center;

	gap: 8px;

	color: #0f364e;

	font-weight: 600;

	margin-bottom: 4px;

}



.job-card-meta {

	display: flex;

	flex-direction: column;

	gap: 4px;

}

.job-card-date {

	font-size: 0.9rem;

	color: #64748b;

}

.job-card-company {

	font-weight: 600;

	color: #0f172a;

}

.job-card-logo img {

	width: 52px;

	height: 52px;

	object-fit: contain;

	border-radius: 12px;

	background: #ffffff;

	box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12);

	padding: 6px;

}



@media (max-width: 767px) {

	.featured-jobs .job-card {

		padding: 26px;

	}

	.job-card-footer {

		flex-direction: column;

		align-items: flex-start;

	}

	.job-card-logo img {

		width: 48px;

		height: 48px;

	}

}



/* Categories carousel */

.category-section {

	background: linear-gradient(90deg, rgba(248, 250, 252, 0.8) 0%, rgba(236, 253, 245, 0.8) 100%);

	padding-top: 80px;

	padding-bottom: 80px;

}

.category-carousel-wrap {

	position: relative;

	margin-top: 40px;

	padding: 0 32px;

}

.category-carousel .category-card {

	background: #ffffff;

	border-radius: 18px;

	padding: 28px 24px;

	text-align: center;

	border: 1px solid rgba(148, 163, 184, 0.12);

	transition: transform 0.25s ease, box-shadow 0.25s ease;

}

.category-carousel .category-card:hover {

	transform: translateY(-8px);

}

.category-icon {

	width: 88px;

	height: 88px;

	margin: 0 auto 18px;

	border-radius: 24px;

	background: rgba(37, 99, 235, 0.08);

	display: flex;

	align-items: center;

	justify-content: center;

}

.category-icon img {

	max-width: 52px;

	height: auto;

}

.category-card h5 {

	font-size: 1rem;

	font-weight: 600;

	color: #0f172a;

	margin-bottom: 14px;

}

.category-jobs {

	display: inline-flex;

	align-items: center;

	gap: 6px;

	background: rgba(37, 99, 235, 0.12);

	color: #1d4ed8;

	font-weight: 600;

	border-radius: 999px;

	padding: 8px 16px;

	text-decoration: none;

}

.category-jobs i {

	color: inherit;

}

.category-nav {

	position: absolute;

	top: 50%;

	transform: translateY(-50%);

	width: 44px;

	height: 44px;

	border-radius: 50%;

	background: rgba(255, 255, 255, 0.9);

	box-shadow: 0 10px 25px rgba(15, 23, 42, 0.1);

	display: flex;

	align-items: center;

	justify-content: center;

	color: #0f364e;

	cursor: pointer;

	z-index: 2;

}

.category-prev {

	left: 0;

}

.category-next {

	right: 0;

}



.category-section-v2 {

	background: linear-gradient(90deg, rgba(248, 250, 252, 0.9) 0%, rgba(236, 253, 245, 0.9) 100%);

	padding-top: 80px;

	padding-bottom: 80px;

}

.category-grid-v2 {

	margin-top: 40px;

}

.category-card-v2 {

	background: #ffffff;

	border-radius: 18px;

	padding: 24px 22px;

	text-align: left;

	border: 1px solid rgba(148, 163, 184, 0.16);

	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;

	display: flex;

	align-items: center;

	gap: 18px;

}

.category-carousel-v2 .category-card-v2:hover {

	transform: translateY(-6px);

	border-color: rgba(37, 99, 235, 0.45);

	box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);

}

.category-icon-v2 {

	width: 72px;

	height: 72px;

	border-radius: 20px;

	background: rgba(37, 99, 235, 0.08);

	display: flex;

	align-items: center;

	justify-content: center;

	flex-shrink: 0;

}

.category-icon-v2 img {

	max-width: 44px;

	height: auto;

}

.category-title-v2 {

	font-size: 1rem;

	font-weight: 600;

	color: #0f172a;

	margin-bottom: 6px;

}

.category-jobs-v2 {

	display: inline-flex;

	align-items: center;

	gap: 6px;

	background: rgba(37, 99, 235, 0.12);

	color: #1d4ed8;

	font-weight: 600;

	border-radius: 999px;

	padding: 6px 14px;

	text-decoration: none;

	font-size: 0.85rem;

}

.category-jobs-v2 i {

	color: inherit;

}

.category-body-v2 {

	display: flex;

	flex-direction: column;

	gap: 6px;

}



.category-icon-v2.bg-blue {

	background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);

}

.category-icon-v2.bg-emerald {

	background: linear-gradient(135deg, #ecfdf5 0%, #bbf7d0 100%);

}

.category-icon-v2.bg-indigo {

	background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);

}

.category-icon-v2.bg-amber {

	background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);

}

.category-icon-v2.bg-cyan {

	background: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%);

}

.category-icon-v2.bg-fuchsia {

	background: linear-gradient(135deg, #fdf4ff 0%, #fae8ff 100%);

}

.category-icon-v2.bg-rose {

	background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);

}

.category-viewall {

	margin-top: 45px;

}

.category-viewall .btn {

	min-width: 240px;

	border-radius: 999px;

	padding: 14px 26px;

	box-shadow: 0 18px 35px rgba(37, 99, 235, 0.2);

	font-weight: 600;

}



@media (max-width: 991px) {

	.category-nav {

		display: none;

	}

}



/* Industries chips */

.industries-section {

	background: #ffffff;

	padding-top: 80px;

	padding-bottom: 80px;

}

.industries-grid {

	margin-top: 32px;

	display: flex;

	flex-wrap: wrap;

	justify-content: center;

	gap: 14px;

}

.industry-chip {

	display: inline-flex;

	align-items: center;

	gap: 8px;

	padding: 10px 18px;

	border-radius: 999px;

	background: rgba(37, 99, 235, 0.08);

	color: #1d4ed8;

	font-weight: 600;

	text-decoration: none;

	border: 1px solid transparent;

	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;

}

.industry-chip .chip-icon {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	width: 28px;

	height: 28px;

	border-radius: 50%;

	background: #ffffff;

	color: inherit;

	box-shadow: 0 5px 12px rgba(37, 99, 235, 0.15);

}

.industry-chip:hover {

	background: #0f364e;

	color: #ffffff;

	border-color: #1d4ed8;

}

.industry-chip:hover .chip-icon {

	color: #0f364e;

	background: #f8fafc;

}







/************************************************

           ==map search css==

*************************************************/

#map_canvas {

	height: 450px;

	width: 100%;

}

.infobox-wrap {

	width: 340px;

	padding: 10px 5px;

}

.infobox-wrap .infobox-figure {

	width: 150px;

	float: left;

}

.infobox-wrap .infobox-content {

	width: 180px;

	float: left;

	padding-left: 15px;

	text-align: left;

}

.infobox-wrap .infobox-content h5 {

	text-align: left;

	margin: 0;

	font-size: 20px;

}

.infobox-wrap .infobox-content .address p {

	text-align: left;

	color: #999;

	font-weight: 600;

}

.infobox-wrap .infobox-rattings {

	margin: 10px 0 15px;

}

.infobox-wrap .infobox-rattings i {

	margin-right: 2px;

}

.infobox-wrap .infobox-figure img {

	max-width: 100% !important;

}

.infobox-rattings i {

	color: #ff9600;

	font-size: 18px;

}

#map-section .form-control {

	height: auto;

	border-radius: 0;

	padding: 13px 15px;

	border: none;

	font-size: 18px;

}

#map-section .btn {

	background: #33af91;

	border-radius: 0;

	color: #fff;

	border: none;

	font-size: 16px;

	text-transform: uppercase;

	font-weight: 700;

	padding: 15px 20px;

}

.searchblack {

	background: #333;

	padding: 40px 0;

	margin-top: 0;

}



.searchbar select.form-control, .searchblack select.form-control{

	padding: 12px 15px 13px 15px;

	appearance: auto;

	border-left: 1px solid #ddd;

}



/*********************************************

		Revolution slider

**********************************************/

.tp-banner-container {

	position: relative;

	z-index: 1;

	padding: 0;

	width: 100%;

}

.tp-banner {

	position: relative;

	width: 100%;

}

.tp-caption {

	line-height: normal !important

}

.tp-caption a {

	color: inherit !important;

}

.tp-bullets.simplebullets.round .bullet {

	border: 3px #fff solid;

	border-radius: 50%;

	background-image: none !important;

}

.tparrows {

	width: auto !important;

	height: auto !important;

	background-image: none !important;

}

.tp-arr-allwrapper {

	margin: 0 10px;

	width: 50px;

	height: 60px;

	background: rgba(255,255,255,0.5);

}

.tp-arr-allwrapper:hover .tp-arr-iwrapper {

	color: #fff;

}



.tp-arr-iwrapper {

	color: #000;

	text-align: center;

	font-size: 30px;

	font-family: 'FontAwesome';

	line-height: 60px;

}



.tp-leftarrow .tp-arr-iwrapper:before {

	content: "\f104";

}

.tp-rightarrow .tp-arr-iwrapper:before {

	content: "\f105";

}



.slide-h1 {

	margin: 5px 0 !important;

	padding: 0 0 10px !important;

	padding-bottom: 5px !important;

	color: #444;

	text-transform: uppercase;

	font-weight: bold;

	font-size: 57px;

}

.slide-h2 {

	margin: 5px 0 !important;

	padding: 0 0 10px !important;

	padding-bottom: 5px !important;

	color: #555;

	font-weight: bold;

	font-size: 55px;

	line-height: 100%;

}

.big-font {

	text-transform: uppercase;

	font-weight: 800;

	font-size: 60px;

}

.large-desc {

	font-size: 16px;

}

.slide-h3 {

	color: #fff;

	font-size: 31px;

	line-height: 100%;

}

.slide-h3 span {

	text-transform: uppercase;

	font-weight: bold;

}

.slide-head {

	text-transform: uppercase;

	font-weight: 900;

	font-size: 30px;

}

.slide-desc {

	font-size: 22px;

	line-height: 150%;

}

.main-title {

	text-transform: uppercase;

	font-weight: 800;

	font-size: 70px;

}

.icon-cont {

	padding: 15px 40px;

	border-radius: 10px;

	text-align: center;

}

.icon-cont:after {

	position: absolute;

	bottom: -10px;

	left: 40%;

	z-index: 5;

	display: inline-block;

	width: 0;

	height: 0;

	border-width: 10px 10px 0 10px;

	border-style: solid;

	content: "";

}

.icon-cont i {

	margin-bottom: 10px;

	color: #fff;

	font-size: 50px;

}

.icon-cont span {

	display: block;

	padding: 0 0 5px;

	color: #fff;

	text-align: center;

	font-size: 18px;

}

a.wit-btn {

	background: #fff;

	color: #333 !important;

	text-transform: uppercase;

}

.wit-line {

	width: 5%;

	height: 1px;

	background: #fff;

}

.vert-line {

	min-height: 270px;

	width: 1px;

	background: #fff;

}

.subTxt {

	text-transform: uppercase;

	font-weight: bold;

	font-size: 17px;

	color: #333;

}

.large-title {

	color: #222;

	font-size: 60px;

	font-weight: 800;

	text-transform: uppercase !important;

}

.large-light-title {

	color: #787878 !important;

	font-size: 70px;

	font-weight: lighter;

	text-transform: uppercase;

	letter-spacing: 2px

}

.large-text {

	font-size: 20px;

	color: #000;

	font-weight: lighter;

}

.larger-text {

	font-size: 24px;

	font-weight: lighter;

	text-transform: uppercase;

}

.witTxt {

	color: #fff !important;

}

.light-font {

	font-weight: lighter !important;

	font-size: 50px;

}

.black-bg {

	background: rgba(0,0,0,.63);

	color: #a8a8a8;

	text-transform: none;

}

.lft-list {

	padding: 10px;

	font-size: 18px;

	color: #fff;

}

.wit-border {

	border: 1px #fff solid;

	padding: 15px 60px;

	color: #fff;

	font-size: 16px;

	text-transform: uppercase;

}

.rounded-bord {

	margin-right: 15px;

	border: 1px #fff solid;

	width: 30px;

	height: 30px;

	text-align: center;

	line-height: 30px;

	border-radius: 50%;

}

#vertical-ticker {

	height: 120px;

	overflow: hidden;

}

#vertical-ticker li {

	padding: 15px 20px;

	display: block;

	text-align: center;

}

.to-bottom i.fa {

	font-size: 30px;

	border: 2px #a8a8a8 solid;

	padding: 20px 22px;

	border-radius: 50%;

	-webkit-animation: bounce 2s infinite linear;

	animation: bounce 2s infinite linear;

}

.slidertext1 {

	color: #fff;

	font-size: 36px;

	font-weight: 700;

	padding: 15px;

	text-transform: uppercase;

	font-family: 'Montserrat', sans-serif;

}

.sliderpara {

	color: #fff;

	font-size: 18px;

	font-weight: 600;

	padding: 15px;

	text-transform: none !important;

}

.slidertext5{padding:0 15px;}

.slidertext5 a {

	color: #fff !important;

	font-size: 24px;

	font-weight: 700;

	padding: 15px 50px;

	text-transform: capitalize !important;

	text-align: left;

	background: #33af91;

	font-family: 'Montserrat', sans-serif;

}





/************************************************

           == How it works css==

*************************************************/

.howlist {

	list-style: none;

}

.howlist li {

	margin-top: 30px;

	text-align: center;

}

.howlist li .iconcircle {

	width: 100px;

	height: 100px;

	border: 3px solid #78ceff;

	border-radius: 50%;

	text-align: center;

	line-height: 115px;

	margin-bottom: 15px;

	display: inline-block;

	background: #33af91;

}

.howlist li:nth-child(2) .iconcircle{background:#6ACA00; border-color:#83ec0f;}

.howlist li:last-child .iconcircle{background:#f8a60c; border-color:#ffc456;}

.howlist li .iconcircle i {

	font-size: 48px;

	color: #fff;

}

.howlist li h4 {

	font-size: 24px;

	font-weight: 700;

	color: #000;

	margin-bottom: 10px;

}

.howlist li p {

	font-size: 16px;

	line-height: 24px;

	color: #555;

}



/************************************************

           == Top Employers css==

*************************************************/

.employerList:after {

	display: table;

	clear: both;

	content: '';

}



.employerList li .empint{ background: #fff; border-radius: 5px; -webkit-transition: all 0.4s ease 0s;

    -moz-transition: all 0.4s ease 0s;

    -ms-transition: all 0.4s ease 0s;

    -o-transition: all 0.4s ease 0s;

    transition: all 0.4s ease 0s; text-align: center}







.employerList li h3{font-size: 14px; margin-top: 10px; margin-bottom: 5px;}

.employerList li p{color: #888;}

.employerList li img {

	width: 100%;

	border: 2px solid #fff;

	display: block;

	border-radius: 5px;

	box-shadow: 2px 8px 15px rgba(0,0,0,.1);

}

.employerList li:hover img{border-color: #5e2dfa;}

.employerList .owl-stage-outer{padding:20px 0 20px 0;}

.employerList .owl-controls{text-align: center; margin-top: -15px;}

.employerList .owl-controls .owl-nav i{display: inline-block; background: #333; color: #fff; font-size: 20px; padding: 9px 12px; margin: 0 5px; cursor: pointer;}



.compnaieslist li{margin-bottom: 30px;}

.compnaieslist li .compint{background: #fff; padding:10px; border: 1px solid #e4e4e4;}

.compnaieslist li .imgwrap{min-height: 240px; max-height: 240px; overflow: hidden; margin-bottom: 10px;}

.compnaieslist li .imgwrap img{width: 100%;}

.compnaieslist li:hover .compint{box-shadow: 0 0 10px rgba(0,0,0,0.1); border: 1px solid #5e2dfa;}

.compnaieslist li h3 a{font-size: 18px; color:#5e2dfa ;}

.compnaieslist li .loctext{margin-bottom: 10px;}

.compnaieslist li i {

    color: #5e2dfa;

    width: 18px;

    text-align: left;

}

.compnaieslist li .curentopen, .compnaieslist li .loctext{color: #666;}

/*Top Search*/

.topsearchwrap {

}

.topsearchwrap h4 {

	background: #33af91;

	margin-bottom: 15px;

	color: #fff;

	font-size: 30px;

	font-weight: 700;

	padding: 12px 20px;

	text-transform: uppercase;

}

.topsearchwrap h5 {

	background: #333;

	margin-bottom: 15px;

	color: #fff;

	font-size: 30px;

	font-weight: 700;

	padding: 12px 20px;

	text-transform: uppercase;

}

.catelist li a {

	display: block;

	margin: 10px 0;

	position: relative;

	padding-left: 15px;

	color: #000;

	font-weight: 600

}

.catelist li a:hover {

	color: #33af91;

}

.catelist li a:before {

	position: absolute;

	left: 0;

	content: '\f0da';

	font-family: 'FontAwesome';

	font-weight: 400;

}

.catelist li span {

	color: #6aca00;

}



/************************************************

           == Home Jobs css==

*************************************************/

.jobslist {

	list-style: none

}

.jobslist li {

	margin-top: 30px;

}

.jobslist li .jobint {

	background: #fff;

    padding: 15px;

    transition: 0.4s ease-in-out;

    -webkit-transition: 0.4s ease-in-out;

    -ms-transition: 0.4s ease-in-out;

    -moz-transition: 0.4s ease-in-out;

    min-height: 113px;

    border-radius: 10px;

    box-shadow: 0 0 20px rgb(0 0 0 / 10%);

    border-bottom: 2px solid #fff;

}

.jobslist li .jobint:hover {	

	    box-shadow: 0 5px 30px rgb(0 0 0 / 10%);

    border-color: #5e2dfa;

}

.jobslist li .col-md-7, .jobslist li .col-md-9 {

	padding-left: 0;

}

.jobslist li h4{margin-bottom:5px;}

.jobslist li h4 a {

	font-size: 18px;

	color: #000;

	font-weight: 700;

}

.jobslist li h4 a:hover {

	color: #33af91;

}

.jobslist li .company {

	color: #999;

	padding: 7px 0

}

.jobslist li .company a {

	color: #33af91;

}

.jobslist li .jobloc {

	color: #000;

}

.jobslist li .jobloc span {

	color: #999;

}

.jobslist li .applybtn {

	background: #fff;

	display: inline-block;

	color: #33af91;

	font-weight: 600;

	padding: 9px 15px;

	margin-top: 20px;

	border: 1px solid #33af91;

}

.jobslist li .applybtn:hover {

	background: #33af91;

	color:#fff;

	text-decoration: none;

}

.viewallbtn {

	text-align: center;

	margin-top: 40px;

}

.viewallbtn a {

	display: inline-block;

	background: #33af91;

	color: #fff;

	font-size: 18px;

	font-weight: 600;

	padding: 15px 30px;

}

.viewallbtn a:hover {

	background: #333;

	text-decoration: none;

}



.partTime{background:#f8a60c; color:#fff; font-size:13px; display:inline-block; padding:4px 6px;}

.fulltime{background:#6ACA00; color:#fff; font-size:13px; display:inline-block; padding:4px 6px;}

.freelance{background:#ff0000; color:#fff; font-size:13px; display:inline-block; padding:4px 6px;}





/************************************************

           == Video css==

*************************************************/

.videowraper {

	background: url(../images/videobg.jpg) no-repeat top;

	background-size: cover;

	background-attachment: fixed;

	text-align: center;

}

.videowraper .subtitle, .videowraper h3 {

	color: #fff;

}

.videowraper p {

	color: #fff;

	max-width: 800px;

	margin: 0 auto;

	font-size: 18px;

	line-height: 24px;

}

.videowraper a {

	display: inline-block;

	opacity: .5;

	margin-top: 20px;

	font-size: 100px;

	color: #fff;

}

.videowraper a:hover {

	opacity: 1;

}





/************************************************

           == Testimonials css==

*************************************************/

.testimonialsList {

	list-style: none;

}

.testimonialsList li {

	text-align: center;

	max-width: 770px;

	margin: 10px auto;

}

.testimonialsList li .testimg {

	width: 80px;

	height: 80px;

	border-radius: 50%;

	overflow: hidden;

	margin: auto

}

.testimonialsList li .clientname {

	font-size: 24px;

	font-weight: 700;

	padding: 15px 0;

	color: #000;

	font-family: 'Montserrat', sans-serif;

}

.testimonialsList li p {

	font-style: italic;

	line-height: 22px;

}

.testimonialsList li .clientinfo {

	font-family: 'Montserrat', sans-serif;

	font-weight: 600;

	color: #00a8ff;

	margin-top: 10px;

}



/************************************************

           == App Box css==

*************************************************/

.appwraper {

	padding-top: 50px;

}

.appimg {

	text-align: center;

}

.appimg img {

	display: block;

}

.appwraper .titleTop {

	text-align: left;

	margin-bottom: 10px;

    margin-top: 40px;

}



.appwraper .titleTop h3 {

	color: #000;

	margin-top: 5px;

}

.appwraper .subtitle2 {

	font-size: 24px;

	font-weight: 600;

	margin-bottom: 30px;

	color: #000;

}

.appwraper p {

	color: #000;

	line-height: 24px;

}

.appwraper .appbtn {

	margin-top: 45px;

	margin-bottom: 30px;

	display: flex;

	flex-wrap: wrap;

	gap: 12px;

}

.appwraper .appbtn a {

	display: block;

	flex: 1 1 calc(50% - 6px);

	min-width: 0;

	max-width: 220px;

}

.appwraper .appbtn a img {

	display: block;

	width: 100%;

	height: 60px;

}



/*Page Title*/

.pageTitle {

	background: url(../images/page-title-bg.jpg) no-repeat;

	background-size: cover;

	padding: 70px 0;

}

.pageTitle h1 {

	font-size: 40px;

	font-weight: 500;

	color: #fff;

}

.breadCrumb {

	text-align: right;

	color: #fff;

	margin-top: 20px;

}

.breadCrumb a {

	color: #fff;

	display: inline-block;

	padding: 0 5px;

}

.breadCrumb span {

	color: #33af91;

	display: inline-block;

	padding-left: 5px;

}



/************************************************

           == Search List css==

*************************************************/

.listpgWraper {

	padding: 50px 0;

	min-height: 400px;

}

.pageSearch {

	margin-bottom: 30px;

}

.pageSearch a.btn {

	background: #33af91;

	color: #fff;

	padding: 13px 15px;

	font-size: 16px;

	text-transform: uppercase;

	font-weight: 600;

	border-radius: 0;

	display: block;

}

.pageSearch a.btn i {

	font-weight: 400;

	font-size: 24px;

	margin-right: 5px;

}

.pageSearch a.btn:hover {

	background: #666;

}

.searchform .row {

	margin: 0 -5px;

}

.searchform .col-md-3, .searchform .col-md-2, .searchform .col-sm-3, .searchform .col-sm-2 {

	padding: 0 5px;

}

.searchform .form-control {

	border-radius: 0;

	height: auto;

	padding: 13px 12px;

	font-size: 16px;

}

.searchform select.form-control{

	padding: 13px 12px;

	background:#fff;

	line-height:45px;

}

.searchform .btn {

	border-radius: 0;

	background: #33af91;

	font-size: 24px;

	color: #fff;

	padding: 7px 18px;

}

.searchform .btn:hover {

	background: #444;

}



/************************************************

           == Sidebar css==

*************************************************/

.sidebar {

	background: #fff;

	border: 1px solid #e4e4e4;

	padding: 20px;

	margin-bottom: 30px;

}

.sidebar .widget {

	margin-bottom: 20px;

	border-bottom: 1px solid #eee;

	padding-bottom: 20px;

}

.sidebar .widget-title {

	font-size: 18px;

	font-weight: 600;

	color: #666;

	margin-bottom: 20px;

}

.optionlist {

	list-style: none;

}

.optionlist li {

	margin-bottom: 10px;

	padding: 5px 0;

	position: relative;

	padding-left: 30px;

}

.optionlist li span {

	position: absolute;

	right: 0;

	top: 6px;

}

.optionlist li input[type=checkbox] {

	display: none;

}

.optionlist li input[type=checkbox] + label {

	width: 20px;

	height: 20px;

	border: 1px solid #e0e0e0;

	background: #f5f5f5;

	cursor: pointer;

	position: absolute;

	left: 0;

	top: 0;

}

.optionlist li input[type=checkbox]:checked + label:before {

	content: '\f00c';

	font-family: 'FontAwesome';

	color: #4ece00;

	padding-left: 2px;

	position: relative;

	top: 2px;

}

.sidebar a {

	color: #33af91;

	display: inline-block;

	margin-top: 10px;

}

.searchnt .btn {

	background: #33af91;

	display: block;

	border-radius: 0;

	width: 100%;

	color: #fff;

	text-transform: uppercase;

	font-weight: 700;

	padding: 10px 15px;

}

.sidebar .gad {

	margin-top: 15px;

	text-align:center;

}

.social a {

	color: #00a8ff;

	font-size: 32px;

	display: inline-block;

	margin-right: 5px;

	margin-top: 0;

}

.social a:hover {

	color: #000;

}

/*Listing*/

.searchList {

	list-style: none;

}

.searchList li {

	background: #fff;

	border: 1px solid #e4e4e4;

	padding: 20px;

	margin-bottom: 30px;

}

.searchList li:hover {

	box-shadow: 0 0 10px rgba(0,0,0,0.1);

	border: 1px solid #33af91;

}

.searchList li .jobimg {

	float: left;

	width: 70px;

	margin-right: 15px;

}

.searchList li h3 a {

	font-size: 18px;

	font-weight: 600;

	color: #00a8ff;

}

.searchList li .companyName {

	margin: 10px 0;

	color: #969595;

}

.searchList li .companyName a {

	color: #969595;

}

.searchList li a:hover {

	color: #333;

}

.searchList li .location {

	color: #000;

}

.searchList li .location span {

	color: #333;

}

.searchList li .listbtn {

	margin-top: 20px;

}

.searchList li .listbtn a {

	background: #fff;

	display: block;

	border-radius: 0;

	width: 100%;

	color: #33af91;

	text-transform: uppercase;

	font-weight: 700;

	padding: 10px 15px;

	text-align: center;

	border:1px solid #33af91;

}

.searchList li .listbtn a:hover {

	background: #33af91;

	color:#fff;

	text-decoration: none;

}

.searchList li p {

	line-height: 22px;

	color: #333;

	margin: 10px 0 0 0;

}

.searchList li .cateinfo {

	color: #33af91;

	margin: 10px 0;

}

.searchList li .minsalary {

	font-size: 22px;

	font-weight: 700;

	text-align: center;

	margin-top: 25px;

	color: #a8d815;

}

.searchList li .minsalary span {

	color: #999;

	font-weight: 400;

}

/*Pagination*/

.pagiWrap .showreslt {

	font-weight: 600;

	margin-top: 10px;

}

.pagiWrap .pagination {

	text-align: right;

	margin: 0;

}

.pagination>li:first-child>a, .pagination>li:first-child>span, .pagination>li:last-child>a, .pagination>li:last-child>span {

	border-radius: 0;

}



/************************************************

           == Job Detail css==

*************************************************/

.job-header {

	background: #fff;

	border: 1px solid #e4e4e4;

	margin-bottom: 30px;

}

.job-header .jobinfo {

	padding: 25px;

	border-bottom: 1px solid #e4e4e4;

}

.job-header .jobinfo h2 {

	font-size: 24px;

	color: #444;

}

.job-header .jobinfo .ptext {

	color: #999;

	margin: 12px 0;

}

.job-header .jobinfo .salary {

	font-size: 16px;

	font-weight: 700;

	color: #888;

}

.job-header .jobinfo .salary strong {

	color: #000;

}

.job-header .jobinfo .companyinfo {

	text-align: right;

}

.job-header .jobinfo .companyinfo .companylogo {

	float: right;

	width: 75px;

	background: #fff;

	margin-left: 20px;

	border: 5px solid #eee;

}

.job-header .jobinfo .companyinfo .companylogo img{display:block;}

.job-header .jobinfo .companyinfo .title a {

	font-size: 18px;

	font-weight: 600;

	color: #33af91;

}

.job-header .jobinfo .companyinfo .opening a {

	color: #333;

}





/***************************

		Searh Tabs

***************************/

.tabswrap{border-bottom:3px solid #5e2dfa;}

.tabswrap .nav-tabs{border-bottom: none; float: right;}

.tabswrap .nav-tabs>li{margin-bottom:0;}

.tabswrap .nav-tabs>li>button{background:none; border-radius:0; font-size:16px; font-weight:400; color:#666; padding:15px 30px; border: none;}



.tabswrap .nav-tabs>li>button.active, .tabswrap .nav-tabs>li>button.active:focus{background:#5e2dfa; color:#fff; border-color:#5e2dfa; border-radius: 5px 5px 0 0; font-weight:700;}

.tabswrap .nav-tabs>li.last{float:right;}

.tabswrap .nav-tabs>li.last button{background:none; font-size:14px; padding:0; margin:0; border:none; margin-top:7px;}

.tabswrap .nav-tabs>li.last button:hover{border:none; color:#5e2dfa;}

.srchbx {

	border: 1px solid #eee;

	margin-bottom: 30px;

	box-shadow: 0 0 30px rgba(0,0,0,0.1);

}



.srchbx .srchint {

	padding: 30px;

	background: #fff;

}

.catelist li a {

	display: block;

	margin: 10px 0;

	position: relative;

	padding-left: 15px;

	color: #000;

	font-weight: 600;

	text-decoration: none;

}

.catelist li a:hover {

	color: #5e2dfa;

}

.catelist li a:before {

	position: absolute;

	left: 0;

	content: '\f0da';

	font-family: 'FontAwesome';

	font-weight: 400;

}

.catelist li span {

	color: #6aca00;

}

/*Candidate Info*/

.job-header .jobinfo .candidateinfo .userPic {

	float: left;

	width: 100px;

	height: 100px;

	background: #cbcbcb;

	margin-right: 20px;

	border: 5px solid #33af91;

}

.job-header .jobinfo .candidateinfo .title {

	font-size: 24px;

	color: #333;

	font-weight: 600

}

.job-header .jobinfo .candidateinfo .desi {

	font-size: 18px;

	color: #666;

	margin-top: 10px;

}

.job-header .jobinfo .candidateinfo .loctext {

	line-height: 24px;

	color: #555;

	margin-top: 8px;

}

.job-header .jobinfo .candidateinfo .loctext i {

	width: 20px;

	color: #33af91;

}

.cadsocial {

	margin-top: 10px;

}

.cadsocial a {

	color: #666;

	font-size: 24px;

	display: inline-block;

	margin-right: 7px;

}

.cadsocial a:hover {

	color: #33af91;

}

.relatedJobs {

	margin-bottom: 30px;

}

.relatedJobs h3 {

	font-size: 24px;

	font-weight: 700;

	color: #555;

	margin-bottom: 15px;

}

/*Buttons*/

.jobButtons {

	padding: 20px 25px;

}

.jobButtons a {

	background: #f0f0f0;

	margin-right: 10px;

	color: #333;

	font-weight: 600;

	font-size: 16px;

}

.jobButtons a.report {

	background: #e01010;

	color: #fff;

}

.jobButtons a.apply {

	background: #a8d815;

	color: #fff

}

.jobButtons a:hover {

	background: #222;

	color: #fff;

}

.job-header .contentbox {

	padding: 35px;

}

.job-header .contentbox h3 {

	font-size: 24px;

	font-weight: 700;

	color: #33af91;

	margin-bottom: 10px;

}

.job-header .contentbox p {

	line-height: 24px;

	color: #555;

	margin-bottom: 20px;

}

.job-header .contentbox ul {

	margin-bottom: 30px;

}

.job-header .contentbox ul li {

	padding: 10px 0 10px 25px;

	position: relative;

	line-height: 24px;

}

.job-header .contentbox ul li:before {

	content: '\f00c';

	font-family: 'FontAwesome';

	color: #a8d815;

	position: absolute;

	left: 0;

}

/*Job Info*/

.jobdetail {

	padding: 20px;

}

.jobdetail iframe {

	width: 100%;

	height: 250px;

	border: none

}

.jobdetail h3 {

	font-size: 18px;

	color: #33af91;

	font-weight: 700;

}

.jbdetail {

	margin-top: 20px;

}

.jbdetail li {

	margin-bottom: 20px;

	color: #908f8f;

}

.jbdetail li a {

	display: block;

	text-align: right;

	color: #33af91;

	font-weight: 600;

}

.jbdetail li span {

	display: block;

	text-align: right;

	color: #000;

	font-weight: 600;

}

.jbdetail li span.permanent {

	color: #a8d815;

}

.jbdetail li span.contract {

	color: #33af91;

}

.jbdetail li span.freelance {

	color: #F07200;

	background:none;

	padding:0;

}

/*Skills*/

.skillswrap {

	margin-top: 20px;

}

.skillswrap h5 {

	color: #7b7b7b;

	font-weight: 400;

	margin-bottom: 5px;

}

/*Education*/

.educationList {

	margin-bottom: 0 !important;

}

.educationList li {

	border-bottom: 1px solid #ddd;

	padding-bottom: 30px !important;

	padding-top: 0 !important;

	padding-left: 0 !important;

	margin-top: 30px;

}

.educationList li:hover {

	border-bottom-color: #33af91;

}

.educationList li:before {

	display: none;

}

.educationList li:last-child {

	border-bottom: 0;

}

.educationList li .date {

	width: 90px;

	height: 90px;

	background: #888;

	border-radius: 50%;

	text-align: center;

	font-weight: 700;

	padding-top: 17px;

	line-height: 18px;

	float: left;

	color: #fff;

	margin-right: 20px;

}

.educationList li h4 {

	font-size: 18px;

	font-weight: 700;

	color: #58c0ff;

	margin-bottom: 5px;

}

.educationList li p {

	margin-bottom: 0 !important;

}

/*Experience*/

.experienceList {

	margin-bottom: 0 !important;

}

.experienceList li {

	border-bottom: 1px solid #ddd;

	padding-bottom: 30px !important;

	padding-left: 0 !important;

	padding-top: 0 !important;

	margin-top: 30px;

}

.experienceList li:hover {

	border-bottom-color: #33af91;

}

.experienceList li:before {

	display: none;

}

.experienceList li:last-child {

	border-bottom: 0;

}

.experienceList li h4 {

	font-size: 18px;

	font-weight: 700;

	color: #58c0ff;

	margin-bottom: 10px;

}

.experienceList li p {

	margin-bottom: 0 !important;

	margin-top: 10px;

}

/*Portfolio*/

.userPortfolio li {

	padding: 0 15px !important;

	margin-top: 30px;

}

.userPortfolio li:before {

	display: none;

}

.userPortfolio li .imgbox {

	overflow: hidden;

	position: relative

}

.userPortfolio li .itemHover {

	width: 100%;

	height: 100%;

	position: absolute;

	top: 0;

	left: 0;

	right: 0;

	bottom: 0;

	background: rgba(22,34,46,.9);

	transform: scale(0);

	transition: all .5s ease;

	-moz-transition: all .5s ease;

	-webkit-transition: all .5s ease;

	-ms-transition: all .5s ease;

	-o-transition: all .5s ease

}

.userPortfolio li:hover .itemHover {

	transform: scale(1)

}

.userPortfolio li .zoombox {

	display: table;

	width: 100%;

	height: 20%;

	text-align: right

}

.userPortfolio li .item-zoom {

	display: inline-block;

	border: 2px solid #fff;

	padding: 6px 12px;

	margin: 15px 15px 0 0;

	color: #fff

}

.userPortfolio li .item-zoom:hover {

	background: #2079f2

}

.userPortfolio li .infoItem {

	display: table;

	width: 100%;

	height: 70%;

	text-align: center

}

.userPortfolio li .itemtitle {

	vertical-align: bottom;

	padding: 0 15px 15px;

	position: relative;

	display: table-cell;

}

.userPortfolio li .itemtitle h5 {

	color: #fff;

	font-size: 18px;

	margin: 0 0 5px

}

.userPortfolio li .itemtitle p {

	color: #ccc;

	line-height: 18px

}

.userPortfolio li .itemtitle a {

	color: #2079f2

}

.userPortfolio li.shown, .no-cssanimations .userPortfolio li, .no-js .grid li {

	opacity: 1

}

.userPortfolio li a, .userPortfolio li img {

	outline: 0;

	border: none;

	display: block;

	max-width: 100%

}



/************************************************

           == Cms Pages css==

*************************************************/

.inner-page {

	padding: 50px 0;

}

.inner-page .title {

	text-align: center;

	margin-bottom: 40px;

}

.inner-page .title > span {

	color: #292929;

	font-size: 17px;

	margin-bottom: 10px;

}

.inner-page .title h2 {

	color: #292929;

	font-size: 40px;

	font-weight: 800;

	letter-spacing: 1px;

	margin: 0;

}

.inner-page .title > p {

	line-height: 24px;

}

.contact {

	border: 1px solid #ddd;

	padding: 15px;

	margin-bottom: 30px;

}

.contact > span {

	color: #33af91;

	float: left;

	font-size: 50px;

	line-height: 30px;

	margin-right: 10px;

	text-align: center;

	width: 70px;

}

.inner-page .fa-home:before {

	content: "\f015";

}

.information {

	overflow: hidden;

	padding-right: 20px;

	margin-top: 5px;

}

.information > strong {

	color: #000;

	display: table;

	font-size: 16px;

	font-weight: 700;

	margin-bottom: 5px;

	text-transform: uppercase;

}

.information > p {

	line-height: 22px;

	margin: 0;

}

.contact-form input, .contact-form textarea {

	color: #8c8c8c;

	float: left;

	border: 1px solid #ddd;

	font-size: 12px;

	line-height: 32px;

	margin-bottom: 15px;

	padding: 10px 20px;

	width: 100%;

}

.contact-form {

	text-align: right;

}

.contact-form button {

	background-color: #33af91;

	border: 0 none;

	color: #fff;

	display: inline-block;

	font-size: 16px;

	text-transform: uppercase;

	font-weight: 600;

	padding: 18px 40px;

	margin-top: 20px;

}



/************************************************

           == FAQs css==

*************************************************/

.faqs {

	margin-bottom: 30px;

}

.faqs .panel-default>.panel-heading {

	background: none;

	border: none;

	padding: 0;

}

.faqs h4 a {

	padding: 15px 55px 15px 15px;

	display: block;

	background: #33af91;

	color: #fff;

	font-size: 16px;

	position: relative;

}

.panel-group .panel {

	border-radius: 0;

	margin-bottom: 20px;

}

.panel-group .panel-body {

	line-height: 24px;

	color: #555;

}

.faqs h4 .collapsed:hover, .faqs h4 a:hover, .faqs h4 a:active {

	text-decoration: none;

	background: #33af91;

	color: #fff;

}

.faqs h4 a:before {

	content: "\f068";

	background: #fff;

	font-family: 'FontAwesome';

	width: 30px;

	padding: 6px 0;

	color: #33af91;

	position: absolute;

	right: 15px;

	top: 8px;

	font-size: 16px;

	display: inline-block;

	text-align: center;

	transition: 0.3s ease-in;

	-moz-transition: 0.3s ease-in;

	-webkit-transition: 0.3s ease-in;

	-ms-transition: 0.3s ease-in;

}

.faqs h4 .collapsed:before {

	content: "\f067";

	font-family: 'FontAwesome';

	background: #666;

	width: 30px;

	padding: 6px 0;

	color: #fff;

	position: absolute;

	right: 15px;

	top: 8px;

	font-size: 16px;

	display: inline-block;

	text-align: center;

	transition: 0.3s ease-in;

	-moz-transition: 0.3s ease-in;

	-webkit-transition: 0.3s ease-in;

	-ms-transition: 0.3s ease-in;

	text-decoration: none;

}

.faqs h4 a.collapsed {

	background: #fff;

	color: #666;

	text-decoration:none;

}

/*Form Panel*/

.formpanel {

	margin-top: 20px;

}

.formpanel .formrow {

	margin-bottom: 15px;

}

.formpanel .form-control {

	height: auto;

	border-radius: 0;

	padding: 10px 13px;

	border-color: #ddd;

}

.formpanel select.form-control {

	padding: 13px 12px;

	border-radius:0;

	line-height:45px;

}

.formpanel textarea.form-control {

	height: 150px;

}

.formpanel .btn {

	width: 100%;

	background: #33af91;

	color: #fff;

	border-radius: 0;

	padding: 10px;

	font-size: 16px;

	font-weight: 700;

	text-transform: uppercase;

}

.formpanel .btn:hover {

	background: #222;

}

.featchoose li {

	margin-bottom: 10px;

}

/*Google Map*/

.gmap {

	margin-top: 20px;

}

.gmap iframe {

	height: 250px;

	width: 100%;

	border: none;

}

.googlemap iframe {

	height: 400px;

	width: 100%;

	border: none;

}



/************************************************

           == User Account css==

*************************************************/

.userccount {

	background: #fff;

	border: 1px solid #ddd;

	padding: 25px 30px;

}

.userccount p {

	text-align: center;

	line-height: 24px;

	color: #999;

}

.userccount h5 {

	font-size: 20px;

	color: #555;

	font-weight: 700;

	margin-bottom: 15px;

}

.socialLogin {

	margin-bottom: 20px;

	text-align: center;

	border-bottom: 1px solid #eee;

	padding-bottom: 20px;

}

.socialLogin a {

	display: inline-block;

	width: 36px;

	height: 36px;

	color: #fff;

	font-size: 18px;

	margin: 0 5px;

	line-height: 36px;

}

.socialLogin a.fb {

	background: #3b5998;

}

.socialLogin a.gp {

	background: #dd4b39;

}

.socialLogin a.tw {

	background: #00aced;

}

.newuser {

	margin-top: 30px;

	text-align: center;

	color: #666;

	font-size:18px;

}

.newuser a {

	font-weight: 600;

}

.userbtns .nav-tabs {

	border-bottom: none;

	margin-bottom: 30px;

}

.userbtns .nav-tabs>li {

	width: 50%;

	margin-bottom: 0;

}

.userbtns .nav-tabs>li a {

	border: none;

	background: #eee;

	border-radius: 0;

	text-align: center;

	font-size: 18px;

	font-weight: 600;

	color: #222;

}

.userbtns .nav-tabs>li a:hover, .userbtns .nav-tabs>li.active a {

	background: #33af91;

	border: none;

	color: #fff;

}

.userbtns .nav-tabs>li.active a:after {

	width: 0;

	height: 0;

	border-left: 10px solid transparent;

	border-right: 10px solid transparent;

	border-top: 10px solid #33af91;

	content: '';

	position: absolute;

	bottom: -10px;

	left: 50%;

	margin-left: -5px;

}



/***************************

		404 Page

***************************/

.error-page-wrap {

	padding: 50px 0;

}

.error-page-wrap .errormain {

	text-align: center;

}

.error-page-wrap .errormain h2 {

	font-size: 72px;

	color: #999;

	font-weight: 900;

}

.error-page-wrap .errormain h3 {

	font-size: 24px;

	color: #888;

	font-weight: 900;

	display: inline-block;

}

.error-msg {

	margin-top: 10px;

}

.error-msg p {

	max-width: 500px;

	margin: auto;

	line-height: 24px;

	font-size: 16px;

	color: #666;

}

.error-msg .btn {

	background: #33af91;

	color: #fff;

	margin-top: 30px;

	border-radius: 10px;

	padding: 10px 25px;

	font-size: 18px;

	font-weight: 600;

}

.latest-jobs .latest-job-card {

	background: #ffffff;

	border-radius: 24px;

	padding: 28px;

	box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08);

	border: 1px solid rgba(148, 163, 184, 0.12);

	display: flex;

	flex-direction: column;

	gap: 18px;

	height: 100%;

	transition: transform 0.25s ease, box-shadow 0.25s ease;

}

.latest-jobs .latest-job-card:hover {

	transform: translateY(-6px);

	box-shadow: 0 30px 60px rgba(15, 23, 42, 0.12);

}

.latest-job-header {

	display: flex;

	align-items: center;

	justify-content: space-between;

}

.badge-status {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	padding: 6px 14px;

	border-radius: 999px;

	font-size: 0.85rem;

	font-weight: 600;

}

.badge-status.fulltime {

	background: rgba(34, 197, 94, 0.15);

	color: #15803d;

}

.badge-status.freelance {

	background: rgba(124, 58, 237, 0.15);

	color: #6d28d9;

}

.badge-status.parttime {

	background: rgba(14, 165, 233, 0.15);

	color: #0e7490;

}

.badge-status.remote {

	background: rgba(37, 99, 235, 0.15);

	color: #1d4ed8;

}

.badge-status.hybrid {

	background: rgba(249, 115, 22, 0.15);

	color: #c2410c;

}

.badge-status.internship {

	background: rgba(16, 185, 129, 0.15);

	color: #047857;

}

.bookmark {

	color: #94a3b8;

	font-size: 18px;

}

.bookmark:hover {

	color: #0f364e;

}

.latest-jobs h4 {

	margin: 0;

	font-size: 1.25rem;

	font-weight: 700;

	color: #0f172a;

}

.latest-jobs h4 a {

	color: inherit;

	text-decoration: none;

}

.latest-jobs h4 a:hover {

	color: #0f364e;

}

.latest-job-meta {

	display: flex;

	flex-direction: column;

	gap: 6px;

	color: #475569;

	font-size: 0.95rem;

}

.latest-job-meta span i {

	color: #0f364e;

	margin-right: 6px;

}

.latest-job-footer {

	display: flex;

	align-items: center;

	justify-content: space-between;

	gap: 16px;

	padding-top: 12px;

	border-top: 1px solid rgba(148, 163, 184, 0.2);

}

.latest-job-company {

	display: flex;

	align-items: center;

	gap: 12px;

}

.latest-job-company img {

	width: 52px;

	height: 52px;

	object-fit: contain;

	border-radius: 12px;

	background: #f1f5f9;

	padding: 6px;

	box-shadow: 0 10px 25px rgba(15, 23, 42, 0.1);

}

.latest-job-company .label {

	display: block;

	font-size: 0.8rem;

	color: #94a3b8;

}

.latest-job-company .value {

	display: block;

	font-size: 0.95rem;

	font-weight: 600;

	color: #0f172a;

}

.latest-job-footer .btn {

	border-radius: 999px;

	padding: 8px 18px;

	font-weight: 600;

}

.latest-job-footer .btn:hover {

	color: #ffffff;

}



@media (max-width: 575px) {

	.latest-job-meta {

		gap: 4px;

	}

	.latest-job-footer {

		flex-direction: column;

		align-items: flex-start;

	}

	.latest-job-footer .btn {

		width: 100%;

		text-align: center;

	}

}



/***************************

	About Us

****************************/

.about-wraper {

	padding: 100px 0;

}

.about-wraper h2 {

	font-size: 36px;

	color: #33af91;

	font-weight: 700;

	margin-bottom: 15px;

}

.about-wraper p {

	line-height: 24px;

	font-size: 16px;

}

.what_we_do {

	padding: 50px 0;

	background: #f8f8f8;

	margin-top: 100px;

}

.what_we_do .main-heading {

	color: #33af91;

	text-align: center;

	line-height: 48px;

	font-size: 36px;

	font-weight: 700;

}

.whatText {

	font-size: 24px;

	text-align: center;

	color: #444;

	line-height: 42px;

}

.whatList {

	list-style: none;

	margin-top: 50px;

}

.whatList li {

	text-align: center;

}

.whatList li .iconWrap {

	display: inline-block;

	border: 4px solid #ddd;

	border-radius: 100%;

	padding: 10px;

}

.whatList li .icon {

	font-size: 103px;

	color: #fff;

	background: #33af91;

	width: 180px;

	height: 180px;

	text-align: center;

	line-height: 180px;

	border-radius: 100%;
	    padding-top: 20%;

}

.whatList li h3 {

	font-size: 30px;

	color: #333;

	padding-top: 30px;

	margin-bottom: 15px;

	font-weight: 600;

}

.whatList li p {

}

.textrow {

	padding-top: 100px;

}

ul.orderlist {

	list-style: none;

	margin-top: 30px;

}

ul.orderlist li {

	float: left;

	width: 48%;

	margin-bottom: 12px;

	color: #333;

	font-size: 16px;

}

ul.orderlist li:before {

	content: '\f00c';

	font-family: 'FontAwesome';

	display: inline-block;

	margin-right: 10px;

	vertical-align: middle;

	color: #82B440;

}





/**************************

	Pay Packages

**************************/







/*************************

	Three colum Packages

*************************/

.four-plan {

	background: #eee;

	padding: 100px 0px;

}

.four-plan h3 {

	padding: 0px;

	font-size: 48px;

	font-weight: 600;

	text-align: center;

	margin-bottom: 30px;

}

.four-plan .boxes {

	list-style: none;

	border-radius: 5px;

	background: #fff;

	padding: 10px 20px;

	text-align: center;

	margin-top: 30px;

}

.four-plan .boxes:hover {

	box-shadow: 0 0 15px rgba(0,0,0,0.1);

}

.four-plan .boxes li {

	display: block;

}

.four-plan .icon {

	font-size: 52px;

	color: #565656;

	padding: 30px 0

}

.four-plan .plan-name {

	font-size: 26px;

	font-weight: 600;

}

.four-plan .plan-date {

	display: block;

	font-size: 16px;

	margin-bottom: 15px;

}

.plan-pages {

	font-size: 16px;

	line-height: 43px;

	font-weight: bold;

	color: #868686

}

.plan-pages1 {

	display: block;

	font-size: 16px;

	line-height: 43px;

	font-weight: bold;

	color: #e2e2e2

}

.order {

	font-size: 16px;

	padding: 20px 0px;

	font-weight: bold;

	text-transform: uppercase;

	margin-top: 8px;

}

.order a {

	background: #000;

	border-radius: 5px;

	padding: 12px 32px;

	color: #fff;

	text-decoration: none;

	display: inline-block;

}

.order a:hover {

	background: #33af91;

}

.main-plan {

	margin-bottom: 15px;

}

.main-plan .plan-price1-1 {

	font-size: 52px;

	float: left;

	color: #565656;

	margin-left: 30px;

	padding-top: 22px;

	font-weight: 300;

}

.main-plan .plan-price1-2 {

	font-size: 78px;

	font-weight: bold;

	float: left;

	color: #222;

}

.main-plan .plan-price1-3 {

	font-size: 18px;

	float: left;

	line-height: 20px;

	margin-right: 30px;

	color: #cdcdcd;

	font-weight: 300;

	padding-top: 32px;

}

.main-plan .plan-price1-4 {

	display: block;

}

/*************************

	Three colum Packages

*************************/

.three-plan {

	padding: 100px 0;

}

.three-plan h3 {

	padding: 0px;

	font-size: 48px;

	font-weight: 600;

	text-align: center;

	margin-bottom: 30px;

}

.three-plan ul {

	list-style: none;

	background: #fff;

}

.three-plan li {

	padding: 0px;

}

.three-plan .boxes {

	background: #fff;

	margin-top: 30px;

}

.pricing-table1 {

	background: #ffc600;

	text-align: center;

	color: #fff;

	font-size: 26px;

	padding: 10px 0px;

	font-weight: 600;

}

.pricing-table1 strong {

	display: block;

	font-size: 16px;

	font-weight: 400;

}

.pricing-detail {

	list-style: none;

}

.pricing-detail li {

	display: block;

	text-align: center;

}

.pricing-unit1 {

	font-size: 57px;

	float: left;

	color: #ffc600;

	margin-left: 20px;

	padding-top: 80px;

	font-weight: 300;

}

.pricing-unit1-1 {

	font-size: 132px;

	font-weight: bold;

	color: #ffc600;

	float: left;

}

.pricing-unit1-2 {

	font-size: 18px;

	line-height: 20px !important;

	color: #cdcdcd;

	float: left;

	font-weight: 300;

	padding-top: 100px;

}

.pricing-unit1-3 {

	display: block;

}

.pricing-unit2 {

	font-size: 57px;

	float: left;

	color: #00aeff;

	margin-left: 20px;

	padding-top: 80px;

	font-weight: 300;

}

.pricing-unit2-1 {

	font-size: 132px;

	font-weight: bold;

	color: #00aeff;

	float: left;

}

.pricing-unit2-2 {

	font-size: 18px;

	line-height: 20px !important;

	color: #cdcdcd;

	font-weight: 300;

	padding-top: 100px;

}

.pricing-unit2-3 {

	display: block;

}

.pricing-unit3 {

	font-size: 57px;

	float: left;

	color: #56d700;

	margin-left: 20px;

	padding-top: 80px;

	font-weight: 300;

}

.pricing-unit3-1 {

	font-size: 132px;

	font-weight: bold;

	color: #56d700;

	float: left;

}

.pricing-unit3-2 {

	font-size: 18px;

	line-height: 20px !important;

	color: #cdcdcd;

	font-weight: 300;

	padding-top: 100px;

}

.pricing-unit3-3 {

	display: block;

}

.three-plan .plan-name-dt {

	font-size: 36px;

	font-weight: bold;

	color: #5c5c5c;

	padding: 0px 82px;

	padding-top: 75px;

	line-height: 44px;

	padding-bottom: 39px;

}

.three-plan .plan-good i {

	font-size: 18px;

	color: #a8a8a8;

	margin-right: 12px;

}

.three-plan .plan-pages {

	font-size: 16px;

	line-height: 43px;

	padding-left: 70px;

	font-weight: 300;

	color: #a8a8a8;

	border-top: 1px solid #f5f5f5;

	padding-top: 3px;

}

.three-plan .plan-detail {

	font-size: 16px;

	line-height: 43px;

	text-align: center;

	font-weight: bold;

	color: #868686;

	border-top: 1px solid #f5f5f5;

	padding-top: 3px;

}

.three-plan .plan-detail1 {

	font-size: 16px;

	line-height: 43px;

	text-align: center;

	font-weight: bold;

	color: #868686;

	border-top: 1px solid #f5f5f5;

	padding-top: 3px;

}

.three-plan .plan-detail1 i {

	color: green !important;

}

.three-plan .plan-detail i {

	color: red !important;

}

.pricing-table1-2 {

	background: #000;

	text-align: center;

	color: #fff;

	font-size: 26px;

	padding: 10px 0px;

	font-weight: 600;

}

.pricing-table1-2 strong {

	display: block;

	font-size: 16px;

	font-weight: normal;

}

.pricing-table1-3 {

	background: #56d700;

	text-align: center;

	color: #fff;

	font-size: 26px;

	padding: 10px 0px;

	font-weight: 600;

}

.pricing-table1-3 strong {

	display: block;

	font-size: 16px;

	font-weight: normal;

}

.three-plan .plan-pages i {

	font-size: 18px;

	color: #a8a8a8;

	margin-right: 12px;

}

.three-plan .plan-pages1 {

	display: block;

	font-size: 16px;

	line-height: 43px;

	font-weight: bold;

	color: #e2e2e2

}

.three-plan .order-1 {

	background: #ffc600;

	font-size: 16px;

	padding: 25px 0px;

	font-weight: bold;

	text-transform: uppercase;

}

.three-plan .order-1 a {

	background: #000;

	border-radius: 5px;

	padding: 12px 32px;

	color: #fff;

	text-decoration: none;

	display: inline-block;

}

.three-plan .order-2 {

	background: #000;

	font-size: 16px;

	padding: 25px 0px;

	font-weight: bold;

	text-transform: uppercase;

}

.three-plan .order-2 a {

	background: #00aeff;

	border-radius: 5px;

	padding: 12px 32px;

	color: #fff;

	text-decoration: none;

	display: inline-block;

}

.three-plan .order-3 {

	background: #56d700;

	font-size: 16px;

	padding: 25px 0px;

	font-weight: bold;

	text-transform: uppercase;

}

.three-plan .order-3 a {

	background: #000;

	border-radius: 5px;

	padding: 12px 32px;

	color: #fff;

	text-decoration: none;

	display: inline-block;

}

/* =======================

		Blog Listing

======================= */

.blogWraper {

	margin-bottom: 40px;

}

.blogList {

	list-style: none;

}

.blogList li {

	background: #fff;

	padding: 20px;

	margin-bottom: 30px;

	border: 1px solid #e4e4e4;

}

.blogList li:hover {

	box-shadow: 0 0 10px rgba(0,0,0,0.1);

	border-color: #33af91;

}

.postimg {

	position: relative;

	display: inline-block;

}

.postimg:before {

	border: 1px solid #fff;

	top: 10px;

	right: 10px;

	bottom: 10px;

	left: 10px;

	content: '';

	position: absolute;

	z-index: 10;

	transition: 0.3s ease-in-out;

	-webkit-transition: 0.3s ease-in-out;

	-ms-transition: 0.3s ease-in-out;

	-moz-transition: 0.3s ease-in-out;

}

.blogList li:hover .postimg:before {

	background: rgba(255,255,255,0.4);

}

.postimg .date {

	width: 60px;

	height: 60px;

	font-weight: bold;

	font-size: 15px;

	color: #fff;

	padding: 7px 10px 0 10px;

	text-align: center;

	line-height: 20px;

	background: #33af91;

	letter-spacing: 0.4px;

	outline: 3px solid #33af91;

	border: 1px solid #fff;

	position: absolute;

	left: 14px;

	top: 14px;

	z-index: 12;

}

.post-header {

	margin-bottom: 20px;

}

.post-header h4 a {

	font-size: 24px;

	color: #33af91;

	font-weight: 600;

}

.post-header h4 a:hover {

	color: #333;

}

.postmeta {

	margin: 15px 0 20px 0; line-height:24px;

}

.postmeta span, .postmeta a {

	color: #33af91;

}

.blogList p, .blogGrid li p {

	line-height: 24px;

	color: #333;

}

.blogList .readmore, .blogGrid .readmore {

	border-bottom: 1px dotted #00b1f1;

	display: inline-block;

	margin-top: 15px;

	color: #000;

	font-weight: 600;

	padding-bottom: 5px;

}

.blogList .readmore:hover, .blogGrid .readmore:hover {

	text-decoration: none;

	color: #00b1f1;

}

/* =======================

		Blog Grid

======================= */

.blogGrid {

	list-style: none;

}

.blogGrid li {

	margin-bottom: 30px;

}

.blogGrid li .int {

	background: #fff;

	padding: 20px;

	border: 1px solid #e4e4e4;

}

.blogGrid li .int:hover {

	box-shadow: 0 0 10px rgba(0,0,0,0.1);

	border-color: #33af91;

}

.blogGrid li .post-header {

	margin-top: 10px;

}

/* =======================

		Blog Detail

======================= */

.blogdetailbox {

	background: #fff;

	padding: 20px;

	margin-bottom: 30px;

	border: 1px solid #e4e4e4;

}

blockquote {

	display: block;

	font-size: 16px;

	line-height: 24px;

	margin: 20px 0;

	padding: 20px 20px 20px 60px;

	position: relative;

	border: 3px solid #00b1f1;

	box-shadow: 0 0 12px rgba(0,0,0,0.2);

}

blockquote p {

	font-style: italic;

	display: inline-block;

	color: #000;

}

blockquote:before {

	color: #ddd;

	content: "\f10d";

	font-family: 'FontAwesome';

	font-size: 22px;

	font-style: normal;

	left: 24px;

	position: absolute;

	top: 20px;

	transform: scale(-1);

}

blockquote:after {

	color: #ddd;

	content: "\f10e";

	display: inline-block;

	font-family: 'FontAwesome';

	font-size: 22px;

	font-style: normal;

	margin: 0 0 0 8px;

	position: absolute;

	bottom: 25px;

    right: 25px;

}

.comments h4 {

	color: #222222;

	font-size: 24px;

	font-weight: 600;

}

.comments .media-body h4 span {

	font-size: 12px;

	color: #777777;

	margin-left: 20px;

	display: inline-block;

	width: 100%;

}

.comments {

	margin-top: 30px;

}

.comments .media-list {

	margin-bottom: 30px;

}

.comments .media-list li {

	padding: 20px;

	border: 1px solid #e9e9e9;

	position: relative;

	background: #fff;

}

.comments .media-left {

	margin-right: 20px;

}

.comments .media-left a {

	width: 100px;

	display: inline-block;

}

.comments .media p {

	margin-top: 5px;

	color: #333;

	line-height: 20px;

}

.comments .media h6 span {

	font-size: 13px;

	color: #999;

	margin: 0;

	margin-top: 10px;

	text-transform: none;

	display: inline-block;

	width: 100%;

}

.comments .media {

	margin-top: 30px;

}

.comments .media h6 {

	font-weight: 600;

	color: #00b1f1;

	font-size: 16px;

	text-transform: none;

}

.comments .btn.raply {

	padding: 10px 12px;

	font-size: 12px;

	color: #333;

	background: #f5f5f5;

	border: none;

	border-radius: 0;

	position: absolute;

	top: 15px;

	right: 0;

}

.comments .btn.raply:hover {

	background: #00b1f1;

	color: #fff;

}

.comments .media a img {

	margin-bottom: 10px;

}

.commnetsfrm {

	background: #fff;

	padding: 25px;

}

.comments form label {

	text-transform: uppercase;

	font-weight: normal;

	margin-top: 20px;

	display: inline-block;

	width: 100%;

	font-size: 12px;

}

.comments form .form-control {

	display: inline-block;

	width: 100%;

	height: 40px;

	margin-top: 5px;

	border-radius: 0px;

	box-shadow: none;

	background: none;

	border: 1px solid #e8e8e8;

}

.comments form textarea.form-control {

	display: inline-block;

	width: 100%;

	height: 150px;

}

.commnetsfrm .btn {

	background: #00b1f1;

	color: #fff;

	font-weight: 700;

	margin-top: 20px;

	border-radius: 0;

	font-size: 18px;

	padding: 8px 18px;

}

/************************************************

           ==Blog sidebar css==

*************************************************/

.search {

	position: relative;

	margin-bottom: 15px;

}

.search .form-control {

	border-radius: 0;

	height: auto;

	padding: 10px 12px;

	border-color: #ddd;

}

.search .btn {

	position: absolute;

	right: 0;

	top: 0;

	border-radius: 0;

	background: none;

	font-size: 20px;

}

/*categories*/

.categories li {

	margin-bottom: 15px;

	position: relative;

	padding-left: 20px;

}

.categories li a {

	margin-top: 0;

	color: #888;

	font-weight: 600;

}

.categories li:before {

	content: "\f0da ";

	font-family: 'FontAwesome';

	position: absolute;

	left: 0px;

	color: #00b1f1;

	font-size: 12px;

}

.categories li a:hover{color:#00b1f1;}

/*Archives*/

.archive li {

	line-height: 45px;

}

.archive li a {

	margin-top: 0;

	color: #888;

	font-weight: 600;

}

.archive li span {

	float: left;

	height: 30px;

	width: 30px;

	text-align: center;

	background: #f5f5f5;

	border: 1px solid #fff;

	outline: 3px solid #f5f5f5;

	margin-right: 20px;

	line-height: 26px;

	font-size: 12px;

	color: #777777;

	margin-top: 10px;

	-webkit-transition: all 0.4s ease-in-out;

	-moz-transition: all 0.4s ease-in-out;

	-o-transition: all 0.4s ease-in-out;

	-ms-transition: all 0.4s ease-in-out;

	transition: all 0.4s ease-in-out;

}

.archive li a:hover span {

	background: #33af91;

	color: #fff;

}

/*Popular Posts*/

.papu-post {

}

.papu-post .media-left {

	margin-right: 0px;

}

.papu-post .media-left img {

	width: 100%;

}

.papu-post .media-left a {

	width: 80px;

	margin-top: 0;

	margin-right: 5px;

	display: inline-block;

}

.papu-post span {

	color: #333;

	letter-spacing: 0px;

	font-size: 11px;

}

.papu-post li {

	border-bottom: 1px solid #ececec;

	padding: 20px 0;

	margin: 0px;

}

.papu-post .media-heading {

	display: inline-block;

	width: 100%;

	color: #00b1f1;

	margin-top: 0px;

	line-height: 20px;

}

.papu-post li:last-child {

	border-bottom: 0;

}

/*Tags*/

.tags:after {

	display: table;

	clear: both;

	content: '';

}

.tags li {

	display: inline-block;

	float: left;

}

.tags a {

	color: #969595;

	border: 1px solid #dadada;

	padding: 7px 10px;

	display: inline-block;

	margin-right: 5px;

	margin-bottom: 5px;

	text-transform: uppercase;

}

.tags a:hover {

	border: 1px solid #33af91;

	background: #33af91;

	color: #fff;

	text-decoration: none;

}

/*Photo Streen*/

.photo-steam {

	margin: 0 -5px;

}

.photo-steam:after {

	display: table;

	clear: both;

	content: '';

}

.photo-steam li {

	float: left;

	width: 25%;

	padding: 0 5px;

	margin-bottom: 10px;

}





/************************************************

           == Dashboard Page css==

*************************************************/

.usernavdash {

	margin-bottom: 30px;

}

.usernavdash li a {

	border: 1px solid #eee;

	border-bottom: none;

	padding: 10px 15px;

	color: #444;

	display: block;

	background: #fff

}

.usernavdash li:last-child a {

	border-bottom: 1px solid #eee;

}

.usernavdash li a:hover {

	background: #33af91;

	color: #fff;

	text-decoration: none;

}

.usernavdash li i {

	margin-right: 2px;

	font-size: 18px;

	width: 25px;

	color:#999;

}

.usernavdash li.active a {

	background: #33af91;

	color: #fff;

}

.usernavdash li.active a i, .usernavdash li a:hover i{color:#fff;}

.profilestat li .inbox {

	border: 1px solid #eee;

	text-align: center;

	background: #fff;

	padding: 15px 10px;

	margin-bottom: 30px;

}

.profilestat li i {

	font-size: 36px;

	color: #999;

	margin-bottom: 15px;

	display: block;

}

.profilestat li h6 {

	font-size: 30px;

	font-weight: 600;

	color: #33af91;

	margin-bottom: 10px;

}

.profilestat li h6 span {

	font-size: 18px;

	color: #999;

}

.profilestat li strong {

	display: block;

	font-size: 13px;

	color: #333;

}

.instoretxt {

	text-align: center;

	font-size: 18px;

	font-weight: 600;

	background: #fff;

	text-align: center;

	padding:30px 20px;

	margin-bottom: 30px;

}

.instoretxt .credit {

	font-size: 24px;

	margin-bottom: 20px;

}

.instoretxt .currency {

	font-size: 16px;

	font-weight: 700;

}

.instoretxt .currency strong {

	color: #33af91;

}

.instoretxt strong {

	font-weight: 700;

	color: #33af91;

}

.instoretxt a {

	font-size: 18px;

	display: inline-block;

	padding: 9px 20px;

	background: #33af91;

	color: #fff;

	margin: 0 5px;

}

.instoretxt a:hover {

	background: #333;

	text-decoration: none;

}

.instoretxt a.history {

	background: #444;

}

.myads h3 {

	font-size: 24px;

	margin: 0 0 10px 0;

}



/* The switch - the box around the slider */



.switchbox{margin-bottom:20px;}

.switchbox .txtlbl{float:left; font-size:16px; font-weight:700; margin-top:5px;}

.switchbox .txtlbl i{font-size:14px; font-weight:400; color:#666}



.switchbox strong{font-size:12px; display:block; margin-top:10px;}



.switch {

  position: relative;

  display: inline-block;

  vertical-align: top;

  width: 56px;

  height: 20px;

  padding: 3px;

  background-color: white;

  border-radius: 18px;

  box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);

  cursor: pointer;

  background-image: -webkit-linear-gradient(top, #eeeeee, white 25px);

  background-image: -moz-linear-gradient(top, #eeeeee, white 25px);

  background-image: -o-linear-gradient(top, #eeeeee, white 25px);

  background-image: linear-gradient(to bottom, #eeeeee, white 25px);

}



.switch-input {

  position: absolute;

  top: 0;

  left: 0;

  opacity: 0;

}



.switch-label {

  position: relative;

  display: block;

  height: inherit;

  font-size: 10px !important;

  text-transform: uppercase;

  background: #eceeef;

  border-radius: inherit;

  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);

  -webkit-transition: 0.15s ease-out;

  -moz-transition: 0.15s ease-out;

  -o-transition: 0.15s ease-out;

  transition: 0.15s ease-out;

  -webkit-transition-property: opacity background;

  -moz-transition-property: opacity background;

  -o-transition-property: opacity background;

  transition-property: opacity background;

}

.switch-label:before, .switch-label:after {

  position: absolute;

  top: 50%;

  margin-top: -.5em;

  line-height: 1;

  -webkit-transition: inherit;

  -moz-transition: inherit;

  -o-transition: inherit;

  transition: inherit;

}

.switch-label:before {

  content: attr(data-off);

  right: 10px;

  color: #aaa;

  text-shadow: 0 1px rgba(255, 255, 255, 0.5);

}

.switch-label:after {

  content: attr(data-on);

  left: 10px;

  color: white;

  text-shadow: 0 1px rgba(0, 0, 0, 0.2);

  opacity: 0;

}

.switch-input:checked ~ .switch-label {

  background: #47a8d8;

  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);

}

.switch-input:checked ~ .switch-label:before {

  opacity: 0;

}

.switch-input:checked ~ .switch-label:after {

  opacity: 1;

}



.switch-handle {

  position: absolute;

  top: 4px;

  left: 4px;

  width: 18px;

  height: 18px;

  background: white;

  border-radius: 10px;

  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);

  background-image: -webkit-linear-gradient(top, white 40%, #f0f0f0);

  background-image: -moz-linear-gradient(top, white 40%, #f0f0f0);

  background-image: -o-linear-gradient(top, white 40%, #f0f0f0);

  background-image: linear-gradient(to bottom, white 40%, #f0f0f0);

  -webkit-transition: left 0.15s ease-out;

  -moz-transition: left 0.15s ease-out;

  -o-transition: left 0.15s ease-out;

  transition: left 0.15s ease-out;

}

.switch-handle:before {

  content: '';

  position: absolute;

  top: 50%;

  left: 50%;

  margin: -6px 0 0 -6px;

  width: 12px;

  height: 12px;

  background: #f9f9f9;

  border-radius: 6px;

  box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);

  background-image: -webkit-linear-gradient(top, #eeeeee, white);

  background-image: -moz-linear-gradient(top, #eeeeee, white);

  background-image: -o-linear-gradient(top, #eeeeee, white);

  background-image: linear-gradient(to bottom, #eeeeee, white);

}

.switch-input:checked ~ .switch-handle {

  left: 33px;

  box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);

}



.switch-green > .switch-input:checked ~ .switch-label {

  background: #4fb845;

}







/************************************************

           ==Subscribe css==

*************************************************/



.subscribe {

	padding: 50px 0;

	background-color: #009eff;

	text-align: center;

}

.subscribe h6 {

	font-size: 30px;

	color: #fff;

}

.subscribe p {

	color: #fff;

	max-width: 670px;

	margin: 0 auto;

}

.subscribe .input-group {

	margin-top: 25px;

}

.subscribe .input-group .form-control {

	height: auto;

	padding: 10px 13px;

	font-size: 16px;

	border: none;

}

.subscribe .input-group .btn {

	background: #333;

	padding: 10px 20px;

	color: #fff;

	border-color: #333;

	text-transform: uppercase;

	font-weight: 600

}







/************************************************

           ==Footer css==

*************************************************/

.footerWrap {

	background: #272727;

	padding: 50px 0;

}

.footerWrap h5 {

	font-size: 18px;

	font-weight: bold;

	color: #fff;

	margin-bottom: 15px;

}

.footerWrap p {

	line-height: 22px;

	color: #ccc;

}

.footerWrap .ft-logo {

	margin-bottom: 15px;

}

.social {

	margin-top: 20px;

}

.social a {

	color: #fff;

	font-size: 32px;

	display: inline-block;

	margin-right: 5px;

}

.social a:hover {

	color: #36b3e5;

}

.sidebar .social a {

	color: #444;

}

/*Articles*/

.posts-list {

	list-style: none;

	padding: 0;

	margin: 0;

}

.posts-list li {

	border: none;

	margin: 15px 0;

}

.posts-list .media-left {

	margin-right: 30px;

	width: 80px;

	float: left;

	padding-right: 0;

}

.posts-list .entry-title {

	font-weight: 400;

	text-transform: inherit;

	margin: 0 0 5px;

}

.post .entry-title a {

	color: #fff;

	font-size: 16px;

}

.posts-list .entry-meta {

	padding: 0;

}

.posts-list .entry-date {

	color: #ccc;

	font-style: italic;

	text-transform: capitalize;

}

.footerWrap .quicklinks {

	list-style: none;

}

.footerWrap .quicklinks li {

}

.footerWrap .quicklinks li a {

	display: block;

	color: #ccc;

	padding: 8px 0;

	font-size: 14px;

}

.footerWrap .quicklinks li a:before {

	content: '\f0da';

	font-family: 'FontAwesome';

	margin-right: 7px;

}

.footerWrap .quicklinks li a:hover {

	color: #33af91;

	text-decoration: none;

}

.copyright {

	padding: 10px 0;

	text-align: center;

	color: #777;

}

.copyright ul li{display:inline;}

.copyright ul li a {

	color: #555;

	padding: 0 5px;

	display: inline-block;

	margin: 5px;

}

.copyright a:hover {

	color: #000;

}

.bttxt {

	color: #888;line-height:24px;

}

/*copyright*/

.copyright {

	padding: 20px 0;

}





/*******************

	Large Screen

*******************/

@media screen and (max-width: 1199px) {

.main-plan .plan-price2 {

	margin-left: 0px;

	font-size: 44px;

}

.main-plan .plan-price2-1 {

	font-size: 70px;

}

.main-plan .plan-price2-2 {

	margin-right: 0px;

}

.main-plan .plan-price {

	margin-left: 0px;

	font-size: 44px;

}

.main-plan .plan-price-1 {

	font-size: 70px;

}

.main-plan .plan-price-2 {

	margin-right: 0px;

}

.main-plan .plan-price1-1 {

	margin-left: 0px;

	font-size: 44px;

}

.main-plan .plan-price1-2 {

	font-size: 70px;

}

.main-plan .plan-price1-3 {

	margin-right: 0px;

}

.pricing-unit1 {

	margin-left: 5px;

}

.pricing-unit2 {

	margin-left: 5px;

}

.pricing-unit3 {

	margin-left: 5px;

}

}



/*******************

	Monitor Screen

*******************/

 @media screen and (max-width: 1024px) {

.usernav li a {

	padding: 19px 14px

}

.jobslist li .applybtn {

	margin-top: 15px;

}

.pageSearch a.btn {

	margin-bottom: 15px

}

}



/*******************

	Tablet Screen

*******************/

@media screen and (max-width: 990px) {

body {

	font-size: 16px;

}

.navbar-default {float:none;}

.three-plan li {

	padding: 0 15px;

	margin-top: 15px;

}

.three-plan ul {

	background: none;

}

.main-plan {

	max-width: 150px;

	margin: 0 auto;

}

.main-unit {

	max-width: 240px;

	height: 200px;

	margin: 0 auto;

}

/*Search*/

.searchwrap {

	padding: 40px 0;

}

.searchbar {

	padding:20px 5px 5px 5px;

}

.searchbar .form-control {

	margin-bottom: 15px;

}

.searchbar .btn {

	width: 100%;

}

ul.orderlist li {

	float: none;

	width: auto;

}

.optionlist li {

	font-size: 14px;

}

.searchList li p {

	font-size: 16px;

}

.sidebar a {

	font-size: 16px;

}

.sidebar .social a {

	font-size: 30px;

}

.pageTitle h1, .breadCrumb {

	text-align: center;

}

/*job detail*/

.job-header .jobinfo .companyinfo {

	text-align: left;

	margin-top: 30px;

	border-top: 1px solid #eee;

	padding-top: 30px;

}



.whatList li{margin-bottom:30px;}

.about-wraper h2{margin-top:20px;}

.postimg{margin-top:15px;}

.about-wraper, .textrow{padding:50px 0;}



.appwraper .appbtn{margin-top:30px;}

.appwraper .titleTop h3{font-size:36px;}

.appwraper .subtitle2{font-size:24px;}

/*Footer*/

.footerWrap h5 {

	margin-top: 25px;

	font-size:24px;

}

.searchbar div{padding:0 15px;}

.searchbar div.row{padding:0;}



}

/*******************

Large Mobile Screen

*******************/

@media screen and (max-width: 768px) {

.topsearchwrap h5{margin-top:30px;}

.navbar-nav>li{padding:0 10px;}

.searchbar div{padding:0 15px;}

.pagiWrap{margin-bottom:30px;}

.jobButtons a{font-size:15px; margin-right:0px; padding:6px 10px;}

.post-header h4{margin-top:10px;}

}





@media screen and (max-width: 767px) {

.header .logo {

	text-align: center;

	float:left;

}

.navbar-header{float:right;}

.navbar-toggle{background:#ccc;}

.navbar-toggle .icon-bar{background:#fff;}

.navbar-nav li.postjob, .navbar-nav li.jobseeker{margin-bottom:10px;}

.dropdown-menu {

	position: static;

	float: none;

	width: 100%;

}

.heroslider3:after{display: none;}

.usernav li a {

	padding: 12px 15px;

}

.titleTop h3 {

	font-size: 26px;

}

.catelist {

	margin-bottom: 30px;

}

.jobslist li {

	text-align: center;

}

.jobslist li h4 {

	margin-top: 5px;

}

.jobslist li .col-md-7, .jobslist li .col-md-9 {

	padding-left: 15px;

}

.main-plan .plan-price2 {

	margin-left: 0px;

	font-size: 44px;

}

.pagiWrap .showreslt {

	margin-bottom: 10px;

}

.searchform .form-control {

	margin-bottom: 15px;

}

.job-header .jobinfo {

	padding: 15px;

}

.job-header .contentbox {

	padding: 20px;

}



.employerList li{width:25%;}



/*sidebar*/

.sidebar {

	margin-top: 30px;

}

.text-right {

	text-align: left;

}

/*Photo Streem*/

.photo-steam li {

	width: 50%;

}



.appwraper .appbtn a{margin-right:0; margin-bottom:15px;}

.searchbar div{padding:0 15px;}

.searchbar{padding-bottom:20px;}

.pull-right{float:none !important;}

.navbar-collapse{padding:0 15px;}



.comments .media-list li.margin-left80{margin-left:0;}



}

/*******************

	Mobiles Screen

*******************/

@media screen and (max-width: 560px) {

.jobButtons a {

	display: block;

	margin-right: 0;

	margin-top: 10px;

}

.searchwrap h3 {

	font-size: 24px;

}

.usernav li a {

	padding: 10px 10px;

	text-transform: none;

}

.error-page-wrap .errormain h2 {

	font-size: 150px;

	line-height: 160px;

}

.error-page-wrap .errormain h3 {

	font-size: 28px;

}

.searchList li {

	text-align: center;

}

.searchList li .jobimg {

	float: none;

	margin: 0 auto;

	margin-bottom: 10px;

}

.job-header .jobinfo .companyinfo, .job-header .jobinfo .candidateinfo, .educationList li {

	text-align: center;

}

.job-header .jobinfo .companyinfo .companylogo, .job-header .jobinfo .candidateinfo .userPic, .educationList li .date {

	float: none;

	margin: 0 auto;

	margin-bottom: 10px;

}

.job-header .jobinfo .candidateinfo .userPic {

	height: auto;

}



.employerList li{width:50%;}

.copyright ul li a{background:#ddd; color:#000; padding:8px 15px; margin:5px; display:block;}

.copyright ul li a:hover{background:#333; color:#fff; text-decoration:none;}



.appwraper .titleTop h3{font-size:36px;}

.appwraper{padding-top:50px;}







}

 @media screen and (max-width: 400px) {

.header .col-md-5 {

	padding-right: 15px

}

.usernav li {

	width: 50%;

	text-align: center;

}

}



/* Cities gallery */

.cities-section {

	background: #f8fafc;

	padding-top: 80px;

	padding-bottom: 80px;

}

.cities-grid .city-card {

	display: block;

	position: relative;

	overflow: hidden;

	border-radius: 24px;

	box-shadow: 0 25px 45px rgba(15, 23, 42, 0.18);

}

.city-image img {

	width: 100%;

	height: 320px;

	object-fit: cover;

	transition: transform 0.4s ease;

}

.city-card:hover .city-image img {

	transform: scale(1.05);

}

.city-overlay {

	position: absolute;

	inset: 0;

	background: linear-gradient(0deg, rgba(15, 23, 42, 0.55) 0%, rgba(15, 23, 42, 0.05) 60%);

	display: flex;

	align-items: flex-end;

	justify-content: space-between;

	flex-direction: column;

	text-align: center;

	padding: 20px 18px;

}

.city-overlay span {

	font-size: 1.4rem;

	font-weight: 700;

	color: #ffffff;

	text-transform: uppercase;

}

.city-badge {

	font-size: 0.95rem;

	font-weight: 600;

	background: rgba(255, 255, 255, 0.14);

	color: #ffffff;

	border-radius: 999px;

	padding: 8px 16px;

	display: inline-flex;

	align-items: center;

	gap: 8px;

	justify-content: center;

}

.city-badge i {

	color: #33af91;

}



@media (max-width: 767px) {

	.city-image img {

		height: 260px;

}

}



/* Testimonials */

.testimonials-section {

	background: linear-gradient(120deg, rgba(237, 242, 255, 0.65) 0%, rgba(219, 245, 255, 0.65) 100%);

	padding-top: 90px;

	padding-bottom: 90px;

}

.testimonials-wrap {

	position: relative;

	margin-top: 40px;

	padding: 0 48px;

}

.testimonials-carousel .testimonial-card {

	background: #ffffff;

	border-radius: 24px;

	padding: 34px 28px;

	border: 1px solid rgba(148, 163, 184, 0.12);

	display: flex;

	flex-direction: column;

	gap: 18px;

	min-height: 280px;

}

.testimonial-quote i {

	font-size: 28px;

	color: #0f364e;

}

.testimonials-carousel p {

	font-size: 0.98rem;

	line-height: 1.7;

	color: #334155;

	margin-bottom: 0;

}

.testimonial-author {

	display: flex;

	align-items: center;

	gap: 14px;

	margin-top: auto;

}

.testimonial-author img {

	width: 56px;

	height: 56px;

	object-fit: cover;

	border-radius: 50%;

	box-shadow: 0 10px 25px rgba(15, 23, 42, 0.18);

}

.testimonial-author .name {

	display: block;

	font-weight: 700;

	color: #111827;

}

.testimonial-author .role {

	display: block;

	font-size: 0.85rem;

	color: #64748b;

}

.testimonials-nav {

	position: absolute;

	top: 50%;

	transform: translateY(-50%);

	width: 48px;

	height: 48px;

	border-radius: 50%;

	background: #ffffff;

	box-shadow: 0 18px 45px rgba(15, 23, 42, 0.15);

	color: #0f364e;

	display: flex;

	align-items: center;

	justify-content: center;

	cursor: pointer;

	z-index: 2;

}

.testimonials-prev {

	left: 0;

}

.testimonials-next {

	right: 0;

}



@media (max-width: 991px) {

	.testimonials-wrap {

		padding: 0;

	}

	.testimonials-nav {

		display: none;

	}

}



/************************************************

           ==Footer Modern==

*************************************************/

.footer-modern {

    background: #071f2f;

    color:rgba(255,255,255,0.5);

    font-size: 0.95rem;

}

.footer-modern .footer-main {

    padding: 70px 0 50px;

    border-bottom: 1px solid rgba(148, 163, 184, 0.12);

}

.footer-modern .footer-title {

    font-size: 1.1rem;

    font-weight: 700;

    margin-bottom: 20px;

    color: #ffffff;

}

.footer-modern .footer-links,

.footer-modern .footer-contact {

    list-style: none;

    margin: 0;

    padding: 0;

    display: grid;

    gap: 10px;

}

.footer-modern .footer-links a {

    color: rgba(255,255,255,0.5);

    text-decoration: none;

    transition: color 0.2s ease;

}

.footer-modern .footer-links a:hover {

    color: #0ea5e9;

}

.footer-modern .footer-contact li {

    display: flex;

    gap: 10px;

    align-items: flex-start;

}

.footer-modern .footer-contact i {

    color: #0ea5e9;

    margin-top: 4px;

}

.footer-modern .footer-contact a {

    color: inherit;

    text-decoration: none;

}

.footer-modern .footer-contact a:hover {

    color: #0ea5e9;

}

.footer-modern .footer-social {

    margin-top: 18px;

    display: flex;

    gap: 10px;

}

.footer-modern .footer-social a {

    width: 36px;

    height: 36px;

    border-radius: 50%;

    background: rgba(96, 165, 250, 0.12);

    display: inline-flex;

    align-items: center;

    justify-content: center;

    color: #0ea5e9;

    transition: background 0.2s ease, color 0.2s ease;

}

.footer-modern .footer-social a:hover {

    background: #0ea5e9;

    color: #0f172a;

}

.footer-modern .footer-bottom {

    padding: 20px 0;

    background: #fff;

}

.footer-bottom-content {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    flex-wrap: wrap;

}

.footer-copy {

    color: #94a3b8;

}

.footer-payments img {

    max-height: 18px;

    width: auto;

    display: block;

}



@media (max-width: 575px) {

    .footer-modern .footer-main {

        padding: 60px 0 40px;

    }

    .footer-modern .footer-title {

        margin-bottom: 16px;

    }

}



/************************************************

           ==Subscribe Section==

*************************************************/

.subscribe-section {

    background: linear-gradient(135deg, rgba(225, 239, 254, 0.85) 0%, rgba(220, 252, 231, 0.85) 100%);

    padding-top: 40px;

    padding-bottom: 40px;

}

.subscribe-wrapper {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}

.subscribe-copy h3 {

    font-size: 2rem;

    font-weight: 700;

    color: #0f172a;

    margin-bottom: 12px;

}

.subscribe-copy p {

    margin-bottom: 0;

    color: #475569;

    font-size: 1rem;

}

.subscribe-badge {

    display: inline-block;

    padding: 6px 16px;

    border-radius: 999px;

    background: rgba(37, 99, 235, 0.12);

    color: #0f364e;

    font-weight: 600;

    letter-spacing: 0.04em;

    text-transform: uppercase;

    font-size: 0.75rem;

    margin-bottom: 14px;

}

.subscribe-form {

    flex: 1 1 340px;

}

.subscribe-form .input-group {

    display: flex;

    border-radius: 999px;

    overflow: hidden;

    background: #f1f5f9;

    border: 1px solid rgba(148, 163, 184, 0.3);

}

.subscribe-form .input-group-text {

    border: none;

    background: transparent;

    color: #0f364e;

    font-size: 1.1rem;

    padding: 0 16px;

    display: flex;

    align-items: center;

}

.subscribe-form .form-control {

    border: none;

    background: #fff;

    padding: 14px;

    font-size: 1rem;

}

.subscribe-form .form-control:focus {

    box-shadow: none;

}

.subscribe-form .btn {

    border-radius: 0;

    padding: 0 26px;

    font-weight: 600;

}

.subscribe-note {

    display: block;

    margin-top: 10px;

    color: #94a3b8;

    font-size: 0.85rem;

}



@media (max-width: 767px) {

    .subscribe-wrapper {

        padding: 32px;

    }

    .subscribe-copy h3 {

        font-size: 1.7rem;

    }

}



/************************************************

           ==Jobs Listing Hero==

*************************************************/

.jobs-hero {

    background: linear-gradient(120deg, rgba(226, 242, 255, 0.85) 0%, rgba(221, 252, 231, 0.85) 100%);

    padding: 90px 0 80px;

}

.jobs-hero-wrapper {

    max-width: 960px;

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    gap: 20px;

    align-items: flex-start;

}

.jobs-hero-title {

    font-size: 2.6rem;

    font-weight: 700;

    color: #0f172a;

    margin: 0;

}

.jobs-hero-copy {

    margin: 0;

    color: #475569;

    max-width: 620px;

}

.jobs-hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 6px 18px;

    border-radius: 999px;

    background: rgba(37, 99, 235, 0.14);

    color: #0f364e;

    font-weight: 600;

    letter-spacing: 0.05em;

    text-transform: uppercase;

    font-size: 0.75rem;

}

.jobs-hero-form {

    width: 100%;

}

.jobs-hero-field {

    display: flex;

    align-items: center;

    border: 1px solid rgba(148, 163, 184, 0.35);

    border-radius: 16px;

    padding: 10px 15px;

    background: rgba(255, 255, 255, 0.9);

    transition: border-color 0.2s ease, background 0.2s ease;

}

.jobs-hero-field i {

    color: #0f364e;

}

.jobs-hero-field .form-control,

.jobs-hero-field .form-select {

    border: none;

    background: transparent;

    box-shadow: none;

    font-size: 0.95rem;

	appearance: auto;

}

.jobs-hero-field:focus-within {

    border-color: rgba(37, 99, 235, 0.7);

    background: #ffffff;

}

.jobs-hero-submit {

    border-radius: 16px;

    height: 100%;

    min-height: 54px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 1rem;

}



@media (max-width: 991px) {

    .jobs-hero-title {

        font-size: 2.2rem;

    }

}



@media (max-width: 767px) {

    .jobs-hero {

        padding: 70px 0 60px;

    }

    .jobs-hero-field {

        border-radius: 14px;

        padding: 12px 16px;

    }

    .jobs-hero-submit {

        min-height: 52px;

    }

}



/************************************************

           ==Jobs Board Layout==

*************************************************/

.jobs-board {

    padding: 70px 0;

}

.talent-hero .jobs-hero-wrapper {

    max-width: 880px;

}

.filter-card {

    background: #ffffff;

    border-radius: 18px;

    padding: 24px 24px 28px;

    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08);

    border: 1px solid rgba(148, 163, 184, 0.15);

    margin-bottom: 24px;

}

.filter-card.spotlight {

    border-color: rgba(37, 99, 235, 0.25);

    box-shadow: 0 30px 55px rgba(15, 23, 42, 0.12);

}

.filter-field {

    display: flex;

    align-items: center;

    gap: 10px;

    border: 1px solid rgba(148, 163, 184, 0.35);

    border-radius: 14px;

    padding: 10px 14px;

    background: #f8fafc;

    margin-bottom: 12px;

}

.filter-field i {

    color: #0f364e;

}

.filter-field .form-control {

    border: none;

    background: transparent;

    padding: 0;

    box-shadow: none;

    font-size: 0.95rem;

}

.filter-field .form-control:focus {

    box-shadow: none;

}

.filter-switch label {

    font-weight: 600;

    color: #0f172a;

}

.filter-card h5 {

    font-size: 1.05rem;

    font-weight: 700;

    color: #0f172a;

    margin-bottom: 16px;

}

.filter-list {

    list-style: none;

    margin: 0;

    padding: 0;

    display: grid;

    gap: 16px;

}

.filter-list label {

    display: flex;

    align-items: center;

    gap:6px;

    color: #475569;

    font-size: 0.95rem;

}

.filter-list input {

    margin-right: 6px;

}

.filter-list span {

    background: rgba(37, 99, 235, 0.12);

    color: #0f364e;

    border-radius: 999px;

    padding: 2px 10px;

    font-size: 0.8rem;

	margin-left: auto;

}

.jobs-board-header{margin-bottom: 30px;}



.jobs-board-header h2 {

    font-size: 1.6rem;

    font-weight: 700;

    margin-bottom: 6px;

}

.jobs-count {

    color: #64748b;

}

.jobs-sort .form-select {

    min-width: 180px;

	padding: 12px;

}



.job-grid .job-board-card {

    background: #ffffff;

    border-radius: 24px;

    padding: 24px;

    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);

    border: 1px solid rgba(148, 163, 184, 0.16);

    display: flex;

    flex-direction: column;

    gap: 16px;

    position: relative;

    height: 100%;

    transition: transform 0.25s ease, box-shadow 0.25s ease;

}

.job-board-card:hover {

    transform: translateY(-6px);

    box-shadow: 0 28px 60px rgba(15, 23, 42, 0.12);

}

.job-board-card.featured::after {

    content: "\f0e7";

    font-family: 'FontAwesome';

    position: absolute;

    top: 18px;

    right: 18px;

    width: 34px;

    height: 34px;

    border-radius: 50%;

    background: #ef4444;

    color: #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 14px;

}

.job-list-content h4 a, .job-grid .job-board-card h4 a{color: #333; font-weight: 600;}

.job-card-status .job-type {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    font-size: 0.85rem;

    font-weight: 600;

    color: #475569;

}

.job-type.fulltime {

    color: #15803d;

}

.job-type.contract {

    color: #b91c1c;

}

.job-salary {

    color: #0f172a;

    font-weight: 600;

}

.job-location {

    color: #0f364e;

    font-weight: 600;

}

.job-location i {

    margin-right: 6px;

}

.candidate-card {

    background: #ffffff;

    border-radius: 24px;

    padding: 24px;

    box-shadow: 0 22px 48px rgba(15, 23, 42, 0.08);

    border: 1px solid rgba(148, 163, 184, 0.18);

    display: flex;

    flex-direction: column;

    gap: 16px;

    height: 100%;

}

.candidate-card-header {

    display: flex;

    align-items: center;

    gap: 16px;

}

.candidate-avatar {

    width: 68px;

    height: 68px;

    border-radius: 20px;

    overflow: hidden;

    flex-shrink: 0;

}

.candidate-avatar img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.candidate-badge {

    display: inline-flex;

    align-items: center;

    padding: 4px 12px;

    border-radius: 999px;

    font-size: 0.75rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    margin-bottom: 4px;

}

.candidate-badge.available {

    background: rgba(16, 185, 129, 0.18);

    color: #047857;

}

.candidate-badge.interviewing {

    background: rgba(251, 191, 36, 0.25);

    color: #b45309;

}

.candidate-card h4 {

    margin: 0;

    font-size: 1.15rem;

    color: #0f172a;

}

.candidate-card-header p {

    margin: 0;

    color: #475569;

}

.candidate-save {

    margin-left: auto;

    border: none;

    background: #f1f5f9;

    width: 42px;

    height: 42px;

    border-radius: 50%;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    color: #475569;

}

.candidate-save:hover {

    background: #0f364e;

    color: #fff;

}

.candidate-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    color: #475569;

    font-size: 0.92rem;

}

.candidate-meta i {

    margin-right: 6px;

    color: #94a3b8;

}

.candidate-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

}

.candidate-tags span {

    padding: 6px 12px;

    border-radius: 999px;

    background: rgba(37, 99, 235, 0.12);

    color: #1d4ed8;

    font-size: 0.82rem;

    font-weight: 500;

}

.candidate-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    flex-wrap: wrap;

}

.candidate-rate span {

    display: block;

    font-size: 0.75rem;

    color: #94a3b8;

    text-transform: uppercase;

    letter-spacing: 0.08em;

}

.candidate-rate strong {

    font-size: 1.05rem;

    color: #0f172a;

}

.candidate-actions {

    display: flex;

    gap: 10px;

}

.candidate-actions .btn-link {

    padding: 0;

    text-decoration: none;

}

.candidate-list {

    display: flex;

    flex-direction: column;

    gap: 18px;

}

.candidate-list-item {

    background: #ffffff;

    border-radius: 26px;

    padding: 24px;

    border: 1px solid rgba(148, 163, 184, 0.18);

    box-shadow: 0 22px 48px rgba(15, 23, 42, 0.08);

    display: flex;

    gap: 20px;

    align-items: stretch;

}

.candidate-list-avatar {

    width: 78px;

    height: 78px;

    border-radius: 22px;

    overflow: hidden;

    flex-shrink: 0;

}

.candidate-list-avatar img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.candidate-list-main {

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 12px;

}

.candidate-list-top {

    display: flex;

    justify-content: space-between;

    gap: 12px;

}

.candidate-list-top h4 {

    margin: 0;

    font-size: 1.18rem;

}

.candidate-list-top p {

    margin: 4px 0 0;

    color: #475569;

    font-size: 0.95rem;

}

.candidate-summary {

    margin: 0;

    color: #475569;

}

.candidate-list-meta {

    width: 220px;

    flex-shrink: 0;

    display: flex;

    flex-direction: column;

    gap: 10px;

}

.candidate-list-meta .btn {

    border-radius: 12px;

}

.job-card-footer {

    margin-top: auto;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    gap: 16px;

    padding-top: 12px;

    border-top: 1px solid rgba(148, 163, 184, 0.2);

}

.job-card-footer .job-card-logo{margin-left: auto;}

.job-card-company {

    display: flex;

    align-items: center;

    gap: 12px;

}

.job-card-company img {

    width: 54px;

    height: 54px;

    border-radius: 14px;

    background: #f1f5f9;

    padding: 6px;

}

.job-card-company .label {

    display: block;

    font-size: 0.8rem;

    color: #94a3b8;

}

.job-card-company .value {

    display: block;

    font-size: 0.95rem;

    font-weight: 600;

    color: #0f172a;

}

.job-board-card .btn {

    border-radius: 999px;

    font-weight: 600;

}

.jobs-pagination {

    margin-top: 32px;

}

.jobs-pagination .pagination {

    gap: 8px;

}

.jobs-pagination .page-link {

    border: none;

    border-radius: 12px;

    padding: 10px 18px;

    color: #475569;

    font-weight: 600;

    background: rgba(148, 163, 184, 0.15);

    transition: background 0.2s ease, color 0.2s ease;

}

.jobs-pagination .page-item.active .page-link,

.jobs-pagination .page-link:hover {

    background: #0f364e;

    color: #ffffff;

}

.jobs-pagination .page-item.disabled .page-link {

    background: rgba(148, 163, 184, 0.1);

    color: #cbd5f5;

}

.jobs-pagination ul {

    list-style: none;

    display: flex;

    gap: 8px;

    padding: 0;

    margin: 0;

}

.jobs-pagination ul li a {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 40px;

    height: 40px;

    border-radius: 12px;

    border: 1px solid rgba(148, 163, 184, 0.35);

    color: #475569;

    font-weight: 600;

}

.jobs-pagination ul li.active a {

    background: #0f364e;

    color: #fff;

    border-color: #0f364e;

}



@media (max-width: 991px) {

    .jobs-board {

        padding-top: 50px;

    }

    .filter-card {

        margin-bottom: 20px;

    }

    .candidate-list-item {

        flex-direction: column;

    }

    .candidate-list-meta {

        width: 100%;

    }

    .candidate-actions {

        width: 100%;

        justify-content: space-between;

    }

}



/************************************************

           ==Auth Pages==

*************************************************/

.auth-section {

    padding: 120px 0;

    background: radial-gradient(circle at top left, rgba(59, 130, 246, 0.12), transparent 55%),

                radial-gradient(circle at bottom right, rgba(16, 185, 129, 0.12), transparent 50%),

                #f8fafc;

}

.auth-intro {

    display: flex;

    flex-direction: column;

    gap: 20px;

    max-width: 520px;

}

.auth-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 8px 18px;

    border-radius: 999px;

    background: rgba(37, 99, 235, 0.12);

    color: #1d4ed8;

    font-weight: 600;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    font-size: 0.75rem;

}

.auth-title {

    font-size: 2.8rem;

    font-weight: 700;

    color: #0f172a;

    margin: 0;

}

.auth-copy {

    color: #475569;

    margin: 0;

    font-size: 1.05rem;

}

.auth-benefits {

    list-style: none;

    margin: 0;

    padding: 0;

    display: grid;

    gap: 12px;

}

.auth-benefits li {

    display: flex;

    align-items: center;

    gap: 12px;

    color: #1e293b;

    font-weight: 500;

}

.auth-benefits i {

    color: #33af91;

    font-size: 1.1rem;

}

.auth-card {

    background: #ffffff;

    border-radius: 28px;

    padding: 40px 44px;

    box-shadow: 0 30px 65px rgba(15, 23, 42, 0.15);

    border: 1px solid rgba(148, 163, 184, 0.18);

}

.auth-card h3 {

    font-size: 1.6rem;

    font-weight: 700;

    color: #0f172a;

    margin-bottom: 8px;

}

.auth-subtitle {

    color: #64748b;

    margin-bottom: 24px;

}

.auth-form .form-control.is-invalid,
.auth-form .form-select.is-invalid {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18) !important;
    background-image: none;
}
.auth-form .form-control.is-invalid:focus,
.auth-form .form-select.is-invalid:focus {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25) !important;
}
.auth-form .form-check-input.is-invalid {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18) !important;
}

/* Generic .is-invalid (used by post-job form, settings form, etc.) */
form:not(.auth-form) .form-control.is-invalid,
form:not(.auth-form) .form-select.is-invalid,
form:not(.auth-form) textarea.is-invalid,
form:not(.auth-form) input.is-invalid {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18) !important;
    background-image: none;
}
form:not(.auth-form) .form-control.is-invalid:focus,
form:not(.auth-form) .form-select.is-invalid:focus,
form:not(.auth-form) textarea.is-invalid:focus,
form:not(.auth-form) input.is-invalid:focus {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25) !important;
}
form:not(.auth-form) .form-check-input.is-invalid {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18) !important;
}

.auth-social {

    display: flex;

    gap: 12px;

}

.auth-social-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 12px 18px;

    border-radius: 14px;

    border: 1px solid rgba(148, 163, 184, 0.25);

    background: #f8fafc;

    color: #0f172a;

    font-weight: 600;

    text-decoration: none;

    transition: transform 0.2s ease, box-shadow 0.2s ease;

}

.auth-social-btn:hover {

    transform: translateY(-2px);

    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.12);

    text-decoration: none;

}

.auth-social-btn.google {

    border-color: rgba(37, 99, 235, 0.25);

}

.auth-social-btn.linkedin {

    border-color: rgba(37, 99, 235, 0.35);

}

.auth-divider {

    display: flex;

    align-items: center;

    gap: 16px;

    margin: 28px 0;

    color: #94a3b8;

    font-weight: 600;

    text-transform: uppercase;

    font-size: 0.75rem;

    letter-spacing: 0.18em;

}

.auth-divider::before,

.auth-divider::after {

    content: "";

    flex: 1;

    height: 1px;

    background: rgba(148, 163, 184, 0.3);

}

.auth-form .form-label {

    font-weight: 600;

    color: #1e293b;

}

.auth-form .form-control {

    border-radius: 14px;

    padding: 12px 16px;

    border: 1px solid rgba(148, 163, 184, 0.35);

    background: #f8fafc;

}

.auth-form .form-control:focus {

    border-color: rgba(37, 99, 235, 0.7);

    box-shadow: 0 0 0 0.15rem rgba(37, 99, 235, 0.15);

}

.auth-link {

    font-size: 0.85rem;

    color: #0f364e;

    text-decoration: none;

}

.auth-link:hover {

    color: #1d4ed8;

}

.auth-card .btn {

    border-radius: 14px;

    padding: 14px 18px;

    font-weight: 600;

    box-shadow: 0 20px 35px rgba(37, 99, 235, 0.25);

}

.auth-switch {

    margin-top: 24px;

    color: #475569;

    text-align: center;

}

.auth-dev-login {
    margin-top: 16px;
    padding: 16px;
    border: 1px dashed rgba(14, 165, 233, 0.45);
    border-radius: 14px;
    background: rgba(14, 165, 233, 0.06);
}
.auth-dev-login-label {
    margin: 0 0 10px;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #0369a1;
    text-align: center;
}
.auth-dev-login code {
    background: rgba(15, 23, 42, 0.08);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.78rem;
}

.auth-switch a {

    color: #1d4ed8;

    font-weight: 600;

    text-decoration: none;

}

.auth-switch a:hover {

    text-decoration: underline;

}



@media (max-width: 991px) {

    .auth-section {

        padding: 90px 0;

    }

    .auth-title {

        font-size: 2.4rem;

    }

    .auth-card {

        padding: 36px;

    }

}



@media (max-width: 767px) {

    .auth-section {

        padding: 70px 0;

    }

    .auth-card {

        padding: 32px 24px;

    }

    .auth-title {

        font-size: 2.1rem;

    }

    .auth-social {

        grid-template-columns: 1fr;

    }

}



.auth-section.auth-signup {

    background: radial-gradient(circle at top right, rgba(59, 130, 246, 0.18), transparent 55%),

                radial-gradient(circle at bottom left, rgba(16, 185, 129, 0.18), transparent 55%),

                #f8fafc;

}

.auth-toggle {

    display: flex;

    gap: 10px;

    background: rgba(148, 163, 184, 0.14);

    border-radius: 14px;

    padding: 6px;

    margin-bottom: 24px;

}

.auth-toggle-btn {

    flex: 1;

    border: none;

    background: transparent;

    border-radius: 10px;

    padding: 10px 16px;

    font-weight: 600;

    color: #475569;

    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;

}

.auth-toggle-btn.active,

.auth-toggle-btn:hover {

    background: #0f364e;

    color: #ffffff;

    box-shadow: 0 18px 32px rgba(37, 99, 235, 0.28);

}

.auth-toggle-btn:focus {

    outline: none;

}

.auth-form .form-select {

    border-radius: 14px;

    padding: 12px 16px;

    border: 1px solid rgba(148, 163, 184, 0.35);

    background-color: #f8fafc;

}

.auth-form .form-select:focus {

    border-color: rgba(37, 99, 235, 0.7);

    box-shadow: 0 0 0 0.15rem rgba(37, 99, 235, 0.12);

}

.auth-policy {

    color: #475569;

    font-size: 0.9rem;

}

.auth-policy .form-check-label {

    display: inline-flex;

    align-items: flex-start;

    gap: 10px;

}

.auth-policy .form-check-input {

    margin-top: 0.3rem;

}

.auth-policy a {

    font-weight: 600;

}

.auth-card .tab-content {

    margin-top: 16px;

}



.featured-jobs .job-card-company {

	font-weight: 600;

	color: #0f172a;

}

.featured-jobs .job-card-logo img {

	width: 52px;

	height: 52px;

	object-fit: contain;

	border-radius: 12px;

	background: #ffffff;

	box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12);

	padding: 6px;

}



.job-grid .job-card-status .job-type {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    font-size: 0.82rem;

    font-weight: 600;

    color: #0f172a;

    padding: 6px 14px;

    border-radius: 999px;

    background: rgba(148, 163, 184, 0.2);

}

.job-grid .job-type.fulltime {

    color: #166534;

    background: rgba(34, 197, 94, 0.18);

}

.job-grid .job-type.contract {

    color: #b91c1c;

    background: rgba(248, 113, 113, 0.18);

}

.job-grid .job-salary {

    color: #0f172a;

    font-weight: 600;

}

.job-grid .job-location {

    color: #0f364e;

    font-weight: 600;

}

.job-grid .job-location i {

    margin-right: 6px;

}

.job-grid .job-card-footer {

    margin-top: auto;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    gap: 16px;

    padding-top: 12px;

    border-top: 1px solid rgba(148, 163, 184, 0.2);

}

.job-grid .job-card-company {

    display: flex;

    align-items: center;

    gap: 12px;

}

.job-grid .job-card-company img {

    width: 54px;

    height: 54px;

    border-radius: 14px;

    background: #f1f5f9;

    padding: 6px;

}

.job-grid .job-card-company .label {

    display: block;

    font-size: 0.8rem;

    color: #94a3b8;

}

.job-grid .job-card-company .value {

    display: block;

    font-size: 0.95rem;

    font-weight: 600;

    color: #0f172a;

}

.current-plan-card {

    background: #ffffff;

    border-radius: 30px;

    border: 1px solid rgba(148, 163, 184, 0.18);

    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.08);

    padding: 28px 32px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    flex-wrap: wrap;

}

.current-plan-meta {

    display: flex;

    align-items: center;

    gap: 16px;

}

.plan-icon {

    width: 58px;

    height: 58px;

    border-radius: 18px;

    background: rgba(148, 163, 184, 0.2);

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 1.4rem;

    color: #475569;

}

.plan-icon.primary {

    background: rgba(59, 130, 246, 0.15);

    color: #0f364e;

}

.plan-icon.highlight {

    background: rgba(249, 115, 22, 0.18);

    color: #c2410c;

}

.plan-badge {

    display: inline-flex;

    padding: 4px 12px;

    border-radius: 999px;

    background: rgba(37, 99, 235, 0.1);

    color: #1d4ed8;

    font-weight: 600;

    font-size: 0.8rem;

    text-transform: uppercase;

    letter-spacing: 0.08em;

}

.current-plan-price {

    display: flex;

    align-items: baseline;

    gap: 6px;

    font-weight: 700;

}

.current-plan-price strong {

    font-size: 2.8rem;

    color: #0f172a;

}

.current-plan-price .currency {

    font-size: 0.95rem;

    color: #64748b;

    font-weight: 600;

}

.current-plan-price .term {

    font-size: 0.95rem;

    color: #94a3b8;

}

.plan-metrics {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

    gap: 14px;

    margin-top: 20px;

}

.metric-pill {

    border: 1px solid rgba(148, 163, 184, 0.28);

    border-radius: 20px;

    padding: 16px 18px;

    background: rgba(248, 250, 252, 0.95);

    display: flex;

    align-items: center;

    gap: 14px;

    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);

}

.metric-pill span {

    display: block;

    font-size: 0.8rem;

    color: #94a3b8;

    text-transform: uppercase;

    letter-spacing: 0.08em;

    margin-bottom: 2px;

}

.metric-pill strong {

    display: block;

    font-size: 1rem;

    color: #0f172a;

}

.metric-icon {

    width: 46px;

    height: 46px;

    border-radius: 14px;

    background: rgba(148, 163, 184, 0.2);

    display: inline-flex;

    align-items: center;

    justify-content: center;

    color: #475569;

    font-size: 1.1rem;

}

.metric-icon.primary {

    background: rgba(59, 130, 246, 0.18);

    color: #0f364e;

}

.metric-icon.highlight {

    background: rgba(249, 115, 22, 0.18);

    color: #c2410c;

}

.metric-icon.success {

    background: rgba(16, 185, 129, 0.2);

    color: #047857;

}

.plan-grid {

    display: grid;

    gap: 20px;

    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));

}

.plan-card {

    background: #ffffff;

    border-radius: 28px;

    border: 1px solid rgba(148, 163, 184, 0.18);

    box-shadow: 0 35px 80px rgba(15, 23, 42, 0.08);

    padding: 26px;

    display: flex;

    flex-direction: column;

    gap: 14px;

    height: 100%;

}

.plan-card.active {

    border-color: rgba(37, 99, 235, 0.6);

    box-shadow: 0 45px 90px rgba(37, 99, 235, 0.15);

}

.plan-card h4 {

    margin: 0;

    font-size: 1.1rem;

}

.plan-price {

    display: flex;

    align-items: baseline;

    gap: 6px;

    font-weight: 700;

    color: #0f172a;

}

.plan-price span {

    font-size: 1rem;

    color: #0f364e;

}

.plan-price strong {

    font-size: 2.3rem;

}

.plan-price small {

    color: #94a3b8;

}

.plan-list {

    list-style: none;

    margin: 0;

    padding: 0;

    display: flex;

    flex-direction: column;

    gap: 8px;

}

.plan-list li {

    display: flex;

    align-items: center;

    gap: 10px;

    color: #475569;

    font-size: 0.95rem;

}

.plan-list li i {

    color: #33af91;

}

.plan-card .btn {

    margin-top: auto;

}



.jobs-actions {

    display: flex;

    align-items: center;

    gap: 16px;

}

.jobs-view-toggle {

    display: inline-flex;

    align-items: center;

    padding: 6px;

    border-radius: 14px;

    background: rgba(148, 163, 184, 0.18);

    gap: 6px;

}

.jobs-view-toggle .view-btn {

    width: 42px;

    height: 42px;

    border-radius: 12px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    color: #475569;

    font-size: 1.05rem;

    background: transparent;

    border: none;

    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;

    text-decoration: none;

}

.jobs-view-toggle .view-btn:hover {

    color: #1d4ed8;

}

.jobs-view-toggle .view-btn.active {

    background: #0f364e;

    color: #ffffff;

    box-shadow: 0 18px 32px rgba(37, 99, 235, 0.28);

}



.job-list {

    display: grid;

    gap: 24px;

}

.job-list-item {

    background: #ffffff;

    border-radius: 24px;

    border: 1px solid rgba(148, 163, 184, 0.16);

    box-shadow: 0 22px 45px rgba(15, 23, 42, 0.08);

    padding: 24px;

    display: flex;

    flex-direction: column;

    gap: 18px;

    transition: transform 0.25s ease, box-shadow 0.25s ease;

    position: relative;

}

.job-list-item:hover {

    transform: translateY(-6px);

    box-shadow: 0 28px 60px rgba(15, 23, 42, 0.12);

}

.job-list-item.featured::after {

    content: "\f0e7";

    font-family: 'FontAwesome';

    width: 34px;

    height: 34px;

    border-radius: 50%;

    background: #ef4444;

    color: #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 14px;

    position: absolute;

    top: 24px;

    right: 24px;

}

.job-list-header {

    display: flex;

    align-items: center;

    gap: 14px;

    flex-wrap: wrap;

}

.job-list-posted {

    color: #94a3b8;

    font-weight: 500;

    font-size: 0.9rem;

}

.job-list-main {

    display: grid;

    grid-template-columns: auto 1fr auto;

    gap: 24px;

    align-items: center;

}

.job-list-logo img {

    width: 74px;

    height: 74px;

    border-radius: 20px;

    background: #f1f5f9;

    padding: 10px;

}

.job-list-content h4 {

    margin-bottom: 10px;

    font-size: 1.2rem;

    font-weight: 700;

    color: #0f172a;

}

.job-list-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    color: #475569;

    font-size: 0.95rem;

    margin-bottom: 12px;

}

.job-list-meta i {

    color: #0f364e;

    margin-right: 6px;

}

.job-list-summary {

    color: #64748b;

    margin: 0;

}

.job-list-actions {

    display: flex;

    flex-direction: column;

    gap: 12px;

    align-items: flex-end;

}

.job-list-actions .btn {

    border-radius: 999px;

    padding: 10px 22px;

    font-weight: 600;

}

.job-list-actions .bookmark {

    border: none;

    background: rgba(148, 163, 184, 0.18);

    color: #475569;

    width: 42px;

    height: 42px;

    border-radius: 50%;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    transition: background 0.2s ease, color 0.2s ease;

}

.job-list-actions .bookmark:hover {

    color: #1d4ed8;

    background: rgba(37, 99, 235, 0.18);

}



@media (max-width: 991px) {

    .job-list-main {

        grid-template-columns: auto 1fr;

    }

    .job-list-actions {

        flex-direction: row;

        align-items: center;

        justify-content: flex-start;

    }

}

@media (max-width: 767px) {

    .jobs-actions {

        width: 100%;

        justify-content: space-between;

    }

    .jobs-view-toggle {

        order: 2;

    }

    .job-list-item {

        padding: 22px;

    }

    .job-list-main {

        grid-template-columns: 1fr;

        text-align: left;

    }

    .job-list-logo {

        justify-self: flex-start;

    }

    .job-list-actions {

        width: 100%;

        justify-content: space-between;

    }

}



.job-list-footer {

    border-top: 1px solid rgba(148, 163, 184, 0.16);

    padding-top: 16px;

    color: #94a3b8;

    font-size: 0.85rem;

}



/************************************************

           ==Job Detail Layout==

*************************************************/

.job-detail-hero {

    padding: 70px;

    background: radial-gradient(circle at top left, rgba(59, 130, 246, 0.18), transparent 58%),

                radial-gradient(circle at bottom right, rgba(16, 185, 129, 0.18), transparent 52%),

                #f0f5ff;

}

.job-detail-header {

    background: #ffffff;

    border-radius: 28px;

    padding: 25px;

    box-shadow: 0 35px 70px rgba(15, 23, 42, 0.14);

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: space-between;

    gap: 32px;

}

.job-detail-company {

    display: flex;

    align-items: center;

    gap: 20px;

}

.job-detail-logo {

    width: 96px;

    height: 96px;

    border-radius: 10px;

    background: rgba(37, 99, 235, 0.12);

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 10px;

}

.job-detail-logo img {

    max-width: 100%;

}

.job-detail-label {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    background: rgba(59, 130, 246, 0.16);

    color: #1d4ed8;

    padding: 6px 16px;

    border-radius: 12px;

    font-weight: 600;

    font-size: 0.8rem;

    text-transform: uppercase;

    letter-spacing: 0.08em;

}

.job-detail-title {

    margin: 12px 0 18px;

    font-size: 2rem;

    font-weight: 700;

    color: #0f172a;

}

.job-detail-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    color: #475569;

    font-weight: 500;

}

.job-detail-tags i {

    color: #0f364e;

    margin-right: 6px;

}

.job-detail-actions {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

}

.job-detail-actions .btn {

    border-radius: 14px;

    padding: 12px 20px;

    font-weight: 600;

    display: inline-flex;

    align-items: center;

    gap: 10px;

}

.job-detail-actions .job-save {

    box-shadow: 0 18px 40px rgba(37, 99, 235, 0.18);

}

.job-detail-actions .job-share {

    color: #0f364e;

    font-weight: 600;

    padding: 0;

}

.job-detail-actions .job-share:hover {

    color: #1d4ed8;

    text-decoration: none;

}

.job-detail-meta {

    margin-top: 32px;

    display: grid;

    gap: 18px;

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

}

.job-detail-meta .meta-item {

    display: flex;

    gap: 16px;

    align-items: center;

    background: rgba(15, 23, 42, 0.06);

    border-radius: 18px;

    padding: 18px;

}

.job-detail-meta .meta-item i {

    width: 44px;

    height: 44px;

    border-radius: 14px;

    background: #ffffff;

    color: #0f364e;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 1.1rem;

    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.15);

}

.job-detail-meta .label {

    display: block;

    color: #64748b;

    font-size: 0.85rem;

    font-weight: 600;

}

.job-detail-meta .value {

    display: block;

    color: #0f172a;

    font-weight: 600;

}



.job-detail-body {

    background: #f8fafc;

    padding: 80px 0 100px;

}

.job-content-card {

    background: #ffffff;

    border-radius: 26px;

    padding: 32px 36px;

    box-shadow: 0 25px 55px rgba(15, 23, 42, 0.08);

    border: 1px solid rgba(148, 163, 184, 0.14);

    margin-bottom: 28px;

}

.job-content-card h2,

.job-content-card h3 {

    font-weight: 700;

    color: #0f172a;

    margin-bottom: 18px;

}

.job-content-card p {

    color: #475569;

    line-height: 1.8;

}

.job-bullet-list {

    margin: 0;

    padding-left: 1.2rem;

    display: grid;

    gap: 12px;

    color: #475569;

}

.job-tag-cloud {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

}

.job-tag-cloud span {

    background: rgba(59, 130, 246, 0.12);

    color: #1d4ed8;

    padding: 8px 16px;

    border-radius: 999px;

    font-weight: 600;

    font-size: 0.88rem;

}



.job-sidebar {

    display: flex;

    flex-direction: column;

    gap: 28px;

}

.job-side-card {

    background: #ffffff;

    border-radius: 24px;

    padding: 28px 30px;

    box-shadow: 0 25px 55px rgba(15, 23, 42, 0.08);

    border: 1px solid rgba(148, 163, 184, 0.14);

}

.job-side-card h3 {

    font-size: 1.2rem;

    font-weight: 700;

    color: #0f172a;

    margin-bottom: 18px;

}

.job-snapshot {

    list-style: none;

    margin: 0;

    padding: 0;

    display: grid;

    gap: 14px;

}

.job-snapshot li {

    display: grid;

    grid-template-columns: 28px 1fr auto;

    align-items: center;

    gap: 12px;

    color: #475569;

    font-weight: 500;

}

.job-snapshot li i {

    color: #0f364e;

}

.job-snapshot li span {

    color: #94a3b8;

    font-size: 0.85rem;

}

.job-snapshot li strong {

    color: #0f172a;

    font-weight: 600;

}

.job-contact-form .form-label {

    font-weight: 600;

    color: #1e293b;

}

.job-contact-form .form-control {

    border-radius: 14px;

    border: 1px solid rgba(148, 163, 184, 0.35);

    background: #f8fafc;

    padding: 12px 16px;

}

.job-contact-form .form-control:focus {

    border-color: rgba(37, 99, 235, 0.7);

    box-shadow: 0 0 0 0.15rem rgba(37, 99, 235, 0.15);

}

.job-contact-form button {

    border-radius: 14px;

    padding: 12px 18px;

    font-weight: 600;

}

.map-card iframe {

    border: 0;

    border-radius: 18px;

}



.job-related {

    padding: 90px 0 110px;

}

.job-related .subtitle {

    font-weight: 600;

    color: #1d4ed8;

    text-transform: uppercase;

    letter-spacing: 0.1em;

}



@media (max-width: 991px) {

    .job-detail-hero {

        padding: 90px 0 60px;

    }

    .job-detail-title {

        font-size: 2.2rem;

    }

    .job-detail-header {

        padding: 30px;

    }

    .sticky-card {

        position: relative;

        top: auto;

    }

}



@media (max-width: 767px) {

    .job-detail-header {

        padding: 26px;

    }

    .job-detail-title {

        font-size: 2rem;

    }

    .job-detail-meta {

        grid-template-columns: 1fr;

    }

    .job-content-card {

        padding: 28px;

    }

}



/************************************************

           ==Candidate Detail Page==

*************************************************/

.candidate-hero {

    position: relative;

    background: #f8fafc;

}

.candidate-hero-cover {

    inset: 0;

    height: 300px;

    background-size: cover;

    background-position: center;

    filter: brightness(0.85);

}

.candidate-hero-wrapper {

    position: relative;

    margin-top: -50px;

    background: #ffffff;

    border-radius: 28px;

    padding: 32px;

    box-shadow: 0 20px 55px rgba(15, 23, 42, 0.1);

    display: grid;

    grid-template-columns: auto 1fr auto;

    gap: 20px;

}

.candidate-avatar-lg {

    width: 120px;

    height: 120px;

    border-radius: 30px;

    overflow: hidden;

    border: 6px solid #ffffff;

    margin-top: -90px;

}

.candidate-avatar-lg img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.candidate-pill {

    display: inline-flex;

    padding: 6px 16px;

    border-radius: 999px;

    background: rgba(16, 185, 129, 0.15);

    color: #047857;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.08em;

    font-size: 0.75rem;

    margin-bottom: 10px;

}

.candidate-hero-body h1 {

    margin: 0;

    font-size: 2.2rem;

    color: #0f172a;

}

.candidate-hero-body p {

    margin: 6px 0 14px;

    color: #475569;

}

.candidate-hero-header {

    display: flex;

    align-items: flex-start;

    gap: 12px;

}

.candidate-save-btn {

    border: none;

    background: rgba(15, 23, 42, 0.06);

    width: 44px;

    height: 44px;

    border-radius: 50%;

    color: #0f172a;

}

.candidate-save-btn:hover {

    background: #0f364e;

    color: #fff;

}

.candidate-hero-meta {

    list-style: none;

    padding: 0;

    margin: 0 0 14px;

    display: flex;

    gap: 20px;

    flex-wrap: wrap;

    color: #475569;

    font-size: 0.95rem;

}

.candidate-hero-meta i {

    margin-right: 6px;

    color: #94a3b8;

}

.candidate-hero-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

}

.candidate-hero-tags span {

    padding: 6px 14px;

    border-radius: 14px;

    background: rgba(37, 99, 235, 0.12);

    color: #1d4ed8;

    font-weight: 500;

    font-size: 0.85rem;

}

.candidate-hero-actions {

    display: flex;

    flex-direction: column;

    gap: 12px;

}

.candidate-profile {

    padding: 80px 0;

    background: #f8fafc;

}

.candidate-section {

    background: #ffffff;

    border-radius: 26px;

    padding: 28px 32px;

    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.08);

    margin-bottom: 28px;

}

.candidate-section:last-child {

    margin-bottom: 0;

}

.section-head {

    display: flex;

    align-items: baseline;

    justify-content: space-between;

    gap: 16px;

    margin-bottom: 18px;

}

.section-head h3 {

    margin: 0;

    font-size: 1.4rem;

    color: #0f172a;

}

.section-head span {

    color: #64748b;

    font-size: 0.95rem;

}

.section-head a {

    font-weight: 600;

    color: #0f364e;

    text-decoration: none;

}

.candidate-highlights {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

    gap: 16px;

    margin-top: 20px;

}

.candidate-highlights h4 {

    margin: 0;

    font-size: 1.4rem;

    color: #0f172a;

}

.candidate-highlights p {

    margin: 4px 0 0;

    color: #475569;

}

.experience-timeline {

    display: flex;

    flex-direction: column;

    gap: 30px;

    position: relative;

    padding-left:4px;

}



.timeline-node {

    display: flex;

    gap: 18px;

}

.timeline-marker {

    width: 14px;

    height: 14px;

    border-radius: 50%;

    border: 3px solid #0f364e;

    background: #fff;

    position: relative;

    top: 0;

    flex-shrink: 0;

}

.timeline-content h4 {

    margin: 0 0 8px;

    font-size: 1.05rem;

    color: #0f172a;

}

.timeline-meta {

    display: flex;

    flex-direction: column;

    gap: 10px;

    font-size: 0.92rem;

    color: #475569;

    margin-bottom: 10px;

}

.timeline-meta span {

    display: inline-flex;

    align-items: center;

    gap: 8px;

}

.timeline-meta i {

    color: #ccd9f5;

}

.skill-chip-grid {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}

.skill-chip-grid span {

    padding: 8px 14px;

    border-radius: 12px;

    background: rgba(15, 23, 42, 0.07);

    font-weight: 600;

    color: #0f172a;

}

.portfolio-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

    gap: 16px;

}

.portfolio-card {

    border: 1px solid rgba(148, 163, 184, 0.25);

    border-radius: 18px;

    overflow: hidden;

    background: #fff;

}

.portfolio-card img {

    width: 100%;

    height: 150px;

    object-fit: cover;

}

.portfolio-card div {

    padding: 16px;

}

.portfolio-card h4 {

    margin: 0 0 6px;

    font-size: 1rem;

}

.portfolio-card p {

    margin: 0;

    color: #475569;

    font-size: 0.93rem;

}

.reference-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

    gap: 16px;

}

.reference-grid article {

    border: 1px solid rgba(148, 163, 184, 0.25);

    border-radius: 18px;

    padding: 18px;

    background: #fff;

}

.reference-grid p {

    margin: 0 0 14px;

    color: #1f2937;

}

.reference-meta strong {

    display: block;

    color: #0f172a;

	font-weight: 600;

	margin-bottom: 5px;

}

.reference-meta span {

    color: #64748b;

    font-size: 0.9rem;

}

.candidate-side-card {

    background: #ffffff;

    border-radius: 24px;

    padding: 24px;

    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.08);

    margin-bottom: 24px;

}

.candidate-side-card.highlight {

    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(16, 185, 129, 0.12));

}

.candidate-side-card h4 {

    margin: 0 0 14px;

}

.snapshot-list {

    list-style: none;

    padding: 0;

    margin: 0;

    display: flex;

    flex-direction: column;

    gap: 12px;

}

.snapshot-list span {

    color: #64748b;

}

.snapshot-list strong {

    display: block;

    color: #0f172a;

    font-size: 1.05rem;

}

.availability-tags,

.tool-stack {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

}

.availability-tags span,

.tool-stack span {

    padding: 6px 12px;

    border-radius: 12px;

    background: rgba(15, 23, 42, 0.08);

    font-weight: 600;

    font-size: 0.85rem;

}

.contact-info-list {

    list-style: none;

    padding: 0;

    margin: 0;

    display: flex;

    flex-direction: column;

    gap: 14px;

}

.contact-info-list li {

    display: flex;

    gap: 14px;

    align-items: flex-start;

    color: #0f172a;

}

.contact-info-list i {

    width: 44px;

    height: 44px;

    border-radius: 14px;

    background: rgba(37, 99, 235, 0.12);

    color: #1d4ed8;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 1rem;

}

.contact-info-list span {

    display: block;

    font-size: 0.8rem;

    text-transform: uppercase;

    letter-spacing: 0.08em;

    color: #94a3b8;

}

.contact-info-list strong {

    display: block;

    color: #0f172a;

    font-size: 1rem;

}

.candidate-detail-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

    gap: 0 18px;

}

.candidate-detail-grid article {

    display: flex;

    gap: 12px;

    align-items: center;

    padding: 10px 0;

    border-bottom: 1px solid rgba(148, 163, 184, 0.25);

}

.candidate-detail-grid article:last-child {

    border-bottom: 0;

}

.candidate-detail-grid i {

    width: 36px;

    height: 36px;

    border-radius: 12px;

    background: rgba(37, 99, 235, 0.15);

    color: #1d4ed8;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 1rem;

}

.candidate-detail-grid span {

    display: block;

    font-size: 0.9rem;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    color: #94a3b8;

}

.candidate-detail-grid strong {

    display: block;

    color: #0f172a;

	margin-left: auto;

}

.candidate-contact-form .form-group {

    margin-bottom: 14px;

}

.candidate-contact-form label {

    font-size: 0.9rem;

    color: #475569;

    margin-bottom: 4px;

}



@media (max-width: 991px) {

    .candidate-hero-wrapper {

        grid-template-columns: 1fr;

    }

    .candidate-hero-actions {

        flex-direction: row;

        flex-wrap: wrap;

    }

}

@media (max-width: 767px) {

    .candidate-hero {

        padding-bottom: 60px;

    }

    .candidate-hero-wrapper {

        padding: 24px;

    }

    .candidate-avatar-lg {

        margin-top: -70px;

    }

}



/************************************************

           ==Company Detail Page==

*************************************************/

.company-hero {

    position: relative;

    background: linear-gradient(180deg, #eef4ff 0%, #f8fafc 100%);

}

.company-hero-cover {

    position: relative;

    width: 100%;

    height: 360px;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    border-radius: 0 0 56px 56px;

    overflow: hidden;

}

.company-hero-cover::after {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(180deg, rgba(15, 23, 42, 0.4) 0%, rgba(15, 23, 42, 0.18) 55%, rgba(248, 250, 252, 0) 100%);

}

.company-hero .container {

    position: relative;

    margin-top: -140px;

}

.company-hero-wrapper {

    background: #ffffff;

    border-radius: 36px;

    padding: 44px 52px;

    box-shadow: 0 55px 120px rgba(15, 23, 42, 0.18);

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    margin: 0 auto;

}

.company-hero-tags{

	display: flex;

    align-items: center;

    gap: 20px;

}

.company-hero-tags span{background:#eef4ff; color: #333; border-radius: 5px; padding: 7px 10px; font-size: 14px; font-weight: 600;}

.company-hero-meta {

    display: flex;

    align-items: center;

    gap: 30px;

}

.company-hero-logo {

    width: 120px;

    height: 120px;

    border-radius: 32px;

    background: rgba(37, 99, 235, 0.18);

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 18px;

}

.company-hero-logo img {

    max-width: 100%;

    border-radius: 26px;

}

.company-hero-actions {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 14px;

}

.company-hero-actions .btn {

    border-radius: 14px;

    padding: 12px 24px;

    font-weight: 600;

    display: inline-flex;

    align-items: center;

    gap: 10px;

}

.company-hero-actions .btn-outline-primary {

    background: rgba(37, 99, 235, 0.1);

    border-color: transparent;

    color: #1d4ed8;

}

.company-hero-actions .btn-outline-primary:hover {

    background: #0f364e;

    color: #ffffff;

}



.company-profile {

    background: #f8fafc;

    padding: 90px 0 110px;

}





.company-side-card {

    background: #ffffff;

    border-radius: 24px;

    padding: 28px 30px;

    box-shadow: 0 25px 55px rgba(15, 23, 42, 0.1);

    border: 1px solid rgba(148, 163, 184, 0.14);

}



@media (max-width: 991px) {

    .company-hero {

        padding-bottom: 100px;

    }

    .company-hero-cover {

        height: 300px;

        border-radius: 0 0 44px 44px;

    }

    .company-hero .container {

        margin-top: -110px;

    }

    .company-hero-wrapper {

        padding: 36px;

    }

    .company-profile {

        padding: 80px 0 90px;

    }

}



@media (max-width: 767px) {

    .company-hero-cover {

        height: 220px;

        border-radius: 0 0 32px 32px;

    }

    .company-hero .container {

        margin-top: -90px;

    }

    .company-hero-wrapper {

        padding: 26px;

    }

    .company-hero-meta {

        flex-direction: column;

        align-items: flex-start;

    }

    .company-hero-actions {

        width: 100%;

    }

    .company-hero-actions .btn {

        flex: 1;

        justify-content: center;

    }

    .company-detail-section,

    .company-detail-gallery .gallery-grid {

        gap: 12px;

    }

    .company-side-card {

        padding: 24px;

    }

}



.company-profile {

    background: #f8fafc;

    padding: 90px 0 110px;

}

.company-detail-section {

    background: #ffffff;

    border-radius: 28px;

    padding: 36px 40px;

    box-shadow: 0 28px 60px rgba(15, 23, 42, 0.1);

    border: 1px solid rgba(148, 163, 184, 0.12);

    margin-bottom: 36px;

}

.company-detail-section:last-child {

    margin-bottom: 0;

}

.company-detail-heading {

    font-size: 1.8rem;

    font-weight: 700;

    color: #0f172a;

    margin-bottom: 18px;

}

.company-detail-section > h2.company-detail-heading {

    font-size: 2.1rem;

}

.company-detail-section > h3.company-detail-heading {

    font-size: 1.6rem;

}

.company-detail-subtitle,

.company-detail-section p {

    color: #475569;

    line-height: 1.8;

}

.company-detail-subtitle {

    margin-bottom: 18px;

    font-size: 0.98rem;

}

.company-detail-section p:last-child {

    margin-bottom: 0;

}

.company-detail-values {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

}

.company-detail-values .value-chip {

    background: rgba(37, 99, 235, 0.14);

    color: #1d4ed8;

    padding: 10px 18px;

    border-radius: 999px;

    font-weight: 600;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    font-size: 0.92rem;

}

.company-perks .perk-card {

    background: rgba(248, 250, 252, 0.9);

    border-radius: 22px;

    border: 1px solid rgba(148, 163, 184, 0.16);

    padding: 28px 24px;

    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);

    height: 100%;

    display: flex;

    flex-direction: column;

    gap: 12px;

    text-align: left;

}

.company-perks .perk-card i {

    font-size: 1.4rem;

    color: #0f364e;

}

.company-perks .perk-card h4 {

    margin: 0;

    font-size: 1.15rem;

    font-weight: 700;

    color: #0f172a;

}

.company-perks .perk-card p {

    margin: 0;

}

.company-detail-gallery .gallery-grid {

    display: grid;

    gap: 16px;

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

}

.company-detail-gallery .gallery-thumb {

    position: relative;

    border-radius: 20px;

    overflow: hidden;

    display: block;

    aspect-ratio: 4 / 3;

    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.1);

}

.company-detail-gallery .gallery-thumb img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.35s ease;

}

.company-detail-gallery .gallery-thumb:hover img {

    transform: scale(1.06);

}

.company-sidebar {

    display: flex;

    flex-direction: column;

    gap: 28px;

}

.company-facts {

    display: flex;

    flex-direction: column;

    gap: 12px;

}

.company-facts .fact-item {

    padding: 16px 0;

    border-bottom: 1px solid rgba(148, 163, 184, 0.16);

    display: flex;

    flex-direction: column;

    gap: 6px;

}

.company-facts .fact-item:last-child {

    border-bottom: none;

}

.company-facts dt {

    font-weight: 700;

    color: #0f172a;

    font-size: 0.95rem;

    display: inline-flex;

    align-items: center;

    gap: 10px;

}

.company-facts dd {

    margin: 0 0 0 30px;

    color: #475569;

    font-size: 0.95rem;

}

.company-facts a {

    color: #0f364e;

    text-decoration: none;

}

.company-facts a:hover {

    text-decoration: underline;

}



.company-openings-section {

    background: linear-gradient(180deg, #ffffff 0%, #f2f6ff 100%);

    padding: 90px 0 110px;

}

.company-openings-section .company-detail-heading {

    font-size: 2rem;

}

.company-openings-section .company-detail-subtitle {

    max-width: 520px;

}

.company-openings-section .btn {

    border-radius: 12px;

    font-weight: 600;

}

.company-openings-section .job-board-card {

    height: 100%;

}



@media (max-width: 991px) {

    .company-detail-section {

        padding: 32px;

    }

    .company-openings-section {

        padding: 70px 0 90px;

    }

}



@media (max-width: 767px) {

    .company-detail-section {

        padding: 28px;

    }

    .company-detail-heading {

        font-size: 1.6rem;

    }

    .company-openings-section {

        padding: 60px 0 80px;

    }

}



/************************************************

           ==Contact Page==

*************************************************/

.contact-banner {

    padding: 120px 0 90px;

    background: linear-gradient(135deg, rgba(59, 130, 246, 0.16) 0%, rgba(16, 185, 129, 0.14) 100%);

}

.contact-banner-wrapper {text-align: center;

}

.contact-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    background: rgba(37, 99, 235, 0.16);

    border-radius: 999px;

    padding: 8px 18px;

    color: #1d4ed8;

    font-weight: 700;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    font-size: 0.75rem;

}

.contact-banner h1 {

    font-size: 2.8rem;

    font-weight: 700;

    color: #0f172a;

    margin-bottom: 6px;

}

.contact-banner p {

    color: #475569;

    margin-bottom: 0;

    line-height: 1.8;

}



.contact-content {

    background: #f8fafc;

    padding: 90px 0 100px;

}

.contact-card {

    background: #ffffff;

    border-radius: 26px;

    border: 1px solid rgba(148, 163, 184, 0.16);

    box-shadow: 0 28px 60px rgba(15, 23, 42, 0.1);

    padding: 24px;

}

.contact-card h2 {

    font-size: 1.8rem;

    font-weight: 700;

    color: #0f172a;

    margin-bottom: 16px;

}

.contact-card-copy {

    color: #475569;

    margin-bottom: 22px;

    line-height: 1.7;

}

.contact-details {

    list-style: none;

    margin: 0;

    padding: 0;

    display: grid;

    gap: 16px;

}

.contact-details li {

    display: flex;

    gap: 14px;

    align-items: flex-start;

}

.contact-details .icon {

    width: 46px;

    height: 46px;

    border-radius: 14px;

    background: rgba(59, 130, 246, 0.12);

    display: inline-flex;

    align-items: center;

    justify-content: center;

    color: #0f364e;

    font-size: 1.1rem;

}

.contact-details h5 {

    margin: 0 0 4px;

    font-size: 1rem;

    font-weight: 700;

    color: #0f172a;

}

.contact-details p {

    margin: 0;

    color: #475569;

    line-height: 1.6;

}

.contact-details a {

    color: #0f364e;

    text-decoration: none;

    font-weight: 600;

}

.contact-details a:hover {

    text-decoration: underline;

}

.contact-social {

    margin-top: 24px;

    display: flex;

    gap: 12px;

}

.contact-social a {

    width: 42px;

    height: 42px;

    border-radius: 12px;

    background: rgba(148, 163, 184, 0.18);

    display: inline-flex;

    align-items: center;

    justify-content: center;

    color: #475569;

    transition: background 0.2s ease, color 0.2s ease;

}

.contact-social a:hover {

    background: #0f364e;

    color: #ffffff;

}



.contact-form-modern .form-label {

    font-weight: 600;

    color: #1e293b;

}

.contact-form-modern .form-control,

.contact-form-modern .form-select {

    border-radius: 14px;

    border: 1px solid rgba(148, 163, 184, 0.35);

    background: #f8fafc;

    padding: 12px 16px;

    box-shadow: none;

}

.contact-form-modern .form-control:focus,

.contact-form-modern .form-select:focus {

    border-color: rgba(37, 99, 235, 0.7);

    box-shadow: 0 0 0 0.15rem rgba(37, 99, 235, 0.14);

}

.contact-form-modern button {

    border-radius: 14px;

    padding: 14px 18px;

    font-weight: 600;

    box-shadow: 0 20px 45px rgba(37, 99, 235, 0.25);

}



.contact-offices {

    background: #ffffff;

    padding: 70px 0;

}

.office-card {

    background: #f8fafc;

    border-radius: 22px;

    border: 1px solid rgba(148, 163, 184, 0.16);

    padding: 28px 26px;

    box-shadow: 0 25px 55px rgba(15, 23, 42, 0.08);

    height: 100%;

    display: flex;

    flex-direction: column;

    gap: 12px;

}

.office-card h3 {

    margin: 0;

    font-size: 1.25rem;

    font-weight: 700;

    color: #0f172a;

}

.office-card p {

    margin: 0;

    color: #475569;

    line-height: 1.65;

}

.office-card a {

    margin-top: auto;

    color: #0f364e;

    text-decoration: none;

    font-weight: 600;

    display: inline-flex;

    align-items: center;

    gap: 10px;

}

.office-card a:hover {

    text-decoration: underline;

}



.contact-map {

    padding: 0 0 70px;

}

.contact-map iframe {

    border: 0;

    border-radius: 26px;

}



@media (max-width: 991px) {

    .contact-hero {

        padding: 90px 0 70px;

    }

    .contact-hero-wrapper {

        padding: 38px;

    }

    .contact-hero-card {

        flex: 1 1 100%;

    }

    .contact-content {

        padding: 70px 0 80px;

    }

}



@media (max-width: 767px) {

    .contact-hero-wrapper {

        padding: 28px;

    }

    .contact-hero-copy h1 {

        font-size: 2.1rem;

    }

    .contact-hero-meta {

        gap: 10px;

    }

    .contact-content {

        padding: 60px 0 70px;

    }

    .contact-card {

        padding: 30px;

    }

    .office-card {

        padding: 26px 24px;

    }

    .contact-map {

        padding-bottom: 90px;

    }

}



/************************************************

           ==Dashboard==

*************************************************/

.dashboard-section {

    background: linear-gradient(180deg, #f8fafc 0%, #eef4ff 100%);

    padding: 70px 0;

}

.dashboard-layout {

    display: flex;

    gap: 24px;

    align-items: flex-start;

}

.dashboard-sidebar {

    background: #ffffff;

    border-radius:20px;

    border: 1px solid rgba(148, 163, 184, 0.16);

    box-shadow: 0 30px 70px rgba(15, 23, 42, 0.08);

    padding: 28px;

    width: 280px;

    flex-shrink: 0;

}

.sidebar-header {

    margin-bottom: 24px;

}

.status-toggle {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    padding: 12px 15px;

    border-radius: 10px;

    background: rgba(34, 197, 94, 0.08);

    border: 1px solid rgba(34, 197, 94, 0.25);

    margin-bottom: 18px;

}

.status-label {

    display: block;

    font-weight: 700;

    color: #14532d;

}

.status-note {

    display: block;

    color: #64748b;

    font-size: 0.8rem;

	margin-top: 5px;

}

.status-switch {

    position: relative;

    width: 54px;

    height: 28px;

    display: inline-block;

}

.status-switch input {

    opacity: 0;

    width: 0;

    height: 0;

}

.status-slider {

    position: absolute;

    inset: 0;

    background: rgba(148, 163, 184, 0.5);

    border-radius: 999px;

    transition: background 0.2s ease;

}

.status-slider::before {

    content: "";

    position: absolute;

    height: 22px;

    width: 22px;

    left: 4px;

    top: 3px;

    background: #ffffff;

    border-radius: 50%;

    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.2);

    transition: transform 0.2s ease;

}

.status-switch input:checked + .status-slider {

    background: linear-gradient(135deg, #33af91, #16a34a);

}

.status-switch input:checked + .status-slider::before {

    transform: translateX(24px);

}

.sidebar-header h2 {

    margin: 16px 0 4px;

    font-size: 1.4rem;

    font-weight: 700;

    color: #0f172a;

}

.sidebar-header p {

    margin: 0;

    color: #64748b;

    font-size: 0.95rem;

}

.dashboard-nav {

    list-style: none;

    margin: 0;

    padding: 0;

    display: flex;

    flex-direction: column;

    gap: 6px;

}

.dashboard-nav li a {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 10px 12px;

    border-radius: 12px;

    color: #475569;

    font-weight: 600;

    text-decoration: none;

}

.dashboard-nav li.active a,

.dashboard-nav li a:hover {

    background: rgba(37, 99, 235, 0.1);

    color: #1d4ed8;

}

.dashboard-main {

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 28px;

}

.dashboard-stats .stat-card {

    border-radius: 20px;

    padding: 18px 20px;

    color: #ffffff;

    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08);

    display: flex;

    align-items: center;

    gap: 14px;

}

.stat-card span {

    font-size: 1.2rem;

    color: rgba(255, 255, 255, 0.8);

    display: block;

    margin-bottom: 0;

}

.stat-card div {

    display: flex;

    flex-direction: column;

    gap: 4px;

}

.stat-icon {

    width: 46px;

    height: 46px;

	line-height: 46px;

    border-radius: 16px;

    background: rgba(255, 255, 255, 0.2);

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 1.2rem;

	text-align: center;

}

.stat-card strong {

    font-size: 1.6rem;

    font-weight: 700;

}

.stat-purple { background: linear-gradient(135deg, #7c3aed, #a855f7); }

.stat-orange { background: linear-gradient(135deg, #f97316, #fb923c); }

.stat-blue { background: linear-gradient(135deg, #0f364e, #0ea5e9); }

.stat-teal { background: linear-gradient(135deg, #0ea5e9, #14b8a6); }

.employer-hero {

    width: 100%;

    background: linear-gradient(120deg, #eef2ff 0%, #f0fdf4 100%);

    padding: 40px 0;

}

.employer-hero-content {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

}

.employer-hero h1 {

    margin: 0 0 6px;

    font-size: 1.9rem;

    color: #0f172a;

}

.employer-dashboard .dashboard-main {

    gap: 28px;

    display: flex;

    flex-direction: column;

}

.employer-sidebar .sidebar-header {

    text-align: left;

}

.company-pill {

    display: inline-flex;

    align-items: center;

    padding: 6px 14px;

    border-radius: 999px;

    background: rgba(37, 99, 235, 0.12);

    color: #1d4ed8;

    font-weight: 600;

    font-size: 0.8rem;

    margin-top: 12px;

}

.dashboard-cover-card {

    background: #ffffff;

    border-radius: 32px;

    overflow: hidden;

    box-shadow: 0 35px 90px rgba(15, 23, 42, 0.12);

}

.dashboard-cover-media img {

    width: 100%;

    height: 220px;

    object-fit: cover;

}

.dashboard-cover-profile {

    display: flex;

    gap: 18px;

    padding: 20px;

    align-items: center;

}

.cover-avatar img {

    width: 88px;

    height: 88px;

    border-radius: 22px;

    object-fit: cover;

}

.dashboard-cover-profile h3 {

    margin: 0 0 6px;

    font-size: 1.4rem;

}

.dashboard-cover-profile p {

    margin: 0 0 12px;

    color: #475569;

}

.dashboard-cover-profile ul {

    list-style: none;

    margin: 0;

    padding: 0;

    display: flex;

    gap: 20px;

    color: #475569;

    font-weight: 600;

}

.dashboard-panel {

    background: #ffffff;

    border-radius: 26px;

    border: 1px solid rgba(148, 163, 184, 0.16);

    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.08);

    padding: 26px 28px 30px;

}

.panel-heading {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 20px;

}

.panel-heading h3 {

    margin: 0;

    font-size: 1.3rem;

    font-weight: 700;

}

.panel-heading a {

    font-weight: 600;

    color: #0f364e;

    text-decoration: none;

}

.badge-status {

    display: inline-flex;

    align-items: center;

    padding: 4px 10px;

    border-radius: 999px;

    font-size: 0.75rem;

    font-weight: 700;

    color: #15803d;

    background: rgba(34, 197, 94, 0.15);

}

.badge-status.danger {

    color: #b91c1c;

    background: rgba(248, 113, 113, 0.2);

}

.applied-card {

    background: #f8fafc;

    border-radius: 22px;

    padding: 22px;

    border: 1px solid rgba(148, 163, 184, 0.12);

    display: flex;

    flex-direction: column;

    gap: 10px;

    height: 100%;

	align-items: flex-start;

}

.applied-card h4 {

    margin: 4px 0;

    font-size: 1.1rem;

}

.applied-card p {

    margin: 0;

    color: #475569;

}

.applied-meta {

    font-size: 0.85rem;

    color: #94a3b8;

    display: flex;

    flex-direction: column;

    gap: 4px;

}

.applied-footer {

    margin-top: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

}

.applied-footer img {

    width: 44px;

    height: 44px;

    border-radius: 12px;

}

.package-grid {

    display: grid;

    gap: 12px;

    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));

}

.package-chip {

    background: rgba(37, 99, 235, 0.08);

    border-radius: 18px;

    padding: 16px;

    display: flex;

    flex-direction: column;

    gap: 6px;

    border: 1px solid rgba(37, 99, 235, 0.15);

	width: 100%;

}

.package-chip .label {

    font-size: 0.75rem;

    text-transform: uppercase;

    color: #64748b;

    font-weight: 700;

}

.package-chip.danger {

    background: rgba(248, 113, 113, 0.12);

    border-color: rgba(248, 113, 113, 0.2);

}

.package-chip .chip-label{font-weight: 700;}





.package-detail-panel {

    padding: 28px;

}

.package-detail-header {

    display: flex;

    align-items: center;

    gap: 12px;

}

.package-header-icon {

    width: 46px;

    height: 46px;

    border-radius: 14px;

    background: linear-gradient(135deg, #0f364e, #0ea5e9);

    color: #fff;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 1.1rem;

}

.package-divider {

    margin: 16px 0 20px;

    height: 1px;

    background: rgba(148, 163, 184, 0.35);

}

.package-detail-grid.exact {

    gap: 15px;

}

.package-detail-card.exact {

    background: #ffffff;

    border-radius: 18px;

    border: 1px solid rgba(148, 163, 184, 0.25);

    padding: 24px 18px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 10px;

    text-align: center;

}

.package-detail-card.exact .detail-label {

    font-size: 0.78rem;

    text-transform: uppercase;

    letter-spacing: 0.08em;

    color: #94a3b8;

    font-weight: 700;

}

.package-detail-card.exact strong {

    display: block;

    font-size: 1rem;

	line-height: 24px;

}

.package-detail-card.exact .quota {

    color: #16a34a;

}

.detail-icon {

    width: 64px;

    height: 64px;

	line-height: 64px;

    border-radius: 14px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    font-size: 1.1rem;

    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.15);

}

.detail-icon.orange { background: linear-gradient(135deg, #f97316, #fb923c); }

.detail-icon.teal { background: linear-gradient(135deg, #0ea5e9, #14b8a6); }

.detail-icon.green { background: linear-gradient(135deg, #10b981, #22d3ee); }

.detail-icon.blue { background: linear-gradient(135deg, #0f364e, #0ea5e9); }

.detail-icon.danger { background: linear-gradient(135deg, #f43f5e, #fb7185); }



.content-hero {

    background: linear-gradient(120deg, #eef2ff 0%, #e0f2fe 100%);

    padding: 70px 0 60px;

    text-align: center;

}

.content-hero h1 {

    font-size: 2.2rem;

    color: #0f172a;

    margin-bottom: 12px;

}

.content-hero p {

    margin: 0 auto;

    max-width: 640px;

    color: #475569;

    font-size: 1rem;

}

.content-shell {

    padding: 70px 0 90px;

}

.content-card {

    background: #ffffff;

    border-radius: 26px;

    border: 1px solid rgba(148, 163, 184, 0.18);

    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.08);

    padding: 32px;

    margin-bottom: 30px;

}

.typography-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

    gap: 18px;

}

.typography-box {

    border: 1px solid rgba(148, 163, 184, 0.18);

    border-radius: 18px;

    padding: 18px;

    background: #f8fafc;

}

.alert-stack .alert {

    border-radius: 18px;

    border: none;

    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.08);

}

.button-showcase {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

    gap: 18px;

}

.faq-accordion {

    display: flex;

    flex-direction: column;

    gap: 20px;

}

.faq-accordion details {

    border: 1px solid rgba(148, 163, 184, 0.26);

    border-radius: 18px;

    padding: 18px 24px;

    background: #ffffff;

    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.05);

}

.faq-accordion summary {

    font-weight: 600;

    color: #7a7f8d;

    cursor: pointer;

	font-size: 18px;

}

.faq-accordion summary::-webkit-details-marker {

    display: none;

}

.faq-accordion p{margin-top: 15px;}

.faq-accordion details[open] {

    border-color: #0f364e;

    box-shadow: 0 25px 55px rgba(37, 99, 235, 0.12);

}

.blog-grid-modern {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: 20px;

}

.blog-card {

    border-radius: 26px;

    border: 1px solid rgba(148, 163, 184, 0.18);

    overflow: hidden;

    background: #ffffff;

    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.08);

    display: flex;

    flex-direction: column;

}

.blog-card img {

    width: 100%;

    height: 200px;

    object-fit: cover;

}

.blog-card-body {

    padding: 22px;

    display: flex;

    flex-direction: column;

    gap: 12px;

}

.blog-card-body h3 {

    margin: 0;

    font-size: 1.2rem;

}

.blog-card-body p {

    margin: 0;

    color: #475569;

}

.blog-card-body a {

    font-weight: 600;

    color: #0f364e;

    text-decoration: none;

}

.blog-detail-hero {

    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(15, 118, 110, 0.12));

    padding: 70px 0;

    text-align: center;

}

.blog-detail-meta {

    display: flex;

    gap: 14px;

    flex-wrap: wrap;

    justify-content: center;

    color: #475569;

}

.blog-detail-body {

    padding: 70px 0 90px;

}

.blog-detail-body article {

    background: #ffffff;

    border-radius: 25px;

    border: 1px solid rgba(148, 163, 184, 0.18);

    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.08);

    padding: 32px;

}

.postimage img{border-radius: 15px;}

.notfound-section {

    padding: 50px 0 ;

    text-align: center;

}

.notfound-section h1 {

    font-size: 7rem;

    margin: 0;

    color: #0f364e;

}

.notfound-section p {

    color: #475569;

    max-width: 520px;

    margin: 0 auto 20px;

}

.notfound-actions {

    display: flex;

    gap: 14px;

    justify-content: center;

    flex-wrap: wrap;

}

.blog-hero {

    background: linear-gradient(120deg, #eef2ff 0%, #f5f3ff 30%, #e0f2fe 100%);

    padding: 70px 0 50px;

}

.blog-hero-wrapper {

    display: flex;

    flex-direction: column;

    gap: 30px;

    align-items: center;

    text-align: center;

}

.blog-hero-copy {

    max-width: 700px;

}

.blog-hero-badge {

    display: inline-block;

    padding: 8px 18px;

    border-radius: 999px;

    background: rgba(37, 99, 235, 0.15);

    color: #1d4ed8;

    font-weight: 600;

    font-size: 0.85rem;

    text-transform: uppercase;

    letter-spacing: 0.05em;

}

.blog-hero-title {

    font-size: 2.8rem;

    font-weight: 700;

    color: #0f172a;

    margin: 0 0 16px;

    line-height: 1.2;

}

.blog-hero-subtitle {

    font-size: 1.1rem;

    color: #475569;

    margin: 0;

    line-height: 1.6;

}

.blog-hero-search {

    width: 100%;

    max-width: 600px;

}

.blog-search-form .input-group {

    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);

    border-radius: 999px;

    overflow: hidden;

    background: #fff;

}

.blog-search-form .form-control {

    border: none;

    padding: 16px 24px;

    font-size: 1rem;

}

.blog-search-form .btn {

    padding: 16px 28px;

    border: none;

    border-radius: 0;

}

.blog-pill {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 6px 14px;

    border-radius: 999px;

    background:#33af91;

    color: #fff;

    font-weight: 600;

    font-size: 0.85rem;

}

.blog-hero h1 {

    margin: 18px 0 14px;

    font-size: 2.4rem;

    color: #0f172a;

}

.blog-hero p {

    max-width: 560px;

    color: #475569;

    margin-bottom: 0;

}

.blog-hero-form .input-group {

    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);

    border-radius: 999px;

    overflow: hidden;

    background: #fff;

}

.blog-hero-tags {

    display: flex;

    gap: 12px;

    align-items: center;

    flex-wrap: wrap;

    margin-top: 18px;

    color: #475569;

}

.blog-hero-tags a {

    padding: 6px 14px;

    border-radius: 999px;

    background: rgba(15, 23, 42, 0.06);

    font-size: 0.85rem;

    color: #0f172a;

    text-decoration: none;

}

.blog-hero-card {

    background: #0f172a;

    color: #fff;

    padding: 28px;

    border-radius: 28px;

    box-shadow: 0 30px 60px rgba(15, 23, 42, 0.35);

    height: 100%;

}

.blog-hero-card p {

    text-transform: uppercase;

    letter-spacing: 0.08em;

    color: rgba(255, 255, 255, 0.7);

    font-size: 0.82rem;

}

.blog-hero-card h3 {

    margin: 12px 0 20px;

    font-size: 1.6rem;

}

.blog-hero-meta {

    display: flex;

    gap: 16px;

    flex-wrap: wrap;

    color: rgba(255, 255, 255, 0.8);

    font-size: 0.92rem;

}

.blog-grid-shell .row {

    --bs-gutter-x: 2rem;

}

.blog-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

    gap: 20px;

}

.blog-grid-shell .blog-grid {

    grid-template-columns: repeat(2, 1fr);

}

.blog-grid-wide {

    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

}

.blog-card {

    background: #ffffff;

    border-radius: 26px;

    border: 1px solid rgba(148, 163, 184, 0.18);

    box-shadow: 0 22px 50px rgba(15, 23, 42, 0.08);

    overflow: hidden;

    display: flex;

    flex-direction: column;

}

.blog-card.wide {

    flex-direction: column;

}

.blog-card-media {

    position: relative;

    overflow: hidden;

}

.blog-card-media img {

    width: 100%;

    height: 220px;

    object-fit: cover;

    display: block;

}

.blog-card-tag {

    position: absolute;

    top: 18px;

    left: 18px;

    padding: 6px 14px;

    border-radius: 999px;

    background: rgba(37, 99, 235, 0.9);

    color: #fff;

    font-size: 0.78rem;

    font-weight: 600;

}

.blog-card-tag.teal { background: rgba(14, 165, 233, 0.9); }

.blog-card-tag.orange { background: rgba(249, 115, 22, 0.9); }

.blog-card-body {

    padding: 24px;

    display: flex;

    flex-direction: column;

    gap: 14px;

    flex: 1;

}

.blog-card-body h3 {

    margin: 0;

    font-size: 1.25rem;

    color: #0f172a;

}

.blog-card-body h3 a {

    color: inherit;

    text-decoration: none;

}

.blog-card-body p {

    margin: 0;

    color: #475569;

}

.blog-card-meta {

    display: flex;

    gap: 10px;

    font-size: 0.9rem;

    color: #64748b;

}

.blog-card-footer {

    margin-top: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 14px;

}

.blog-card-footer .author {

    display: flex;

    gap: 10px;

    align-items: center;

}

.blog-card-footer .author img {

    width: 44px;

    height: 44px;

    border-radius: 50%;

    object-fit: cover;

}

.blog-card-footer .author div {

    display: flex;

    flex-direction: column;

    font-size: 0.85rem;

    color: #475569;

}

.blog-card-footer .author div strong{font-weight: 700; display: block; margin-bottom: 5px;}

.text-link {

    color: #0f364e;

    font-weight: 600;

    text-decoration: none;

}

.blog-content {

    padding: 60px 0;

}

.blog-list-modern {

    display: flex;

    flex-direction: column;

    gap: 30px;

}

.blog-list-item {

    display: flex;

    gap: 24px;

    background: #ffffff;

    border: 1px solid rgba(148, 163, 184, 0.18);

    border-radius: 24px;

    padding: 24px;

    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);

    transition: all 0.3s ease;

}

.blog-list-item:hover {

    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12);

    transform: translateY(-2px);

}

.blog-list-image {

    flex-shrink: 0;

    width: 280px;

    position: relative;

    border-radius: 18px;

    overflow: hidden;

}

.blog-list-image img {

    width: 100%;

    height: 200px;

    object-fit: cover;

    display: block;

}

.blog-date-badge {

    position: absolute;

    top: 16px;

    left: 16px;

    background: rgba(37, 99, 235, 0.95);

    color: #fff;

    padding: 10px 14px;

    border-radius: 12px;

    text-align: center;

    min-width: 60px;

}

.blog-date-badge .day {

    display: block;

    font-size: 1.4rem;

    font-weight: 700;

    line-height: 1;

}

.blog-date-badge .month {

    display: block;

    font-size: 0.75rem;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    margin-top: 4px;

    opacity: 0.9;

}

.blog-list-content {

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 12px;

}

.blog-meta {

    display: flex;

    gap: 20px;

    flex-wrap: wrap;

    font-size: 0.9rem;

    color: #64748b;

}

.blog-meta i {

    margin-right: 6px;

    color: #94a3b8;

}

.blog-meta a {

    color: #0f364e;

    text-decoration: none;

    font-weight: 500;

}

.blog-title {

    margin: 0;

    font-size: 1.5rem;

    font-weight: 700;

    color: #0f172a;

    line-height: 1.3;

}

.blog-title a {

    color: inherit;

    text-decoration: none;

    transition: color 0.2s ease;

}

.blog-title a:hover {

    color: #0f364e;

}

.blog-excerpt {

    margin: 0;

    color: #475569;

    line-height: 1.7;

    flex: 1;

}

.blog-read-more {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #0f364e;

    font-weight: 600;

    text-decoration: none;

    font-size: 0.95rem;

    transition: gap 0.2s ease;

}

.blog-read-more:hover {

    gap: 12px;

}

.blog-pagination {

    margin-top: 50px;

    display: flex;

    justify-content: center;

}

.blog-pagination .pagination {

    gap: 8px;

}

.blog-pagination .page-link {

    padding: 10px 16px;

    border-radius: 12px;

    border: 1px solid rgba(148, 163, 184, 0.2);

    color: #475569;

    font-weight: 500;

    transition: all 0.2s ease;

}

.blog-pagination .page-item.active .page-link {

    background: #0f364e;

    border-color: #0f364e;

    color: #fff;

}

.blog-pagination .page-link:hover {

    background: #eef2ff;

    border-color: #0f364e;

    color: #0f364e;

}

.blog-sidebar {

    display: flex;

    flex-direction: column;

    gap: 20px;

}

.sidebar-widget {

    background: #ffffff;

    border: 1px solid rgba(148, 163, 184, 0.18);

    border-radius: 24px;

    padding: 24px;

    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);

}

.widget-title {

    font-size: 1.2rem;

    font-weight: 700;

    color: #0f172a;

    margin: 0 0 18px;

}

.sidebar-search .input-group {

    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);

    border-radius: 12px;

    overflow: hidden;

}

.sidebar-search .form-control {

    border: none;

    padding: 12px 18px;

}

.sidebar-search .btn {

    padding: 12px 20px;

    border: none;

    border-radius: 0;

}

.sidebar-categories {

    list-style: none;

    padding: 0;

    margin: 0;

    display: flex;

    flex-direction: column;

    gap: 12px;

}

.sidebar-categories li a {

    display: flex;

    justify-content: space-between;

    align-items: center;

    color: #475569;

    text-decoration: none;

    padding: 10px 0;

    border-bottom: 1px solid rgba(148, 163, 184, 0.1);

    transition: color 0.2s ease;

}

.sidebar-categories li:last-child a {

    border-bottom: none;

}

.sidebar-categories li a:hover {

    color: #0f364e;

}

.sidebar-categories li a span {

    color: #94a3b8;

    font-size: 0.9rem;

}

.sidebar-recent {

    list-style: none;

    padding: 0;

    margin: 0;

    display: flex;

    flex-direction: column;

    gap: 16px;

}

.sidebar-recent li {

    display: flex;

    gap: 14px;

    align-items: flex-start;

}

.recent-image {

    flex-shrink: 0;

    width: 80px;

    height: 80px;

    border-radius: 12px;

    overflow: hidden;

    display: block;

}

.recent-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.recent-content {

    flex: 1;

}

.recent-content h6 {

    margin: 0 0 6px;

    font-size: 0.95rem;

    line-height: 1.4;

}

.recent-content h6 a {

    color: #0f172a;

    text-decoration: none;

    font-weight: 600;

    transition: color 0.2s ease;

}

.recent-content h6 a:hover {

    color: #0f364e;

}

.recent-date {

    display: block;

    font-size: 0.85rem;

    color: #94a3b8;

}

.sidebar-archives {

    list-style: none;

    padding: 0;

    margin: 0;

    display: flex;

    flex-direction: column;

    gap: 12px;

}

.sidebar-archives li a {

    display: flex;

    justify-content: space-between;

    align-items: center;

    color: #475569;

    text-decoration: none;

    padding: 10px 0;

    border-bottom: 1px solid rgba(148, 163, 184, 0.1);

    transition: color 0.2s ease;

}

.sidebar-archives li:last-child a {

    border-bottom: none;

}

.sidebar-archives li a:hover {

    color: #0f364e;

}

.sidebar-archives li a span {

    color: #94a3b8;

    font-size: 0.9rem;

}

.sidebar-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}

.sidebar-tags a {

    padding: 8px 16px;

    border-radius: 999px;

    background: #eef2ff;

    color: #1d4ed8;

    font-size: 0.85rem;

    text-decoration: none;

    font-weight: 500;

    transition: all 0.2s ease;

}

.sidebar-tags a:hover {

    background: #0f364e;

    color: #fff;

}

.blog-widget {

    background: #ffffff;

    border: 1px solid rgba(148, 163, 184, 0.18);

    border-radius: 24px;

    padding: 22px;

    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);

}

.blog-widget h5 {

    margin-bottom: 16px;

    color: #0f172a;

}

.topic-chips {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}

.topic-chips a {

    padding: 6px 14px;

    border-radius: 999px;

    background: #eef2ff;

    color: #1d4ed8;

    font-size: 0.85rem;

    text-decoration: none;

    font-weight: 600;

}

.popular-list {

    list-style: none;

    padding: 0;

    margin: 0;

    display: flex;

    flex-direction: column;

    gap: 14px;

}

.popular-list li span {

    text-transform: uppercase;

    letter-spacing: 0.08em;

    font-size: 0.7rem;

    color: #94a3b8;

    display: block;

}

.popular-list li p {

    margin: 4px 0 0;

    color: #0f172a;

    font-weight: 600;

}

.newsletter-form input {

    margin-bottom: 12px;

    border-radius: 16px;

}

.modern-pagination {

    margin-top: 32px;

    padding: 18px 22px;

    border-radius: 20px;

    border: 1px solid rgba(148, 163, 184, 0.2);

    display: flex;

    flex-wrap: wrap;

    gap: 16px;

    align-items: center;

    justify-content: space-between;

}

.pagination-controls {

    display: flex;

    gap: 12px;

    align-items: center;

}

.page-dots {

    display: flex;

    gap: 6px;

}

.page-dots span {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: rgba(148, 163, 184, 0.6);

    display: inline-block;

}

.page-dots span.active {

    background: #0f364e;

    width: 16px;

    border-radius: 999px;

}

.blog-detail-hero {

    background-size: cover;

    background-position: center;

    padding: 110px 0 90px;

    position: relative;

}

.blog-detail-hero::after {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(180deg, rgba(11, 15, 25, 0.6), rgba(15, 23, 42, 0.85));

}

.blog-detail-hero .container {

    position: relative;

    z-index: 1;

}

.blog-detail-hero-content {

    color: #fff;

    max-width: 860px;

	margin: 0 auto;

}

.blog-detail-meta {

    display: flex;

    align-items: center;

    gap: 18px;

    flex-wrap: wrap;

    margin: 20px 0;

}

.blog-detail-meta .author {

    display: flex;

    gap: 12px;

    align-items: center;

	color: #fff;

}

.blog-detail-meta .author img {

    width: 48px;

    height: 48px;

    border-radius: 50%;

}

.blog-detail-meta ul {

    display: flex;

    gap: 12px;

    list-style: none;

    margin: 0;

    padding: 0;

    color: rgba(255, 255, 255, 0.8);

}

.blog-detail-share {

    display: flex;

    gap: 12px;

    align-items: center;

	justify-content: center;

}

.blog-detail-share a {

    width: 36px;

    height: 36px;

    border-radius: 50%;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background: rgba(255, 255, 255, 0.18);

    color: #fff;

}

.blog-detail-body {

    padding: 70px 0;

}

.blog-article {

    background: #fff;

    border-radius: 26px;

    padding: 32px;

    border: 1px solid rgba(148, 163, 184, 0.18);

    box-shadow: 0 25px 55px rgba(15, 23, 42, 0.08);

}

.blog-article h3 {

    margin-top: 28px;

    color: #0f172a;

}

.blog-article ul {

    padding-left: 18px;

    color: #475569;

	list-style-type: disc;

}

.blog-article ul li{font-size: 16px; margin-bottom: 10px;}

.blog-article blockquote {

    margin: 25px 0;

    padding: 50px 25px 25px;

    border-radius: 20px;

    background: #f8fafc;

    border-left: 4px solid #0f364e;

    color: #0f172a;

    font-size: 1.05rem;

}

.blog-article blockquote span {

    display: block;

    margin-top: 12px;

    font-weight: 600;

    color: #0f364e;

}

.blog-tag-cloud {

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

    margin-top: 28px;

}

.blog-tag-cloud a {

    padding: 6px 16px;

    border-radius: 999px;

    background: rgba(37, 99, 235, 0.1);

    color: #1d4ed8;

    text-decoration: none;

    font-size: 0.85rem;

}

.comment-section {

    margin-top: 50px;

    background: #ffffff;

    border-radius: 24px;

    border: 1px solid rgba(148, 163, 184, 0.18);

    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);

    padding: 32px;

}

.comment-section-title {

    font-size: 1.5rem;

    font-weight: 700;

    color: #0f172a;

    margin: 0 0 28px;

}

.comments-list {

    display: flex;

    flex-direction: column;

    gap: 24px;

    margin-bottom: 32px;

    padding-bottom: 32px;

    border-bottom: 1px solid rgba(148, 163, 184, 0.15);

}

.comment-item {

    display: flex;

    gap: 16px;

    align-items: flex-start;

}

.comment-item.comment-reply {

    margin-left: 56px;

    padding-left: 20px;

    border-left: 2px solid rgba(148, 163, 184, 0.2);

}

.comment-avatar {

    flex-shrink: 0;

    width: 48px;

    height: 48px;

}

.comment-avatar img {

    width: 100%;

    height: 100%;

    border-radius: 50%;

    object-fit: cover;

    display: block;

}

.comment-content {

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 10px;

}

.comment-header {

    display: flex;

    align-items: center;

    gap: 12px;

    flex-wrap: wrap;

}

.comment-author-name {

    font-size: 0.95rem;

    font-weight: 600;

    color: #0f172a;

    display: inline-flex;

    align-items: center;

    gap: 8px;

}

.author-badge {

    display: inline-block;

    padding: 2px 8px;

    border-radius: 4px;

    background: rgba(37, 99, 235, 0.1);

    color: #0f364e;

    font-size: 0.75rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.05em;

}

.comment-date {

    font-size: 0.85rem;

    color: #94a3b8;

}

.comment-text {

    margin: 0;

    color: #475569;

    line-height: 1.6;

    font-size: 0.95rem;

}

.comment-reply-btn {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 6px 12px;

    background: transparent;

    border: none;

    color: #0f364e;

    font-size: 0.9rem;

    font-weight: 600;

    cursor: pointer;

    border-radius: 8px;

    transition: all 0.2s ease;

    margin-top: 4px;

}

.comment-reply-btn:hover {

    background: rgba(37, 99, 235, 0.1);

}

.comment-reply-btn i {

    font-size: 0.85rem;

    transform: scaleX(-1);

}

.comment-form {

    margin-top: 32px;

}

.comment-form-title {

    font-size: 1.2rem;

    font-weight: 700;

    color: #0f172a;

    margin: 0 0 20px;

}

.comment-form .form-label {

    font-size: 0.9rem;

    font-weight: 600;

    color: #475569;

    margin-bottom: 8px;

    display: block;

}

.comment-form .form-control {

    border-radius: 12px;

    border: 1px solid rgba(148, 163, 184, 0.3);

    padding: 12px 16px;

    font-size: 0.95rem;

    transition: all 0.2s ease;

}

.comment-form .form-control:focus {

    border-color: #0f364e;

    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);

}

.comment-form textarea.form-control {

    min-height: 120px;

    resize: vertical;

}

.comment-form .btn-primary {

    padding: 14px 28px;

    border-radius: 12px;

    font-weight: 600;

    font-size: 1rem;

}

.blog-detail-sidebar .blog-widget {

    margin-bottom: 18px;

}

.link-list {

    list-style: none;

    padding: 0;

    margin: 0;

    display: flex;

    flex-direction: column;

    gap: 10px;

}

.link-list a {

    text-decoration: none;

    color: #0f172a;

    font-weight: 600;

    display: inline-flex;

    gap: 10px;

    align-items: center;

}

.notfound-actions .btn {

    padding: 12px 26px;

    border-radius: 999px;

    font-weight: 600;

}

.post-job-panel {

    background: #ffffff;

    border-radius: 26px;

    border: 1px solid rgba(148, 163, 184, 0.16);

    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.08);

    padding: 32px;

}

.post-job-panel .panel-heading {

    justify-content: space-between;

    margin-bottom: 24px;

}

.panel-note {

    color: #94a3b8;

    font-size: 0.9rem;

}

.post-job-form {

    display: flex;

    flex-direction: column;

    gap: 28px;

}

.form-section {

    display: flex;

    flex-direction: column;

    gap: 18px;

}

.form-section h4 {

    margin: 0;

    font-size: 1.05rem;

    font-weight: 700;

    color: #0f172a;

}

.form-grid {

    display: grid;

    gap: 16px;

}

.form-grid.two-col {

    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

}

.form-grid.three-col {

    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

}

.form-field {

    display: flex;

    flex-direction: column;

    gap: 8px;

    font-size: 0.92rem;

    color: #475569;

}

.form-field span {

    font-weight: 600;

}

.form-field input,

.form-field select,

.form-field textarea {

    border-radius: 16px;

    border: 1px solid rgba(148, 163, 184, 0.35);

    background: #f8fafc;

    padding: 12px 16px;

    font-size: 0.95rem;

    transition: border 0.2s ease, box-shadow 0.2s ease;

}

.form-field textarea {

    resize: vertical;

}

.form-field input:focus,

.form-field select:focus,

.form-field textarea:focus {

    outline: none;

    border-color: #0f364e;

    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);

    background: #fff;

}

.form-field.checkbox {

    flex-direction: row;

    align-items: center;

    gap: 12px;

}

.form-field.checkbox input {

    width: 20px;

    height: 20px;

    border-radius: 6px;

}

.form-actions {

    display: flex;

    gap: 16px;

    flex-wrap: wrap;

    justify-content: flex-end;

}

.post-job-panel .btn {

    border-radius: 18px;

    padding: 12px 26px;

    font-weight: 600;

}

.package-detail-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));

    gap: 16px;

}

.package-detail-card {

    display: flex;

    gap: 14px;

    align-items: center;

    padding: 16px;

    border-radius: 18px;

    border: 1px solid rgba(148, 163, 184, 0.16);

    background: #f8fafc;

}

.package-detail-card span {

    display: block;

    font-size: 1.78rem;

    text-transform: uppercase;

    letter-spacing: 0.08em;

    color: #fff;

    font-weight: 700;

}

.package-detail-card strong {

    display: block;

    margin-top: 4px;

    color: #0f172a;

    font-size: 1.05rem;

}



.detail-icon.orange { background: linear-gradient(135deg, #f97316, #fb923c); }

.detail-icon.teal { background: linear-gradient(135deg, #0ea5e9, #14b8a6); }

.detail-icon.green { background: linear-gradient(135deg, #10b981, #22d3ee); }

.detail-icon.blue { background: linear-gradient(135deg, #0f364e, #0ea5e9); }

.detail-icon.danger { background: linear-gradient(135deg, #f43f5e, #fb7185); }

.recommended-card,

.following-card {

    background: #f8fafc;

    border-radius: 15px;

    padding: 22px;

    border: 1px solid rgba(148, 163, 184, 0.12);

    height: 100%;

}

.recommended-card h4 {

    margin: 8px 0;

    font-size: 1.05rem;

}

.recommended-card p {

    margin: 0 0 6px;

    color: #475569;

}

.recommended-meta {

    font-size: 0.85rem;

    color: #94a3b8;

    display: flex;

    flex-direction: column;

    gap: 4px;

}

.following-card h4 {

    margin: 0 0 6px;

    font-size: 1.05rem;

}

.following-card p {

    margin: 0 0 8px;

    color: #475569;

    line-height: 1.6;

}

.following-card span {

    font-weight: 600;

    color: #0f364e;

}



@media (max-width: 1199px) {

    .dashboard-layout {

        flex-direction: column;

    }

    .dashboard-sidebar {

        width: 100%;

    }

}



@media (max-width: 767px) {

    .dashboard-cover-profile {

        flex-direction: column;

        align-items: flex-start;

    }

    .dashboard-cover-profile ul {

        flex-direction: column;

        gap: 6px;

    }

    .dashboard-sidebar {

        padding: 24px;

    }

    .dashboard-nav li a {

        padding: 10px;

    }

}



.employer-dashboard .dashboard-main {

    gap: 28px;

    display: flex;

    flex-direction: column;

}

.employer-sidebar .sidebar-header {

    text-align: left;

}

.company-pill {

    display: inline-flex;

    align-items: center;

    padding: 6px 14px;

    border-radius: 999px;

    background: rgba(37, 99, 235, 0.12);

    color: #1d4ed8;

    font-weight: 600;

    font-size: 0.8rem;

    margin-top: 12px;

}

.employer-panel {

    background: #ffffff;

    border-radius: 26px;

    padding: 26px 30px;

    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.08);

}

.employer-upgrade-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

    gap: 18px;

}

.employer-upgrade-card {

    border: 1px solid rgba(148, 163, 184, 0.18);

    border-radius: 22px;

    padding: 22px;

    background: #f8fafc;

    display: flex;

    flex-direction: column;

    gap: 12px;

}

.employer-upgrade-card.active {

    background: linear-gradient(135deg, rgba(124, 255, 200, 0.25), rgba(59, 130, 246, 0.15));

    border-color: rgba(59, 130, 246, 0.35);

}

.employer-upgrade-card ul {

    list-style: none;

    padding: 0;

    margin: 0;

    display: flex;

    flex-direction: column;

    gap: 6px;

    color: #475569;

}

.upgrade-pill {

    display: inline-flex;

    padding: 4px 12px;

    border-radius: 999px;

    background: rgba(37, 99, 235, 0.12);

    color: #1d4ed8;

    font-weight: 600;

    font-size: 0.8rem;

}

.cv-upgrade-card {

    border: 1px solid rgba(148, 163, 184, 0.25);

    border-radius: 24px;

    padding: 24px;

    background: #f8fafc;

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

}

.cv-upgrade-card ul {

    list-style: none;

    padding: 0;

    margin: 12px 0 0;

    display: flex;

    flex-direction: column;

    gap: 6px;

    color: #475569;

}

.cv-upgrade-card h4 {

    margin: 10px 0 0;

}



/************************************************

        ==Dashboard Detail & Forms==

*************************************************/

.profile-settings .dashboard-main {

    gap: 22px;

}

.settings-header {

    background: #ffffff;

    border-radius: 26px;

    border: 1px solid rgba(148, 163, 184, 0.16);

    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.08);

    padding: 26px 30px;

    display: flex;

    flex-wrap: wrap;

    gap: 24px;

    align-items: center;

}

.settings-header .avatar-upload {

    text-align: center;

}

.settings-header .avatar-upload img {

    width: 110px;

    height: 110px;

    border-radius: 24px;

    object-fit: cover;

    margin-bottom: 10px;

}

.settings-header .upload-label {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    font-weight: 600;

    color: #0f364e;

    cursor: pointer;

}

.settings-header .upload-label input {

    display: none;

}

.settings-header-content span {

    display: inline-flex;

    background: rgba(37, 99, 235, 0.1);

    color: #0f364e;

    font-weight: 600;

    padding: 4px 12px;

    border-radius: 999px;

    font-size: 0.8rem;

    margin-bottom: 8px;

}

.settings-header-content h2 {

    margin: 0 0 8px;

}

.settings-header-content p {

    margin: 0 0 12px;

    color: #475569;

}

.settings-header-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    color: #475569;

}

.settings-header-meta span {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 6px 12px;

    border-radius: 10px;

    background: #f8fafc;

    font-weight: 600;

}

.settings-card {

    background: #ffffff;

    border-radius: 22px;

    border: 1px solid rgba(148, 163, 184, 0.14);

    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.06);

    padding: 26px 28px 30px;

    display: flex;

    flex-direction: column;

    gap: 18px;

	margin-bottom: 30px;

}

.settings-card-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 18px;

}

.settings-card-header h3 {

    margin: 0;

    font-size: 1.2rem;

    font-weight: 700;

}

.settings-card-header p {

    margin: 0;

    color: #475569;

}

.settings-grid {

    display: grid;

    gap: 18px;

    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

}

.settings-grid .grid-span-2 {

    grid-column: span 2;

}

.settings-grid .form-label {

    font-weight: 600;

    color: #0f172a;

    font-size: 0.92rem;

    margin-bottom: 6px;

}

.settings-grid .form-control,

.settings-grid .form-select {

    border-radius: 14px;

    border: 1px solid rgba(148, 163, 184, 0.35);

    background: #f8fafc;

    padding: 12px 16px;

    font-size: 0.95rem;

}

.settings-grid textarea.form-control {

    min-height: 120px;

}

.settings-grid .form-control:focus,

.settings-grid .form-select:focus {

    border-color: rgba(37, 99, 235, 0.7);

    box-shadow: 0 0 0 0.15rem rgba(37, 99, 235, 0.14);

}

.skill-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}

.skill-tag {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 6px 12px;

    border-radius: 999px;

    background: rgba(59, 130, 246, 0.14);

    color: #1d4ed8;

    font-weight: 600;

}

.add-skill-btn {

    border: 1px dashed rgba(148, 163, 184, 0.8);

    border-radius: 999px;

    padding: 6px 14px;

    background: transparent;

    color: #475569;

    font-weight: 600;

}

.form-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    justify-content: flex-end;

}

.form-actions .btn {

    border-radius: 12px;

    padding: 12px 22px;

    font-weight: 600;

}

.dashboard-page-header {

    background: #ffffff;

    border-radius: 24px;

    border: 1px solid rgba(148, 163, 184, 0.16);

    padding: 26px 30px;

    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.06);

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: space-between;

    gap: 18px;

}

.dashboard-page-header h1 {

    margin: 0;

    font-size: 1.7rem;

}

.dashboard-page-header p {

    margin: 6px 0 0;

    color: #475569;

}

.dashboard-page-header .btn {

    border-radius: 12px;

    font-weight: 600;

    padding: 12px 18px;

}

.dashboard-content-grid {

    display: grid;

    gap: 20px;

}

.dashboard-actions-grid {

    display: grid;

    gap: 18px;

    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

}

.action-card {

    background: #f8fafc;

    border-radius: 22px;

    border: 1px solid rgba(148, 163, 184, 0.12);

    padding: 20px 22px;

    display: flex;

    flex-direction: column;

    gap: 10px;

    box-shadow: 0 15px 40px rgba(15, 23, 42, 0.08);

}

.action-card .icon-square {

    width: 46px;

    height: 46px;

    border-radius: 14px;

    background: rgba(37, 99, 235, 0.12);

    color: #0f364e;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 1.2rem;

}

.action-card h4 {

    margin: 0;

    font-size: 1.05rem;

}

.action-card p {

    margin: 0;

    color: #475569;

}

.action-card .btn {

    margin-top: 12px;

    border-radius: 10px;

    font-weight: 600;

}

.list-card {

    background: #ffffff;

    border-radius: 22px;

    border: 1px solid rgba(148, 163, 184, 0.14);

    padding: 22px 24px;

    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.06);

}

.list-card h3 {

    margin-bottom: 16px;

}

.list-card ul {

    list-style: none;

    padding: 0;

    margin: 0;

    display: flex;

    flex-direction: column;

    gap: 14px;

}

.list-card li {

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

    padding-bottom: 14px;

    border-bottom: 1px solid rgba(148, 163, 184, 0.18);

}

.list-card li strong{font-weight: 700;}

.list-card li:last-child {

    border-bottom: none;

    padding-bottom: 0;

}

.pill {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 6px 12px;

    border-radius: 999px;

    background: rgba(37, 99, 235, 0.1);

    color: #1d4ed8;

    font-weight: 600;

}

.timeline-card {

    background: #ffffff;

    border-radius: 20px;

    border: 1px solid rgba(148, 163, 184, 0.14);

    padding: 24px;

    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.06);

}

.timeline-card ul {

    list-style: none;

    margin: 0;

    padding: 0;

    display: flex;

    flex-direction: column;

    gap: 14px;

}

.timeline-card li {

    display: flex;

    gap: 12px;

    align-items: flex-start;

}

.timeline-card li i {

    color: #0f364e;

    margin-top: 4px;

}

.version-card {

    background: #f8fafc;

    border-radius: 18px;

    border: 1px solid rgba(148, 163, 184, 0.15);

    padding: 18px 20px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

}

.version-card strong {

    font-size: 1rem;

}

.message-layout {

    background: #ffffff;

    border-radius: 24px;

    display: grid;

    grid-template-columns: 320px 1fr;

    overflow: hidden;

    box-shadow: 0 35px 80px rgba(15, 23, 42, 0.1);

}

.thread-list {

    background: #f8fafc;

    padding: 24px;

    border-right: 1px solid rgba(148, 163, 184, 0.2);

    display: flex;

    flex-direction: column;

    gap: 12px;

}

.thread-item {

    padding: 14px;

    border-radius: 10px;

    background: transparent;

    cursor: pointer;

    transition: background 0.2s ease, box-shadow 0.2s ease;

	border-left: 1px solid transparent;

}

.thread-item.active,

.thread-item:hover {

    background: #ffffff;

    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.08);

	border-left: 1px solid #33af91;

}

.thread-item strong {

    display: block;

    font-size: 0.95rem;

    color: #0f172a;

	font-weight: 600;

	margin-bottom: 5px;

}

.thread-item span {

    display: block;

    color: #64748b;

    font-size: 0.88rem;

	margin-bottom: 5px;

	

}

.thread-item small {

    color: #94a3b8;

}

.chat-window {

    padding: 24px 28px 26px;

    display: flex;

    flex-direction: column;

    gap: 18px;

    background: radial-gradient(circle at top, rgba(59,130,246,0.08), transparent 50%);

}

.chat-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

}

.chat-header .chat-meta {

    display: flex;

    flex-direction: column;

	gap: 5px;

	color: #555;

}

.chat-header .chat-meta h5 {

    margin: 0;

    font-size: 1.2rem;

}

.chat-header .status-dot {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 6px 10px;

    border-radius: 999px;

    background: rgba(59, 130, 246, 0.12);

    color: #33af91;

    font-weight: 600;

    font-size: 0.85rem;

}

.chat-body {

    flex: 1;

    overflow-y: auto;

    padding-right: 6px;

}

.chat-body::-webkit-scrollbar {

    width: 6px;

}

.chat-body::-webkit-scrollbar-thumb {

    background: rgba(148, 163, 184, 0.4);

    border-radius: 999px;

}

.chat-bubble {

    max-width: 80%;

    padding: 14px 18px;

    border-radius: 10px;

    margin-bottom: 12px;

    line-height: 1.5;

    background: #e0ecff;

    color: #0f172a;

}

.chat-bubble.me {

    margin-left: auto;

    background: #0f364e;

    color: #ffffff;

}

.chat-composer {

    display: flex;

    align-items: center;

    gap: 12px;

    background: #ffffff;

    border-radius: 18px;

    padding: 6px 8px 6px 18px;

    border: 1px solid rgba(148, 163, 184, 0.35);

}

.chat-composer input {

    border: none;

    flex: 1;

    font-size: 1rem;

    outline: none;

}

.chat-send-btn {

    border: none;

    background: linear-gradient(135deg, #0f364e, #3b82f6);

    color: #ffffff;

    border-radius: 14px;

    width: 48px;

    height: 42px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 1.1rem;

    box-shadow: 0 15px 25px rgba(37, 99, 235, 0.35);

}

.chat-empty {

    text-align: center;

    color: #94a3b8;

    padding: 40px 0;

}

.application-grid {

    margin-top: 10px;

}

.application-card,

.saved-card {

    background: #ffffff;

    border-radius: 26px;

    border: 1px solid rgba(148, 163, 184, 0.16);

    box-shadow: 0 30px 70px rgba(15, 23, 42, 0.08);

    padding: 24px 26px;

    display: flex;

    flex-direction: column;

    gap: 14px;

    height: 100%;

}

.saved-card {

    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.07);

}

.application-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

}

.status-chip {

    padding: 6px 14px;

    border-radius: 999px;

    font-weight: 700;

    font-size: 0.85rem;

}

.status-chip.interview { background: rgba(34,197,94,0.18); color: #166534; }

.status-chip.review { background: rgba(248,113,113,0.22); color: #b91c1c; }

.status-chip.offer { background: rgba(251,146,60,0.22); color: #c2410c; }

.status-chip.archived { background: rgba(148,163,184,0.25); color: #475569; }

.status-chip.fulltime { background: rgba(74,222,128,0.18); color: #15803d; }

.status-chip.contract { background: rgba(248,187,109,0.3); color: #b45309; }

.application-title h4 {

    margin-bottom: 10px;

    font-size: 1.2rem;

}

.application-title h4 a{color: #333; font-weight: 600;}

.application-title p {

    margin: 0;

    color: #475569;

}

.application-location {

    color: #0f364e;

    font-weight: 600;

    margin-bottom: 10px;

}

.application-location i {

    margin-right: 6px;

}

.application-pill {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    background: rgba(59, 130, 246, 0.1);

    color: #1d4ed8;

    padding: 8px 14px;

    border-radius: 999px;

    font-weight: 600;

}

.application-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 14px;

    margin-top: auto;

}

.application-meta {

    display: flex;

    align-items: center;

    gap: 12px;

}

.meta-avatar {

    width: 44px;

    height: 44px;

    border-radius: 16px;

    background: rgba(15, 23, 42, 0.05);

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

}

.meta-avatar img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.meta-label {

    display: block;

    font-size: 0.85rem;

    color: #94a3b8;

}

.meta-value {

    display: block;

    font-size: 0.95rem;

    font-weight: 600;

    color: #0f172a;

}

.table-modern {

    width: 100%;

    border-collapse: collapse;

}

.table-modern thead {

    background: #f8fafc;

    text-transform: uppercase;

    font-size: 0.8rem;

    letter-spacing: 0.05em;

}

.table-modern th,

.table-modern td {

    padding: 14px 18px;

    border-bottom: 1px solid rgba(148, 163, 184, 0.2);

}

.table-modern tbody tr:last-child td {

    border-bottom: none;

}

.toggle-switch {

    position: relative;

    width: 48px;

    height: 26px;

    display: inline-block;

}

.toggle-switch input {

    opacity: 0;

    width: 0;

    height: 0;

}

.toggle-slider {

    position: absolute;

    inset: 0;

    background: rgba(148, 163, 184, 0.5);

    border-radius: 999px;

    transition: background 0.2s ease;

}

.toggle-slider::before {

    content: "";

    position: absolute;

    height: 20px;

    width: 20px;

    left: 3px;

    top: 3px;

    background: #ffffff;

    border-radius: 50%;

    box-shadow: 0 5px 12px rgba(15, 23, 42, 0.2);

    transition: transform 0.2s ease;

}

.toggle-switch input:checked + .toggle-slider {

    background: linear-gradient(135deg, #0f364e, #7c3aed);

}

.toggle-switch input:checked + .toggle-slider::before {

    transform: translateX(22px);

}



@media (max-width: 991px) {

    .message-layout {

        grid-template-columns: 1fr;

    }

    .settings-grid .grid-span-2 {

        grid-column: span 1;

    }

    .thread-list {

        border-right: 0;

        border-bottom: 1px solid rgba(148, 163, 184, 0.2);

    }

    .application-footer {

        flex-direction: column;

        align-items: flex-start;

        gap: 10px;

    }

    .current-plan-card {

        flex-direction: column;

        align-items: flex-start;

    }

    .plan-metrics {

        grid-template-columns: 1fr;

    }

    .blog-hero-title {

        font-size: 2rem;

    }

    .blog-list-item {

        flex-direction: column;

        gap: 18px;

    }

    .blog-list-image {

        width: 100%;

    }

    .blog-list-image img {

        height: 240px;

    }

    .blog-title {

        font-size: 1.3rem;

    }

    .comment-section {

        padding: 24px;

    }

    .comment-item.comment-reply {

        margin-left: 0;

        padding-left: 0;

        border-left: none;

        padding-top: 20px;

        border-top: 1px solid rgba(148, 163, 184, 0.15);

        margin-top: 8px;

    }

    .comment-form .btn-primary {

        width: 100%;

    }

    .blog-grid-shell .blog-grid {

        grid-template-columns: 1fr;

    }

}



/************************************************

           ==Employer Listing Pages==

*************************************************/

.employer-hero {

    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(16, 185, 129, 0.08) 100%);

}

.employers-board {

    padding: 60px 0 80px;

}

.employer-card {

    background: #ffffff;

    border-radius: 20px;

    padding: 22px;

    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);

    border: 1px solid rgba(148, 163, 184, 0.16);

    display: flex;

    flex-direction: column;

    gap: 18px;

    height: 100%;

    transition: all 0.3s ease;

}

.employer-card:hover {

    transform: translateY(-4px);

    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.12);

}

.employer-card-header {

    display: flex;

    align-items: flex-start;

    gap: 14px;

    position: relative;

}

.employer-logo {

    width: 72px;

    height: 72px;

    border-radius: 16px;

    overflow: hidden;

    flex-shrink: 0;

    background: #f8fafc;

    padding: 8px;

    border: 1px solid rgba(148, 163, 184, 0.2);

}

.employer-logo img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    border-radius: 10px;

}

.employer-info {

    flex: 1;

    min-width: 0;

}

.employer-badge {

    display: inline-flex;

    align-items: center;

    padding: 4px 10px;

    border-radius: 6px;

    font-size: 0.72rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.06em;

    margin-bottom: 6px;

}

.employer-badge.verified {

    background: rgba(16, 185, 129, 0.15);

    color: #059669;

}

.employer-card h4 {

    margin: 0 0 4px;

    font-size: 1.12rem;

    font-weight: 700;

    color: #0f172a;

    line-height: 1.3;

}

.employer-card h4 a {

    color: inherit;

    text-decoration: none;

    transition: color 0.2s ease;

}

.employer-card h4 a:hover {

    color: #0f364e;

}

.employer-info p {

    margin: 0;

    color: #64748b;

    font-size: 0.88rem;

    line-height: 1.4;

}

.employer-follow {

    position: absolute;

    top: 0;

    right: 0;

    border: none;

    background: #f1f5f9;

    width: 38px;

    height: 38px;

    border-radius: 10px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    color: #64748b;

    transition: all 0.2s ease;

    cursor: pointer;

}

.employer-follow:hover {

    background: #0f364e;

    color: #fff;

}

.employer-meta {

    display: flex;

    flex-direction: column;

    gap: 8px;

    color: #475569;

    font-size: 0.9rem;

    padding: 12px 0;

    border-top: 1px solid rgba(148, 163, 184, 0.12);

    border-bottom: 1px solid rgba(148, 163, 184, 0.12);

}

.employer-meta > div {

    display: flex;

    align-items: center;

    gap: 8px;

}

.employer-meta i {

    color: #94a3b8;

    font-size: 0.85rem;

}

.employer-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

}

.employer-tags span {

    padding: 5px 11px;

    border-radius: 8px;

    background: rgba(37, 99, 235, 0.1);

    color: #1d4ed8;

    font-size: 0.8rem;

    font-weight: 600;

}

.employer-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    flex-wrap: wrap;

    margin-top: auto;

    padding-top: 12px;

}

.employer-stats {

    display: flex;

    flex-direction: column;

    gap: 4px;

}

.employer-stats span {

    font-size: 0.75rem;

    color: #94a3b8;

    text-transform: uppercase;

    letter-spacing: 0.05em;

}

.employer-stats strong {

    font-size: 0.95rem;

    color: #0f172a;

    font-weight: 700;

}

.employer-actions .btn {

    border-radius: 10px;

    font-weight: 600;

    font-size: 0.9rem;

    padding: 8px 18px;

}



/* Employer List View */

.employer-list {

    display: flex;

    flex-direction: column;

    gap: 20px;

}

.employer-list-item {

    background: #ffffff;

    border-radius: 22px;

    padding: 26px;

    border: 1px solid rgba(148, 163, 184, 0.16);

    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.06);

    display: flex;

    gap: 22px;

    align-items: stretch;

    transition: all 0.3s ease;

}

.employer-list-item:hover {

    transform: translateY(-2px);

    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.1);

}

.employer-list-logo {

    width: 90px;

    height: 90px;

    border-radius: 18px;

    overflow: hidden;

    flex-shrink: 0;

    background: #f8fafc;

    padding: 10px;

    border: 1px solid rgba(148, 163, 184, 0.2);

}

.employer-list-logo img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    border-radius: 12px;

}

.employer-list-main {

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 14px;

    min-width: 0;

}

.employer-list-top {

    display: flex;

    justify-content: space-between;

    gap: 16px;

    align-items: flex-start;

}

.employer-list-top h4 {

    margin: 0;

    font-size: 1.2rem;

    font-weight: 700;

}

.employer-list-top h4 a {

    color: #0f172a;

    text-decoration: none;

    transition: color 0.2s ease;

}

.employer-list-top h4 a:hover {

    color: #0f364e;

}

.employer-list-top p {

    margin: 6px 0 0;

    color: #64748b;

    font-size: 0.92rem;

    line-height: 1.5;

}

.employer-summary {

    margin: 0;

    color: #475569;

    font-size: 0.95rem;

    line-height: 1.6;

}

.employer-list-meta {

    width: 200px;

    flex-shrink: 0;

    display: flex;

    flex-direction: column;

    gap: 14px;

    padding-left: 16px;

    border-left: 1px solid rgba(148, 163, 184, 0.15);

}

.employer-list-meta .employer-stats {

    display: flex;

    flex-direction: column;

    gap: 10px;

}

.employer-list-meta .employer-stats > div {

    display: flex;

    align-items: center;

    gap: 8px;

    color: #475569;

    font-size: 0.9rem;

}

.employer-list-meta .employer-stats i {

    color: #94a3b8;

    font-size: 0.85rem;

}

.employer-list-meta .btn {

    border-radius: 12px;

    font-weight: 600;

    padding: 10px 20px;

}



@media (max-width: 991px) {

    .employer-list-item {

        flex-direction: column;

    }

    .employer-list-meta {

        width: 100%;

        padding-left: 0;

        border-left: none;

        padding-top: 16px;

        border-top: 1px solid rgba(148, 163, 184, 0.15);

    }

    .employer-list-meta .employer-stats {

        flex-direction: row;

        flex-wrap: wrap;

        gap: 16px;

    }

    .employer-card-header {

        flex-wrap: wrap;

    }

    .employer-follow {

        position: relative;

        top: auto;

        right: auto;

    }

}



/************************************************

           ==Packages/Pricing Page==

*************************************************/

.packages-hero {

    background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(16, 185, 129, 0.1) 100%);

    padding: 80px 0 60px;

    text-align: center;

}

.packages-hero-content {

    max-width: 700px;

    margin: 0 auto;

}

.packages-badge {

    display: inline-block;

    padding: 8px 20px;

    border-radius: 999px;

    background: rgba(37, 99, 235, 0.15);

    color: #0f364e;

    font-size: 0.85rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.08em;

    margin-bottom: 20px;

}

.packages-hero-title {

    font-size: 2.8rem;

    font-weight: 800;

    color: #0f172a;

    margin: 0 0 16px;

    line-height: 1.2;

}

.packages-hero-subtitle {

    font-size: 1.1rem;

    color: #64748b;

    margin: 0;

    line-height: 1.6;

}

.packages-section {

    padding: 60px 0 100px;

}

.pricing-toggle-wrapper {

    display: flex;

    justify-content: center;

    margin-bottom: 50px;

}

.pricing-toggle {

    display: flex;

    align-items: center;

    gap: 16px;

    padding: 12px 24px;

    background: #ffffff;

    border-radius: 50px;

    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);

    border: 1px solid rgba(148, 163, 184, 0.2);

}

.toggle-label {

    font-size: 0.95rem;

    font-weight: 600;

    color: #475569;

}

.save-badge {

    display: inline-block;

    padding: 2px 8px;

    border-radius: 4px;

    background: rgba(16, 185, 129, 0.15);

    color: #059669;

    font-size: 0.75rem;

    font-weight: 700;

    margin-left: 6px;

}

.toggle-switch {

    position: relative;

    display: inline-block;

    width: 56px;

    height: 30px;

}

.toggle-switch input {

    opacity: 0;

    width: 0;

    height: 0;

}

.toggle-slider {

    position: absolute;

    cursor: pointer;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background-color: #cbd5e1;

    transition: 0.3s;

    border-radius: 30px;

}

.toggle-slider:before {

    position: absolute;

    content: "";

    height: 22px;

    width: 22px;

    left: 4px;

    bottom: 4px;

    background-color: #ffffff;

    transition: 0.3s;

    border-radius: 50%;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

}

.toggle-switch input:checked + .toggle-slider {

    background-color: #0f364e;

}

.toggle-switch input:checked + .toggle-slider:before {

    transform: translateX(26px);

}

.pricing-cards {

    margin-bottom: 60px;

}

.pricing-card {

    background: #ffffff;

    border-radius: 24px;

    padding: 32px 24px;

    border: 2px solid rgba(148, 163, 184, 0.18);

    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08);

    display: flex;

    flex-direction: column;

    height: 100%;

    transition: all 0.3s ease;

    position: relative;

}

.pricing-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 28px 55px rgba(15, 23, 42, 0.12);

    border-color: rgba(37, 99, 235, 0.3);

}

.pricing-card.featured {

    border-color: #0f364e;

    box-shadow: 0 24px 50px rgba(37, 99, 235, 0.15);

    transform: scale(1.05);

}

.pricing-card.featured:hover {

    transform: scale(1.05) translateY(-8px);

}

.pricing-card-badge {

    position: absolute;

    top: -12px;

    left: 50%;

    transform: translateX(-50%);

    padding: 6px 20px;

    border-radius: 20px;

    background: #0f364e;

    color: #ffffff;

    font-size: 0.75rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.05em;

}

.pricing-card-header {

    text-align: center;

    margin-bottom: 28px;

    padding-bottom: 24px;

    border-bottom: 1px solid rgba(148, 163, 184, 0.15);

}

.pricing-plan-name {

    font-size: 1.5rem;

    font-weight: 700;

    color: #0f172a;

    margin: 0 0 8px;

}

.pricing-plan-desc {

    font-size: 0.95rem;

    color: #64748b;

    margin: 0 0 20px;

}

.pricing-price {

    display: flex;

    align-items: baseline;

    justify-content: center;

    gap: 4px;

}

.price-currency {

    font-size: 1.2rem;

    font-weight: 600;

    color: #475569;

}

.price-amount {

    font-size: 3rem;

    font-weight: 800;

    color: #0f172a;

    line-height: 1;

}

.price-period {

    font-size: 0.95rem;

    color: #94a3b8;

    font-weight: 500;

}

.pricing-card-body {

    flex: 1;

    margin-bottom: 24px;

}

.pricing-features {

    list-style: none;

    padding: 0;

    margin: 0;

    display: flex;

    flex-direction: column;

    gap: 14px;

}

.pricing-features li {

    display: flex;

    align-items: center;

    gap: 12px;

    font-size: 0.95rem;

    color: #475569;

}

.pricing-features li i {

    width: 20px;

    height: 20px;

    border-radius: 50%;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 0.7rem;

    flex-shrink: 0;

}

.pricing-features li:not(.disabled) i.fa-check {

    background: rgba(16, 185, 129, 0.15);

    color: #059669;

}

.pricing-features li.disabled {

    color: #cbd5e1;

}

.pricing-features li.disabled i.fa-times {

    background: rgba(148, 163, 184, 0.15);

    color: #94a3b8;

}

.pricing-card-footer {

    margin-top: auto;

}

.pricing-card-footer .btn {

    border-radius: 12px;

    padding: 14px 24px;

    font-weight: 600;

    font-size: 1rem;

}

.packages-features-section {

    margin-top: 80px;

    padding-top: 60px;

    border-top: 1px solid rgba(148, 163, 184, 0.2);

}

.feature-card {

    text-align: center;

    padding: 32px 24px;

    background: #f8fafc;

    border-radius: 20px;

    border: 1px solid rgba(148, 163, 184, 0.1);

    height: 100%;

    transition: all 0.3s ease;

}

.feature-card:hover {

    transform: translateY(-4px);

    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);

    background: #ffffff;

}

.feature-icon {

    width: 64px;

    height: 64px;

    border-radius: 16px;

    background: linear-gradient(135deg, rgba(37, 99, 235, 0.15), rgba(16, 185, 129, 0.15));

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 20px;

}

.feature-icon i {

    font-size: 1.8rem;

    color: #0f364e;

}

.feature-card h4 {

    font-size: 1.2rem;

    font-weight: 700;

    color: #0f172a;

    margin: 0 0 12px;

}

.feature-card p {

    font-size: 0.95rem;

    color: #64748b;

    margin: 0;

    line-height: 1.6;

}



@media (max-width: 991px) {

    .packages-hero-title {

        font-size: 2.2rem;

    }

    .pricing-card.featured {

        transform: scale(1);

    }

    .pricing-card.featured:hover {

        transform: translateY(-8px);

    }

    .pricing-toggle {

        flex-wrap: wrap;

        justify-content: center;

    }

}



@media (max-width: 767px) {

    .packages-hero {

        padding: 60px 0 40px;

    }

    .packages-hero-title {

        font-size: 1.8rem;

    }

    .packages-hero-subtitle {

        font-size: 1rem;

    }

    .packages-section {

        padding: 40px 0 60px;

    }

    .price-amount {

        font-size: 2.4rem;

    }

    .pricing-card {

        padding: 24px 20px;

    }

}



/************************************************

           ==Build Resume Page==

*************************************************/



/* Panel Header */

.panel-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 24px;

}

.panel-header h3 {

    font-size: 1.5rem;

    font-weight: 700;

    color: #0f172a;

    margin: 0;

}

.panel-header .btn {

    width: 40px;

    height: 40px;

    padding: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    font-size: 1.1rem;

}



/* Resume Table */

.resume-table {

    margin: 0;

    border-collapse: separate;

    border-spacing: 0;

}

.resume-table thead th {

    background: #f8fafc;

    color: #475569;

    font-weight: 600;

    font-size: 0.9rem;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    padding: 14px 16px;

    border-bottom: 2px solid #e2e8f0;

    border-top: none;

}

.resume-table tbody td {

    padding: 16px;

    border-bottom: 1px solid #e2e8f0;

    vertical-align: middle;

    color: #334155;

}

.resume-table tbody tr:last-child td {

    border-bottom: none;

}

.resume-table tbody tr:hover {

    background: #f8fafc;

}

.resume-table a.text-primary {

    color: #0f364e !important;

    text-decoration: none;

    font-weight: 500;

}

.resume-table a.text-primary:hover {

    text-decoration: underline;

}



/* Action Icons */

.action-icons {

    display: flex;

    align-items: center;

    gap: 12px;

}

.action-icons a {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 32px;

    height: 32px;

    border-radius: 6px;

    transition: all 0.2s ease;

    text-decoration: none;

}

.action-icons a:hover {

    background: #f1f5f9;

    transform: translateY(-2px);

}

.action-icons a.text-primary {

    color: #0f364e !important;

}

.action-icons a.text-dark {

    color: #334155 !important;

}

.action-icons a.text-danger {

    color: #ef4444 !important;

}



/* Projects Grid */

.projects-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

    gap: 24px;

}

.project-card {

    background: #ffffff;

    border-radius: 16px;

    border: 1px solid rgba(148, 163, 184, 0.16);

    overflow: hidden;

    transition: all 0.3s ease;

    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);

}

.project-card:hover {

    transform: translateY(-4px);

    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);

    border-color: rgba(148, 163, 184, 0.24);

}

.project-image {

    width: 100%;

    height: 200px;

    overflow: hidden;

    background: #f1f5f9;

}

.project-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.3s ease;

}

.project-card:hover .project-image img {

    transform: scale(1.05);

}

.project-content {

    padding: 20px;

}

.project-content h4 {

    font-size: 1.2rem;

    font-weight: 700;

    color: #0f172a;

    margin-bottom: 8px;

}

.project-date {

    font-size: 0.85rem;

    color: #64748b;

    margin-bottom: 10px;

}

.project-description {

    font-size: 0.9rem;

    color: #475569;

    line-height: 1.6;

    margin-bottom: 16px;

}

.project-actions {

    display: flex;

    gap: 16px;

    padding-top: 12px;

    border-top: 1px solid #e2e8f0;

}

.project-actions a {

    font-size: 0.9rem;

    font-weight: 500;

    text-decoration: none;

    transition: all 0.2s ease;

}

.project-actions a.text-primary:hover {

    text-decoration: underline;

}

.project-actions a.text-danger:hover {

    text-decoration: underline;

}



/* Experience Timeline */

.dashboard-main .experience-timeline {

    display: flex;

    flex-direction: column;

    gap: 30px;

    position: relative;

    padding-left: 0;

}

.experience-item {

    position: relative;

    display: flex;

    gap: 20px;

}

.timeline-marker {

    position: absolute;

    left: -40px;

    top: 0;

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background: #cbd5e1;

    border: 3px solid #ffffff;

    box-shadow: 0 0 0 2px #e2e8f0;

    z-index: 1;

}

.dashboard-main  .experience-item:not(:last-child)::after {

   display: none;

}

.experience-content {

    flex: 1;

    background: #ffffff;

    border-radius: 12px;

    border: 1px solid rgba(148, 163, 184, 0.16);

    padding: 20px;

    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);

}

.experience-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    margin-bottom: 12px;

}

.experience-header h4 {

    font-size: 1.25rem;

    font-weight: 700;

    color: #0f172a;

    margin: 0;

}

.experience-actions {

    display: flex;

    gap: 12px;

}

.experience-actions a {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 32px;

    height: 32px;

    border-radius: 6px;

    transition: all 0.2s ease;

    text-decoration: none;

}

.experience-actions a:hover {

    background: #f1f5f9;

}

.experience-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 16px;

    margin-bottom: 12px;

    font-size: 0.9rem;

    color: #64748b;

}

.experience-meta span {

    display: flex;

    align-items: center;

    gap: 6px;

}

.experience-meta i {

    color: #94a3b8;

    font-size: 0.85rem;

}

.experience-content p {

    color: #475569;

    line-height: 1.7;

    margin: 0;

    font-size: 0.95rem;

}



/* Education Timeline */

.dashboard-main  .education-timeline {

    display: flex;

    flex-direction: column;

    gap: 32px;

    position: relative;

    padding-left: 0;

}

.education-item {

    position: relative;

    display: flex;

    gap: 20px;

}

.education-item .timeline-marker {

    position: absolute;

    left: -40px;

    top: 0;

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background: #cbd5e1;

    border: 3px solid #ffffff;

    box-shadow: 0 0 0 2px #e2e8f0;

    z-index: 1;

}

.education-item:not(:last-child)::after {

    content: '';

    position: absolute;

    left: -34px;

    top: 12px;

    width: 2px;

    height: calc(100% + 20px);

    background: #e2e8f0;

}

.education-content {

    flex: 1;

    background: #ffffff;

    border-radius: 12px;

    border: 1px solid rgba(148, 163, 184, 0.16);

    padding: 20px;

    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);

}

.education-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    margin-bottom: 12px;

}

.education-header h4 {

    font-size: 1.25rem;

    font-weight: 700;

    color: #0f172a;

    margin: 0;

}

.education-actions {

    display: flex;

    gap: 12px;

}

.education-actions a {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 32px;

    height: 32px;

    border-radius: 6px;

    transition: all 0.2s ease;

    text-decoration: none;

}

.education-actions a:hover {

    background: #f1f5f9;

}

.education-summary {

    font-size: 0.9rem;

    color: #64748b;

    margin-bottom: 12px;

}

.education-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 16px;

    font-size: 0.9rem;

    color: #64748b;

}

.education-meta span {

    display: flex;

    align-items: center;

    gap: 6px;

}

.education-meta i {

    color: #94a3b8;

    font-size: 0.85rem;

}



/* Responsive */

@media (max-width: 991px) {

    .projects-grid {

        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));

        gap: 20px;

    }

    .experience-timeline,

    .education-timeline {

        padding-left: 24px;

    }

    .timeline-marker {

        left: -32px;

    }

    .experience-item:not(:last-child)::after,

    .education-item:not(:last-child)::after {

        left: -26px;

    }

}



@media (max-width: 767px) {

    .testimonials-section, .cities-section, .industries-section, .category-section, .company-section{padding: 30px 0;}

    .userloginbox{margin-bottom: 30px; border-radius: 15px;}

    .userloginbox h3{font-size: 22px;}

    .dashboard-section{padding: 40px 0;}

    .projects-grid {

        grid-template-columns: 1fr;

    }

    .panel-header {

        align-items: flex-start;

        gap: 16px;

    }

    .panel-header h3{font-size: 1.2rem;}

    .action-icons{gap: 5px;}

    .action-icons a{width: 30px; height: 30px;}

    .panel-header .btn {

        align-self: flex-end;

    }

    .experience-timeline,

    .education-timeline {

        padding-left: 20px;

    }

    .timeline-marker {

        left: -28px;

        width: 10px;

        height: 10px;

    }

    .dashboard-main{width: 100%;}

    .experience-item:not(:last-child)::after,

    .education-item:not(:last-child)::after {

        left: -23px;

    }

    .experience-meta,

    .education-meta {

        flex-direction: column;

        gap: 8px;

    }

    .resume-table {

        font-size: 0.9rem;

    }

    .resume-table thead th,

    .resume-table tbody td {

        padding: 12px;

    }

}



/************************************************

        ==Company Section Alt (index2.html)==

*************************************************/



.company-section-alt {

    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);

    padding-top: 80px;

    padding-bottom: 80px;

}



.company-grid-alt {

    margin-top: 40px;

}



.company-card-alt {

    display: block;

    background: #ffffff;

    border-radius: 20px;

    border: 1px solid rgba(148, 163, 184, 0.2);

    padding: 0;

    text-decoration: none;

    transition: all 0.3s ease;

    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);

    overflow: hidden;

    height: 100%;

    display: flex;

    flex-direction: column;

}



.company-card-alt:hover {

    transform: translateY(-6px);

    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);

    border-color: rgba(37, 99, 235, 0.3);

    text-decoration: none;

}



.company-card-alt-header {

    position: relative;

    padding: 24px 24px 16px;

    background: linear-gradient(135deg, #f8fafc 0%, #eef4ff 100%);

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

}



.company-logo-alt {

    width: 80px;

    height: 80px;

    border-radius: 16px;

    background: #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 12px;

    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);

    overflow: hidden;

    flex-shrink: 0;

}



.company-logo-alt img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    border-radius: 8px;

}



.company-badge-alt {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    background: #0f364e;

    color: #ffffff;

    padding: 6px 12px;

    border-radius: 20px;

    font-size: 0.85rem;

    font-weight: 600;

    white-space: nowrap;

}



.company-card-alt-body {

    padding: 20px 24px;

    flex: 1;

}



.company-card-alt-body h5 {

    font-size: 1.3rem;

    font-weight: 700;

    color: #0f172a;

    margin: 0 0 12px 0;

    line-height: 1.4;

}



.company-meta-alt {

    display: flex;

    flex-direction: column;

    gap: 8px;

}



.company-meta-alt span {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 0.9rem;

    color: #64748b;

}



.company-meta-alt i {

    color: #94a3b8;

    font-size: 0.85rem;

}



.company-card-alt-footer {

    padding: 16px 24px 24px;

    border-top: 1px solid rgba(148, 163, 184, 0.1);

    margin-top: auto;

}



.company-link-alt {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #0f364e;

    font-size: 0.95rem;

    font-weight: 600;

    transition: all 0.2s ease;

}



.company-card-alt:hover .company-link-alt {

    gap: 12px;

    color: #1d4ed8;

}



.company-link-alt i {

    transition: transform 0.2s ease;

}



.company-card-alt:hover .company-link-alt i {

    transform: translateX(4px);

}



.company-viewall-alt {

    margin-top: 50px;

}



/* Responsive */

@media (max-width: 991px) {

    .company-section-alt {

        padding-top: 60px;

        padding-bottom: 60px;

    }

    .company-card-alt-header {

        padding: 20px 20px 14px;

    }

    .company-logo-alt {

        width: 70px;

        height: 70px;

    }

    .company-card-alt-body {

        padding: 18px 20px;

    }

    .company-card-alt-body h5 {

        font-size: 1.2rem;

    }

    .company-card-alt-footer {

        padding: 14px 20px 20px;

    }

}



@media (max-width: 767px) {

    .company-section-alt {

        padding-top: 40px;

        padding-bottom: 40px;

    }

    .company-grid-alt {

        margin-top: 30px;

    }

    .company-card-alt-header {

        padding: 18px 18px 12px;

        flex-direction: column;

        gap: 12px;

        align-items: flex-start;

    }

    .company-badge-alt {

        align-self: flex-end;

    }

    .company-logo-alt {

        width: 60px;

        height: 60px;

    }

    .company-card-alt-body {

        padding: 16px 18px;

    }

    .company-card-alt-body h5 {

        font-size: 1.1rem;

    }

    .company-card-alt-footer {

        padding: 12px 18px 18px;

    }

}



/************************************************

        ==How It Works Section Alt (index2.html)==

*************************************************/



.howit-section-alt {

    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);

    padding-top: 70px;

    padding-bottom: 70px;

    position: relative;

    overflow: hidden;

}



.howit-section-alt::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: radial-gradient(circle at 30% 50%, rgba(37, 99, 235, 0.15) 0%, transparent 50%),

                radial-gradient(circle at 70% 50%, rgba(139, 92, 246, 0.15) 0%, transparent 50%);

    pointer-events: none;

}



.howit-header-alt {

    position: relative;

    z-index: 1;

    margin-bottom: 40px;

}



.howit-badge-alt {

    display: inline-block;

    background: rgba(37, 99, 235, 0.2);

    color: #0ea5e9;

    padding: 8px 20px;

    border-radius: 30px;

    font-size: 0.85rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.1em;

    margin-bottom: 20px;

    border: 1px solid rgba(37, 99, 235, 0.3);

}



.howit-title-alt {

    font-size: 3rem;

    font-weight: 800;

    color: #ffffff;

    margin: 0 0 16px 0;

    line-height: 1.2;

}



.howit-subtitle-alt {

    font-size: 1.1rem;

    color: #cbd5e1;

    max-width: 600px;

    margin: 0 auto;

    line-height: 1.6;

}



.howit-grid-alt {

    position: relative;

    z-index: 1;

    margin-top: 0;

}



.howit-card-alt {

    background: rgba(255, 255, 255, 0.05);

    backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 24px;

    padding: 40px 32px;

    text-align: center;

    position: relative;

    transition: all 0.4s ease;

    height: 100%;

    display: flex;

    flex-direction: column;

    overflow: hidden;

}



.howit-card-alt::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 4px;

    background: linear-gradient(90deg, #0f364e 0%, #8b5cf6 100%);

    transform: scaleX(0);

    transition: transform 0.4s ease;

}



.howit-card-alt:hover {

    background: rgba(255, 255, 255, 0.08);

    border-color: rgba(37, 99, 235, 0.4);

    transform: translateY(-8px);

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);

}



.howit-card-alt:hover::before {

    transform: scaleX(1);

}



.howit-number-alt {

    position: absolute;

    top: 20px;

    right: 20px;

    font-size: 4rem;

    font-weight: 900;

    color: rgba(255, 255, 255, 0.05);

    line-height: 1;

    font-family: 'Montserrat', sans-serif;

}



.howit-icon-alt {

    width: 100px;

    height: 100px;

    margin: 0 auto 24px;

    background: linear-gradient(135deg, #0f364e 0%, #8b5cf6 100%);

    border-radius: 24px;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    z-index: 1;

    box-shadow: 0 10px 30px rgba(37, 99, 235, 0.3);

    transition: all 0.4s ease;

}



.howit-card-alt:hover .howit-icon-alt {

    transform: scale(1.1) rotate(5deg);

    box-shadow: 0 15px 40px rgba(37, 99, 235, 0.4);

}



.howit-icon-alt i {

    font-size: 2.5rem;

    color: #ffffff;

}



.howit-card-title-alt {

    font-size: 1.5rem;

    font-weight: 700;

    color: #ffffff;

    margin: 0 0 16px 0;

    line-height: 1.3;

}



.howit-card-text-alt {

    font-size: 1rem;

    color: #cbd5e1;

    line-height: 1.7;

    margin: 0 0 24px 0;

    flex: 1;

}



.howit-arrow-alt {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 48px;

    height: 48px;

    background: rgba(37, 99, 235, 0.2);

    border: 1px solid rgba(37, 99, 235, 0.3);

    border-radius: 50%;

    color: #0ea5e9;

    font-size: 1.2rem;

    transition: all 0.3s ease;

    margin-top: auto;

}



.howit-card-alt:hover .howit-arrow-alt {

    background: rgba(37, 99, 235, 0.3);

    border-color: rgba(37, 99, 235, 0.5);

    transform: translateX(8px);

    color: #ffffff;

}



/* Responsive */

@media (max-width: 991px) {

    .howit-section-alt {

        padding-top: 80px;

        padding-bottom: 80px;

    }

    .howit-title-alt {

        font-size: 2.5rem;

    }

    .howit-header-alt {

        margin-bottom: 50px;

    }

    .howit-card-alt {

        padding: 32px 24px;

    }

    .howit-icon-alt {

        width: 90px;

        height: 90px;

    }

    .howit-icon-alt i {

        font-size: 2.2rem;

    }

}



@media (max-width: 767px) {

    .howit-section-alt {

        padding-top: 60px;

        padding-bottom: 60px;

    }

    .howit-title-alt {

        font-size: 2rem;

    }

    .howit-subtitle-alt {

        font-size: 1rem;

    }

    .howit-header-alt {

        margin-bottom: 40px;

    }

    .howit-grid-alt {

        margin-top: 40px;

    }

    .howit-card-alt {

        padding: 28px 20px;

    }

    .howit-number-alt {

        font-size: 3rem;

        top: 16px;

        right: 16px;

    }

    .howit-icon-alt {

        width: 80px;

        height: 80px;

        margin-bottom: 20px;

    }

    .howit-icon-alt i {

        font-size: 2rem;

    }

    .howit-card-title-alt {

        font-size: 1.3rem;

    }

    .howit-card-text-alt {

        font-size: 0.95rem;

    }

}



/************************************************

        ==Video Section New (index2.html)==

*************************************************/



.video-section-new {

    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);

    padding-top: 80px;

    padding-bottom: 80px;

    position: relative;

}



.video-container-new {

    max-width: 1000px;

    margin: 0 auto;

}



.video-header-new {

    margin-bottom: 50px;

}



.video-badge-new {

    display: inline-block;

    background: rgba(37, 99, 235, 0.1);

    color: #0f364e;

    padding: 8px 20px;

    border-radius: 30px;

    font-size: 0.85rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.1em;

    margin-bottom: 20px;

}



.video-title-new {

    font-size: 2.8rem;

    font-weight: 800;

    color: #0f172a;

    margin: 0 0 20px 0;

    line-height: 1.2;

}



.video-title-accent {

    color: #0f364e;

    position: relative;

}



.video-description-new {

    font-size: 1.1rem;

    color: #64748b;

    line-height: 1.7;

    max-width: 900px;

    margin: 0 auto;

}



.video-player-new {

    position: relative;

    margin-top: 40px;

}



.video-thumbnail-new {

    position: relative;

    border-radius: 24px;

    overflow: hidden;

    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.15);

    background: #0f172a;

    aspect-ratio: 16 / 9;

}



.video-img-new {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.5s ease;

}



.video-thumbnail-new:hover .video-img-new {

    transform: scale(1.05);

}



.video-overlay-new {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: linear-gradient(180deg, rgba(15, 23, 42, 0.3) 0%, rgba(15, 23, 42, 0.6) 100%);

    transition: background 0.3s ease;

}



.video-thumbnail-new:hover .video-overlay-new {

    background: linear-gradient(180deg, rgba(15, 23, 42, 0.2) 0%, rgba(15, 23, 42, 0.5) 100%);

}



.video-play-button-new {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 100px;

    height: 100px;

    border: none;

    background: rgba(255, 255, 255, 0.95);

    border-radius: 50%;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.4s ease;

    z-index: 2;

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);

    padding: 0;

}



.video-play-button-new:hover {

    transform: translate(-50%, -50%) scale(1.1);

    background: #ffffff;

    box-shadow: 0 15px 50px rgba(37, 99, 235, 0.4);

}



.video-play-button-new:active {

    transform: translate(-50%, -50%) scale(0.95);

}



.play-button-inner {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg, #0f364e 0%, #1d4ed8 100%);

    border-radius: 50%;

    position: relative;

    z-index: 1;

    transition: all 0.3s ease;

}



.video-play-button-new:hover .play-button-inner {

    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);

}



.play-button-inner i {

    color: #ffffff;

    font-size: 2rem;

    margin-left: 4px;

    transition: transform 0.3s ease;

}



.video-play-button-new:hover .play-button-inner i {

    transform: scale(1.1);

}



.play-button-ring {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 100px;

    height: 100px;

    border: 2px solid rgba(255, 255, 255, 0.5);

    border-radius: 50%;

    animation: pulse-ring 2s infinite;

}



.play-button-ring-2 {

    width: 120px;

    height: 120px;

    animation-delay: 0.5s;

    border-color: rgba(255, 255, 255, 0.3);

}



@keyframes pulse-ring {

    0% {

        transform: translate(-50%, -50%) scale(1);

        opacity: 1;

    }

    100% {

        transform: translate(-50%, -50%) scale(1.5);

        opacity: 0;

    }

}



/* Video Modal Styles */

.video-modal-content-new {

    background: transparent;

    border: none;

    position: relative;

}



.video-modal-close-new {

    position: absolute;

    top: -40px;

    right: 0;

    background: rgba(255, 255, 255, 0.9);

    border-radius: 50%;

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 10;

    opacity: 1;

    transition: all 0.3s ease;

}



.video-modal-close-new:hover {

    background: #ffffff;

    transform: rotate(90deg);

}



.video-modal-body-new {

    padding: 0;

    border-radius: 12px;

    overflow: hidden;

}



.video-modal-body-new .ratio {

    border-radius: 12px;

    overflow: hidden;

}



/* Responsive */

@media (max-width: 991px) {

    .video-section-new {

        padding-top: 60px;

        padding-bottom: 60px;

    }

    .video-title-new {

        font-size: 2.3rem;

    }

    .video-header-new {

        margin-bottom: 40px;

    }

    .video-play-button-new {

        width: 90px;

        height: 90px;

    }

    .play-button-inner i {

        font-size: 1.8rem;

    }

    .play-button-ring {

        width: 90px;

        height: 90px;

    }

    .play-button-ring-2 {

        width: 110px;

        height: 110px;

    }

}



@media (max-width: 767px) {

    .video-section-new {

        padding-top: 50px;

        padding-bottom: 50px;

    }

    .video-title-new {

        font-size: 2rem;

    }

    .video-description-new {

        font-size: 1rem;

    }

    .video-header-new {

        margin-bottom: 30px;

    }

    .video-player-new {

        margin-top: 30px;

    }

    .video-thumbnail-new {

        border-radius: 16px;

    }

    .video-play-button-new {

        width: 80px;

        height: 80px;

    }

    .play-button-inner i {

        font-size: 1.6rem;

    }

    .play-button-ring {

        width: 80px;

        height: 80px;

    }

    .play-button-ring-2 {

        width: 100px;

        height: 100px;

    }

    .video-modal-close-new {

        top: -35px;

        width: 35px;

        height: 35px;

    }

}



/************************************************

        ==Video Section V2 (index.html)==

*************************************************/



.video-section-v2 {

    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);

    padding-top: 90px;

    padding-bottom: 90px;

    position: relative;

}



.video-content-v2 {

    padding-right: 40px;

}



.video-badge-v2 {

    display: inline-block;

    background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);

    color: #0f364e;

    padding: 10px 24px;

    border-radius: 30px;

    font-size: 0.9rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.08em;

    margin-bottom: 24px;

    border: 1px solid rgba(37, 99, 235, 0.2);

}



.video-title-v2 {

    font-size: 3.2rem;

    font-weight: 800;

    color: #0f172a;

    margin: 0 0 24px 0;

    line-height: 1.2;

}



.video-highlight-v2 {

    color: #0f364e;

    position: relative;

}



.video-text-v2 {

    font-size: 1.1rem;

    color: #64748b;

    line-height: 1.8;

    margin-bottom: 32px;

}



.video-features-v2 {

    list-style: none;

    padding: 0;

    margin: 0;

    display: flex;

    flex-direction: column;

    gap: 16px;

}



.video-features-v2 li {

    display: flex;

    align-items: center;

    gap: 12px;

    font-size: 1rem;

    color: #475569;

    font-weight: 500;

}



.video-features-v2 i {

    color: #10b981;

    font-size: 1.2rem;

    flex-shrink: 0;

}



.video-wrapper-v2 {

    position: relative;

}



.video-thumbnail-v2 {

    position: relative;

    border-radius: 20px;

    overflow: hidden;

    box-shadow: 0 25px 70px rgba(15, 23, 42, 0.2);

    background: #0f172a;

    aspect-ratio: 16 / 9;

}



.video-image-v2 {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.6s ease;

}



.video-thumbnail-v2:hover .video-image-v2 {

    transform: scale(1.08);

}



.video-overlay-v2 {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: linear-gradient(135deg, rgba(15, 23, 42, 0.4) 0%, rgba(37, 99, 235, 0.3) 100%);

    transition: background 0.3s ease;

}



.video-thumbnail-v2:hover .video-overlay-v2 {

    background: linear-gradient(135deg, rgba(15, 23, 42, 0.3) 0%, rgba(37, 99, 235, 0.25) 100%);

}



.video-play-btn-v2 {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 90px;

    height: 90px;

    border: none;

    background: transparent;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    z-index: 2;

    padding: 0;

}



.video-play-btn-v2:hover {

    transform: translate(-50%, -50%) scale(1.15);

}



.video-play-btn-v2:active {

    transform: translate(-50%, -50%) scale(0.95);

}



.play-btn-circle-v2 {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #ffffff;

    border-radius: 50%;

    position: relative;

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);

    transition: all 0.4s ease;

}



.video-play-btn-v2:hover .play-btn-circle-v2 {

    background: #0f364e;

    box-shadow: 0 12px 40px rgba(37, 99, 235, 0.5);

    transform: rotate(360deg);

}



.play-btn-circle-v2 i {

    color: #0f364e;

    font-size: 1.8rem;

    margin-left: 4px;

    transition: all 0.3s ease;

}



.video-play-btn-v2:hover .play-btn-circle-v2 i {

    color: #ffffff;

    transform: scale(1.2);

}



/* Video Modal V2 Styles */

.video-modal-content-v2 {

    background: transparent;

    border: none;

    position: relative;

}



.video-modal-close-v2 {

    position: absolute;

    top: -45px;

    right: 0;

    background: rgba(255, 255, 255, 0.95);

    border-radius: 50%;

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 10;

    opacity: 1;

    transition: all 0.3s ease;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

}



.video-modal-close-v2:hover {

    background: #ffffff;

    transform: rotate(90deg) scale(1.1);

}



.video-modal-body-v2 {

    padding: 0;

    border-radius: 16px;

    overflow: hidden;

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);

}



.video-modal-body-v2 .ratio {

    border-radius: 16px;

    overflow: hidden;

}



/* Responsive */

@media (max-width: 991px) {

    .video-section-v2 {

        padding-top: 70px;

        padding-bottom: 70px;

    }

    .video-content-v2 {

        padding-right: 0;

        margin-bottom: 40px;

        text-align: center;

    }

    .video-title-v2 {

        font-size: 2.5rem;

    }

    .video-features-v2 {

        align-items: flex-start;

    }

    .video-features-v2 li {

        justify-content: flex-start;

    }

}



@media (max-width: 767px) {

    .video-section-v2 {

        padding-top: 60px;

        padding-bottom: 60px;

    }

    .video-content-v2 {

        margin-bottom: 30px;

    }

    .video-title-v2 {

        font-size: 2rem;

    }

    .video-text-v2 {

        font-size: 1rem;

        margin-bottom: 24px;

    }

    .video-features-v2 {

        gap: 12px;

    }

    .video-features-v2 li {

        font-size: 0.95rem;

    }

    .video-thumbnail-v2 {

        border-radius: 16px;

    }

    .video-play-btn-v2 {

        width: 75px;

        height: 75px;

    }

    .play-btn-circle-v2 i {

        font-size: 1.5rem;

    }

    .video-modal-close-v2 {

        top: -40px;

        width: 38px;

        height: 38px;

    }

}


/* ===== Manage Jobs (employer) ===== */
.manage-jobs-panel {
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    box-shadow: 0 30px 70px rgba(15, 23, 42, 0.08);
    padding: 28px;
}
.manage-jobs-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    padding-bottom: 16px;
}
.manage-jobs-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.10);
    color: #475569;
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    transition: 0.2s ease-in-out;
}
.manage-jobs-tab:hover {
    background: rgba(37, 99, 235, 0.10);
    color: #1d4ed8;
}
.manage-jobs-tab.active {
    background: #1d4ed8;
    color: #ffffff;
}
.manage-jobs-tab.active .manage-jobs-count {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}
.manage-jobs-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    color: #334155;
    font-size: 0.78rem;
    font-weight: 700;
}
.manage-jobs-empty {
    text-align: center;
    padding: 60px 20px;
    color: #475569;
}
.manage-jobs-empty i {
    font-size: 3rem;
    color: #94a3b8;
    margin-bottom: 16px;
    display: inline-block;
}
.manage-jobs-empty h4 {
    margin-bottom: 8px;
    color: #0f172a;
}
.manage-jobs-table-wrap {
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 14px;
    overflow: hidden;
}
.manage-jobs-table {
    margin-bottom: 0;
}
.manage-jobs-table thead th {
    background: #f8fafc;
    color: #475569;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}
.manage-jobs-table tbody td {
    vertical-align: middle;
    border-color: rgba(148, 163, 184, 0.10);
}
.manage-jobs-title strong {
    color: #0f172a;
    font-size: 1rem;
}
.manage-jobs-status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.manage-jobs-status.status-published {
    background: rgba(34, 197, 94, 0.14);
    color: #15803d;
}
.manage-jobs-status.status-draft {
    background: rgba(234, 179, 8, 0.18);
    color: #92400e;
}
.manage-jobs-status.status-closed {
    background: rgba(148, 163, 184, 0.22);
    color: #475569;
}
.manage-jobs-actions .btn {
    border-radius: 10px;
    font-weight: 600;
}

/* Card-grid variant (mirrors job-listing.php) */
.job-card-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.manage-jobs-card-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.manage-jobs-card-badge.status-published {
    background: rgba(34, 197, 94, 0.14);
    color: #15803d;
}
.manage-jobs-card-badge.status-draft {
    background: rgba(234, 179, 8, 0.18);
    color: #92400e;
}
.manage-jobs-card-badge.status-closed {
    background: rgba(148, 163, 184, 0.22);
    color: #475569;
}
.manage-jobs-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}
.manage-jobs-card-actions .btn {
    border-radius: 999px;
    padding: 6px 16px;
    font-weight: 600;
}
.manage-jobs-card-btn {
    border-radius: 999px !important;
    padding: 6px 16px !important;
    font-weight: 600 !important;
}
.job-list-item .job-list-summary {
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (max-width: 767px) {
    .manage-jobs-card-actions {
        width: 100%;
    }
}
@media (max-width: 768px) {
    .manage-jobs-table thead {
        display: none;
    }
    .manage-jobs-table tbody tr {
        display: block;
        padding: 16px;
        border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    }
    .manage-jobs-table tbody td {
        display: flex;
        justify-content: space-between;
        padding: 6px 0;
        border: 0;
    }
    .manage-jobs-table tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #475569;
        margin-right: 12px;
    }
}

/* ===== Quick-menu hamburger (top right of navbar) ===== */
.quick-menu-dropdown {
    margin-left: 4px;
}
.quick-menu-toggle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(148, 163, 184, 0.12);
    color: #0f172a;
    border: 1px solid rgba(148, 163, 184, 0.22);
    transition: 0.2s ease-in-out;
}
.quick-menu-toggle:hover,
.quick-menu-toggle[aria-expanded="true"] {
    background: #0ea5e9;
    color: #ffffff;
    border-color: #0ea5e9;
    box-shadow: 0 10px 20px rgba(14, 165, 233, 0.25);
}
.quick-menu-toggle i {
    font-size: 1.1rem;
}
.quick-menu {
    min-width: 260px;
    padding: 8px 0;
    border: none;
    border-radius: 14px;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.16);
    margin-top: 8px;
}
.quick-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    font-weight: 600;
    color: #1e293b;
    border-radius: 8px;
    margin: 2px 8px;
}
.quick-menu .dropdown-item:hover {
    background: rgba(14, 165, 233, 0.10);
    color: #0369a1;
}
.quick-menu .dropdown-item i {
    width: 18px;
    color: #0ea5e9;
}
.quick-menu-header {
    padding: 10px 16px 6px;
}
.quick-menu-name {
    font-weight: 700;
    color: #0f172a;
    font-size: 0.95rem;
}
.quick-menu .dropdown-divider {
    margin: 6px 12px;
    border-color: rgba(148, 163, 184, 0.20);
}