* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;

	-webkit-tap-highlight-color: transparent;
}

html,
body {
	width: 100%;
	height: 100vh;

	font-family:
		-apple-system,
		BlinkMacSystemFont,
		"SF Pro Display",
		"Segoe UI",
		Roboto,
		sans-serif;

	background: #FBFCFD;

	overflow-x: hidden;

	overscroll-behavior: none;
	overscroll-behavior-y: none;

	text-rendering: optimizeLegibility;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	-ms-overflow-style: none;
	scrollbar-width: none;

	-webkit-overflow-scrolling: touch;
}


/* hide scrollbar */

html::-webkit-scrollbar,
body::-webkit-scrollbar {
	display: none;

	width: 0;
	height: 0;

	background: transparent;
}

/* -------------- HEADER ----------- */
#header {
	position: fixed;
	top: 0;
	left: 0;

	width: 100%;
	height: 60px;

	display: flex;
	align-items: center;
	justify-content: space-between;


	box-sizing: border-box;

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

	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);

	border-bottom: 1px solid #F0F1F4;

	z-index: 1000;
}

.centerheader {
	position: relative;

	margin: 0 auto;

	width: 100%;
	max-width: 1000px;
	height: 100%;
}

.logo {
	position: absolute;
	left: 50%;
	top: 19px;

	transform: translateX(-50%);

	width: 150px;
	height: 22px;

	background: url('../images/logo/workoo.png') center center / contain no-repeat;
}

.button_menu {
	display: block;
	position: absolute;
	top: 20px;
	left: 18px;
	width: 20px;
	height: 20px;
}

.icon_menu {
	position: absolute;
	left: 0;
	top: 0;
	width: 20px;
	height: 20px;
	background: url('../images/icon/menu.svg') center center / contain no-repeat;
}

.button_alert {
	display: block;
	position: absolute;
	top: 18px;
	right: 18px;
	width: 24px;
	height: 24px;
}

.icon_alert {
	position: absolute;
	left: 0;
	top: 0;
	width: 24px;
	height: 24px;
	background: url('../images/icon/alert.svg') center center / contain no-repeat;
}









/* -------------- MAIN MENU ----------- */
#main_menu {
	position: fixed;
	bottom: 0;
	left: 0;

	width: 100%;
	height: 80px;

	display: flex;
	align-items: center;
	justify-content: space-between;


	box-sizing: border-box;

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

	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);

	border-top: 1px solid #F0F1F4;
	border-top-left-radius: 32px;
	border-top-right-radius: 32px;
	box-shadow:
		0 -10px 30px rgba(0, 0, 0, 0.05),
		0 -2px 10px rgba(0, 0, 0, 0.03);
	z-index: 1000;
}

.centermain_menu {
	position: relative;

	margin: 0 auto;

	width: 100%;
	max-width: 1000px;
	height: 100%;
}

.button_mm_list {
	display: flex;
	align-items: center;
	justify-content: space-between;

	width: 100%;
	height: 100%;
}

.button_mm_list .button_mm {
	position: relative;

	flex: 1;
	height: 100%;

	display: flex;
	flex-direction: column;

	align-items: center;
	justify-content: center;

	gap: 4px;
	margin-top: -15px;
	cursor: default;
}

.icon_home {
	width: 19px;
	height: 19px;
	background: url('../images/icon/home.svg') center center / contain no-repeat;
}

.icon_home_active {
	width: 19px;
	height: 19px;
	background: url('../images/icon/home_active.svg') center center / contain no-repeat;
}

.icon_search {
	width: 22px;
	height: 22px;
	background: url('../images/icon/search.svg') center center / contain no-repeat;
}

.icon_search_active {
	width: 22px;
	height: 22px;
	background: url('../images/icon/search_active.svg') center center / contain no-repeat;
}

.icon_like {
	width: 22px;
	height: 22px;
	background: url('../images/icon/like.svg') center center / contain no-repeat;
}

.icon_like_active {
	width: 22px;
	height: 22px;
	background: url('../images/icon/like_active.svg') center center / contain no-repeat;
}

.icon_msg {
	width: 22px;
	height: 22px;
	background: url('../images/icon/msg.svg') center center / contain no-repeat;
}

.icon_msg_active {
	width: 22px;
	height: 22px;
	background: url('../images/icon/msg_active.svg') center center / contain no-repeat;
}

.icon_profile {
	width: 22px;
	height: 22px;
	background: url('../images/icon/profile.svg') center center / contain no-repeat;
}

.icon_profile_active {
	width: 22px;
	height: 22px;
	background: url('../images/icon/profile_active.svg') center center / contain no-repeat;
}

.mm_txt {
	font-size: 12px;
	font-weight: 500;
	line-height: 1;

	color: rgb(93, 86, 86);

	white-space: nowrap;

	font-family:
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		Helvetica,
		Arial,
		sans-serif;
}

.txt_active {
	color: #0F5DF3;
}

.bm_topline {
	display: block;
	position: absolute;
	top: 7px;
	left: 50%;
	transform: translateX(-50%);
	width: 40px;
	height: 2px;
	background: #0F5DF3;
	border-radius: 2px;
}


/* -------------- CONTAINER ----------- */
#container {
	position: absolute;
	top: 60px;
	left: 0;

	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	


	box-sizing: border-box;

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

	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	

	z-index: 1;
}

.centercontainer {
	position: relative;

	margin: 0 auto;

	width: 100%;
	max-width: 1000px;
	height: 100%;
	
}

.content {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: calc(100% - 30px); 
	margin-top: 20px;
	margin-left: 15px;
	margin-right: 15px;
	
	padding-bottom: 120px;
}

.home_header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.home_left {
	display: flex;
	flex-direction: column;
}

.home_title {
	margin: 0;

	font-size: 24px;
	font-weight: 600;
	line-height: 0.8;

	color: #0B1020;
}

.home_subtitle {
	margin-top: 8px;

	font-size: 14px;
	font-weight: 500;

	color: #7B8190;
}

.home_avatar {
	width: 50px;
	height: 50px;

	min-width: 50px;

	border-radius: 50%;
	overflow: hidden;

	background: #EDEDED;
}

.home_avatar img {
	width: 100%;
	height: 100%;

	object-fit: cover;
	display: block;
}

.search_block {
	display: flex;
	align-items: center;

	gap: 14px;
	margin-top: 15px;
	width: 100%;
	height: 50px;

	padding: 0 18px;

	border-radius: 12px;

	background: #FFFFFF;

	box-shadow:
		0 2px 10px rgba(0, 0, 0, 0.03),
		0 1px 2px rgba(0, 0, 0, 0.02);
	border: 0.3px solid #F0F1F4;
}

.search_icon {
	width: 18px;
	height: 18px;

	min-width: 18px;

	background:
		url('../images/icon/search_2.svg') center center / contain no-repeat;
}

.search_placeholder {
	flex: 1;

	font-size: 14px;
	font-weight: 400;

	color: #7B8190;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.search_filter {
	width: 24px;
	height: 24px;

	min-width: 24px;

	background:
		url('../images/icon/filter.svg') center center / contain no-repeat;
}

.welcome_slider {
	position:relative;
	overflow:hidden;
	max-height: 200px;
} 
.welcome_slide {
	position:absolute;
	inset:0;

	opacity:0;
	filter:blur(8px);

	transition:
		opacity .7s ease,
		filter .7s ease;
}

.welcome_slide.active{
	opacity:1;
	filter:blur(0);
}

.home_banner {
	position: relative;

	width: 100%;

	margin: 16px auto 0 auto;
	padding: 24px;
	padding-right: 0px;
	box-sizing: border-box;

	display: flex;
	align-items: center;
	justify-content: space-between;

	border-radius: 12px;

	background:
		linear-gradient(135deg,
			#F4F7FF 0%,
			#F4F7FF 25%,
			#E4EAF8 50%,
			#E4EAF8 100%);

	overflow: hidden; 
}

.bluebanner {
	
	position: absolute;
	
	width: 100%;
	
	margin: 16px auto 0 auto;
	padding: 24px;
	padding-right: 0px;
	box-sizing: border-box;
	
	display: flex;
	align-items: center;
	justify-content: space-between;
	
	border-radius: 12px;
	
	background:
		linear-gradient(135deg,
			#F4F7FF 0%,
			#F4F7FF 25%,
			#E4EAF8 50%,
			#E4EAF8 100%);
	
	overflow: hidden; 

}

.yellowbanner {
	background:
	linear-gradient(
		135deg,
		#FFF9E5 0%,
		#fdf1c9 20%,
		#FDF0DB 100%
	);
}

.banner_left {
	position: relative;
	z-index: 2;
}

.banner_left h2 {
	margin: 0;

	font-size: 22px;
	font-weight: 700;
	line-height: 1.1;

	color: #111827;

	font-family:
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		sans-serif;
}

.banner_left p {
	margin: 14px 0 0 0;

	font-size: 14px;
	font-weight: 400;
	line-height: 1.3;

	color: #6B7280;

	font-family:
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		sans-serif;
}

.banner_button {
	margin-top: 22px;

	height: 40px;
	padding: 0 24px;

	border: 0;
	border-radius: 12px;

	background: #2563FF;

	font-size: 14px;
	font-weight: 600;

	color: #fff;

	font-family:
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		sans-serif;

	cursor: pointer;

	box-shadow:
		0 8px 20px rgba(37, 99, 255, 0.25);

	transition: 0.2s;
}

.yellowb {
	background: #FDC30E;
	box-shadow:
	0 8px 20px rgba(253, 195, 14, 0.25);
	color: #111827;
}

.banner_button:active {
	transform: scale(0.97);
}

.banner_right {
	position: relative;

	width: 42%;
	height: 100%;
}

.banner_video {
	position: absolute;

	right: 0;
	top: 50%;

	transform: translateY(-50%);

	width: 200px;
	height: 200px;

	pointer-events: none;
	overflow: hidden;
}

.banner_video video {
	width: 100%;
	height: 100%;

	object-fit: contain;
}

.mobile_br {
	display: none;
}

video {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mask-image: linear-gradient(to left, black 70%, transparent 100%);
	-webkit-mask-image: linear-gradient(to left, black 70%, transparent 100%);
}

.cblock {
	position: relative;
	width: 100%;
	margin: 24px auto 0 auto;
}

.pc_header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.pc_header h2 {
	margin: 0;

	font-size: 16px;
	font-weight: 600;

	color: #111827;

	font-family:
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		sans-serif;
}

.pc_header a {
	display: flex;
	align-items: center;
	gap: 8px;

	text-decoration: none;

	font-size: 14px;
	font-weight: 500;

	color: #111827;

	font-family:
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		sans-serif;
}

.arrow {
	width: 8px;
	height: 8px;

	border-top: 1.5px solid #111827;
	border-right: 1.5px solid #111827;

	transform: rotate(45deg);
}

.pc_list {
	display: flex;
	gap: 18px;

	overflow-x: auto;
	overflow-y: hidden;
	padding-right: 6px;
	margin-top: 18px;

	overflow-x: auto;

	scrollbar-width: none;
}

.pc_list::-webkit-scrollbar {
	display: none;
}

.pc_item {
	width: 140px;

	text-align: center;
}

.pc_icon {
	width: 80px;
	height: 80px;

	margin: 0 auto 12px auto;

	display: flex;
	align-items: center;
	justify-content: center;

	border-radius: 15px;
}

.pc_icon .icon {
	width: 42px;
	height: 42px;

	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.pc_title {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;

	color: #111827;

	font-family:
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		sans-serif;
}

.pc_count {
	margin-top: 6px;

	font-size: 12px;
	font-weight: 500;

	color: #9CA3AF;

	font-family:
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		sans-serif;
}

.bsc_0 {
	/* Всі вакансії */
	background: #EEF4FF;
}

.bsc_1 {
	/* Заводи */
	background: #FFF5E8;
}

.bsc_2 {
	/* Склади */
	background: #EEFCEF;
}

.bsc_3 {
	/* Будівництво */
	background: #F6EEFF;
}

.bsc_4 {
	/* Ресторани */
	background: #FFF1F2;
}

.bsc_5 {
	/* Готелі */
	background: #FFF7ED;
}

.bsc_6 {
	/* Прибирання */
	background: #EEFDFB;
	icon: #14B8A6;
}

.bsc_7 {
	/* Торгівля */
	background: #FDF2F8;
}

.icon_ib_0 {
	width: 36px;
	height: 36px;

	background-color: #2563FF;

	mask: url('../images/icon/ib_0.svg') center center / contain no-repeat;
	-webkit-mask: url('../images/icon/ib_0.svg') center center / contain no-repeat;
}

.icon_ib_1 {
	width: 30px;
	height: 30px;

	background-color: #F59E0B;

	mask: url('../images/icon/ib_1.svg') center center / contain no-repeat;
	-webkit-mask: url('../images/icon/ib_1.svg') center center / contain no-repeat;
}

.icon_ib_2 {
	width: 40px;
	height: 40px;

	background-color: #22C55E;

	mask: url('../images/icon/ib_2.svg') center center / contain no-repeat;
	-webkit-mask: url('../images/icon/ib_2.svg') center center / contain no-repeat;
}

.icon_ib_3 {
	width: 30px;
	height: 30px;

	background-color: #8B5CF6;

	mask: url('../images/icon/ib_3.svg') center center / contain no-repeat;
	-webkit-mask: url('../images/icon/ib_3.svg') center center / contain no-repeat;
}

.icon_ib_4 {
	width: 30px;
	height: 30px;

	background-color: #FB7185;

	mask: url('../images/icon/ib_4.svg') center center / contain no-repeat;
	-webkit-mask: url('../images/icon/ib_4.svg') center center / contain no-repeat;
}

.icon_ib_5 {
	width: 30px;
	height: 30px;

	background-color: #F97316;

	mask: url('../images/icon/ib_5.svg') center center / contain no-repeat;
	-webkit-mask: url('../images/icon/ib_5.svg') center center / contain no-repeat;
}

.icon_ib_6 {
	width: 30px;
	height: 30px;

	background-color: #14B8A6;

	mask: url('../images/icon/ib_6.svg') center center / contain no-repeat;
	-webkit-mask: url('../images/icon/ib_6.svg') center center / contain no-repeat;
}

.icon_ib_7 {
	width: 38px;
	height: 38px;

	background-color: #EC4899;

	mask: url('../images/icon/ib_7.svg') center center / contain no-repeat;
	-webkit-mask: url('../images/icon/ib_7.svg') center center / contain no-repeat;
}




.vacancy {
	display: flex;
	padding: 16px;
	margin-bottom: 8px;
	margin-top: 8px;
	background: #fff;
	border-radius: 24px;
	box-shadow:
		0 2px 10px rgba(0, 0, 0, .03);
	border: 1px solid #F1F3F7;
}

.job_logo {
	width: 64px;
	height: 64px;
	flex-shrink: 0;
	border-radius: 12px;
	overflow: hidden;
}

.job_logo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vacancy_info {
	flex: 1;
	margin-left: 14px;
}

.job_top {
	display: flex;
	justify-content: space-between;
}

.job_title {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 16px;
	font-weight: 600;
	color: #111827;
}

.verified {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #3B82F6; 
	
	mask: url('../images/icon/verified.svg') center center / contain no-repeat;
	-webkit-mask: url('../images/icon/verified.svg') center center / contain no-repeat;
}

.job_company {
	display: flex;
	align-items: center;
	gap: 4px; 
	margin-top: 4px;
	font-size: 13px;
	color: #6B7280;
}

.job_location {
	margin-top: 4px;
	font-size: 13px;
	color: #9CA3AF;
}

.job_favorite {
	margin-right: 10px;
	width: 24px;
	height: 24px; 
	background-color: #9CA3AF;
	
	mask: url('../images/icon/heart.svg') center center / contain no-repeat;
	-webkit-mask: url('../images/icon/heart.svg') center center / contain no-repeat;
	opacity: .6;
}

.job_bottom {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
}

.job_tag {
	padding: 6px 12px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 500;
}

.tag_blue {
	background: #EEF4FF;
	color: #2563FF;
}

.tag_green {
	background: #ECFDF3;
	color: #16A34A;
}

.tag_pink {
	background: #FDF2F8;
	color: #EC4899;
}

.job_time {
	margin-left: auto;
	font-size: 13px;
	color: #9CA3AF;
}

.tag_orange{
	background:#FFF7ED;
	color:#EA580C;
}

.tag_purple{
	background:#F5F3FF;
	color:#7C3AED;
}







/* -------------- @MEDIA ----------- */
@media (max-width: 768px) {

	#header {
		height: 50px;
	}

	#container {
		top: 50px;
	}

	.logo {
		top: 10px;
	}

	.button_menu {
		top: 15px;
	}

	.button_alert {
		top: 13px;
	}

	.home_banner {
		padding: 20px;
		padding-right: 0px;
	}

	.banner_button {
		margin-top: 12px;
		font-size: 12.5px;
		height: 32px;
		border-radius: 8px;
		padding: 0 20px;
	}

	.banner_left h2 {
		font-size: 16px;
		font-weight: 600;
		line-height: 1.3;
	}

	.banner_left p {
		margin: 8px 0 0 0;
		font-size: 13px;
		font-weight: 450;
		line-height: 1.3;
	}

	.banner_video {
		position: absolute;

		right: 0;
		top: 50%;

		transform: translateY(-50%);

		width: 180px;
		height: 180px;

		pointer-events: none;
	}

	.mobile_br {
		display: block;
	}

	.pc_item {
		text-align: center;
		flex: 0 0 calc((100% - 52px) / 4);
	}

	.pc_icon {
		width: 64px;
		height: 64px;

		margin: 0 auto 12px auto;

		display: flex;
		align-items: center;
		justify-content: center;

		border-radius: 15px;
	}

	.pc_title {
		font-size: 12.5px;
		font-weight: 500;
		line-height: 1.2;
	}

	.pc_count {
		margin-top: 2px;
		font-size: 10px;
		font-weight: 500;
	}
	
	.vacancy { 
		border-radius: 20px; 
		padding-bottom: 20px;
	}
	
	.job_company { 
		margin-top: 6px;
		font-size: 12px;
		line-height: 1.1;
	}
	
	.job_location {
		font-size: 12px;
		line-height: 1.1;
	}
	
	.job_bottom {
		display: flex;
		flex-wrap: wrap;
	
		align-items: center;
		gap: 8px;
	 
	}
	
	.job_logo {
		width: 60px;
		height: 60px;
		flex-shrink: 0;
		border-radius: 12px;
		overflow: hidden;
	}
	 
	.job_favorite {
		margin-right: 0px;
	}
	
	.job_tag {
		font-weight: 520;
	} 
	
	.salary_row{
		width: 70%; 
	}
	
	.tag_green {
		font-size: 14px;
		font-weight: 600;
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
}