body {
  margin: 0;
  padding: 0;
  font-family: Arial;
  overflow-x: hidden;
  max-width: 100%;
}

body.fixed {
  overflow: hidden;
}
h1,
h2,
h3,
h4,
li,
a {
  padding: 0;
  margin: 0;
  text-decoration: none;
}
ul,
ol,
p {
  margin: 0;
  padding: 0;
}
.content__container {
  max-width: 1440px;
  margin: 0 auto;
}
.content__container-sm {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 30px;
}
/* =============== MAIN BLOCK =============== */
.main__block {
  background: #2F05FF;
	position: relative;
}
.main__block-content {
	position: relative;
  padding-top: 157px;
  padding-bottom: 184px;
	background: url("../images/career/bg__main.jpg");
	background-size: 100% 100%;
	background-position: 34%;
	background-repeat: no-repeat;
}
.main__block-title {
	color:  #FFF;
	font-size: 50px;
	font-style: normal;
	font-weight: 500;
	line-height: 140%; 
	max-width: 530px;
	margin-bottom: 34px;
}
.main__block-btnbox {
	display: flex;
	align-items: center;
	gap: 24px;
	z-index: 1;
}
.main__block-btn {
	border-radius: 15px;
	background: #6E9AFF;	
	border: 2px solid #6E9AFF;
	padding: 13px;
	width: 180px;
	color:  #FFF;
	text-align: center;
	font-size: 16px;
	font-weight: 500;
	line-height: 140%;
	cursor: pointer;
	transition: background 0.5s ease;
}
.main__block-btn:hover {
	background: transparent;
}
.main__block-descr {
	color:  #FFF;
	font-size: 18px;
	font-style: normal;
	font-weight: 500;
	line-height: 140%; 
	max-width: 340px;	
}
.main__bg-xl {
	position: absolute;
	top: 0;
	right: 0;
	max-width: 540px;
}
.main__bg-sm {
	display: none;
}
 
 /* =============== VACANCIES =============== */
.vacancies {
	padding: 120px 0;

}
.vacancies__maintitle {
	color: #0E0E0F;
	font-family: Arial;
	font-size: 40px;
	font-style: normal;
	font-weight: 400;
	line-height: 140%;
	margin-bottom: 50px;
}
body.dark-theme .vacancies__maintitle {
	color: #fff;
}
.vacancies__section-title {
	color: #0E0E0F;
	font-family: Arial;
	font-size: 32px;
	font-weight: 400;
	line-height: 140%; 
	margin-bottom: 40px;
}
.vacancies__section-title span {
	margin-right: 32px;
}

.vacancies__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 56px;
}
.vacancies__item {
	position: relative;
	border-radius: 16px;
	background: #F4F4F4;
	padding: 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	transition: transform 0.5s ease, background 0.5s ease;
}

body.dark-theme .vacancies__item {
	background: #3A436E;
}
@media(min-width: 1150px) {
	.vacancies__item:hover {
		transform: scale(1.03);
		background: #e3e3e3;
	}
	.vacancies__item:hover .vacancy__arrow{
		transform: translate(10px, -10px);
	}
	body.dark-theme .vacancies__item:hover {
		background: #2f375e;
	}
}

.vacancy__name {
	color: #0E0E0F;
	font-family: Inter;
	font-size: 24px;
	font-weight: 400;
	line-height: 160%; 
}
.vacancy__experience {
	position: absolute;
	transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;
	color: #0E0E0F;
	font-size: 24px;
	font-weight: 400;
	line-height: 160%; 
}
.vacancy__arrow {
  width: 52px;
}
body.dark-theme .vacancies__section-title,
body.dark-theme .vacancy__name,
body.dark-theme .vacancy__experience {
	color: #fff;
}
body.dark-theme .vacancy__arrow path {
	stroke: #fff;
}
 /* ======================= VACANCY PAGE ======================= */

 .link__back {
	margin-top: 20px;
	margin-bottom: 50px;
	display: flex;
  align-items: center;
	color: #0E0E0F;
	font-family: Arial;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 140%; 
 }
 .link__back svg {
	width: 16px;
	margin-right: 5px;
 }
 @media(min-width: 1150px) {
	.link__back:hover {
		opacity: 0.6;
	}
 }
 body.dark-theme  .link__back {
	color: #fff;
 }
 body.dark-theme  .link__back svg path{
	stroke: #fff;
 }
	.vacancy__main {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 64px;
	}
	.vacancy__main-right img {
		max-width: 440px;
	}
	.vacancy__main-title {
		color: #0E0E0F;
		font-family: Arial;
		font-size: 40px;
		font-style: normal;
		font-weight: 400;
		line-height: 140%; 
		margin-bottom: 16px;
	}
	.vacancy__main-descr {
		color:  #000;
		font-family: Inter;
		font-size: 18px;
		font-style: normal;
		font-weight: 400;
		line-height: 160%; 
		max-width: 600px;
		margin-bottom: 16px;
	}
	body.dark-theme .vacancy__main-title ,
	body.dark-theme	.vacancy__main-descr {
		color:  #fff;
	}
	.primary-btn {
		display: inline-block;
		border-radius: 15.042px;
		background: #2546FF;
		border: 2px solid #2546FF;
		padding: 13px;
		color:  #FFF;
		text-align: center;
		font-size: 16.045px;
		font-style: normal;
		font-weight: 400;
		line-height: 100%; 
		transition: background 0.5s ease, color 0.5s ease;
		cursor: pointer;
	}
	@media (min-width: 1150px) {
		.primary-btn:hover {
			background: transparent;
			color: #000;
		}
	}
	@media (min-width: 1150px) {
		body.dark-theme .primary-btn:hover {
			background: transparent;
			color: #fff;
		}
	}
	.vacancy__container {
		margin-bottom: 70px;
	}
	.vacancy__content {
		display: flex;
		justify-content: space-between;
		gap: 32px;
		margin-bottom: 32px;
	}
	.vacancy__content-left {
		display: flex;
		flex-direction: column;
		gap: 32px;
	}
	.vacancy__descr-block {
		border-radius: 16px;
		background: #F4F4F4;	
		padding: 24px 40px 40px 40px;
	}
	body.dark-theme .vacancy__descr-block {
		background: #3A436E;
	}
	.vacancy__content-right {
		max-width: 41%;
	}
	.vacancy__block-title {
		color: #0E0E0F;
		font-family: Arial;
		font-size: 30px;
		font-style: normal;
		font-weight: 400;
		line-height: 140%; 
		margin-bottom: 24px;
	}
	.vacancy__block-list {
		margin-left: 16px;
	}
	.vacancy__block-list li {
		color: #0E0E0F;
		font-family: Inter;
		font-size: 18px;
		font-style: normal;
		font-weight: 400;
		line-height: 160%;
		max-width: 700px;
		margin-bottom: 12px;
	}
	.vacancy__block-subtitle {
		color: #0E0E0F;
		font-family: Inter;
		font-size: 18px;
		font-style: normal;
		font-weight: 500;
		line-height: 160%; 
		margin-bottom: 20px;
	}
	body.dark-theme .vacancy__block-title, 
	body.dark-theme .vacancy__block-list li,
	body.dark-theme .vacancy__block-subtitle {
		color: #fff;
	}
	.vacancy__skill-list {
		list-style: none;
		display: flex;
		gap: 12px;
		flex-wrap: wrap;
		margin-bottom: 24px;
	}
	.vacancy__skill-list li {
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 6px;
		background:  #FFF;
		padding: 4px 6px;
		color: #0E0E0F;
		font-family: Inter;
		font-size: 18px;
		font-style: normal;
		font-weight: 400;
		line-height: 160%; 
		min-width: 80px;
	}
	.vacancy__skill-list li svg {
		margin-right: 16px;
	}
	body.dark-theme .vacancy__skill-list li {
		background: #2B2F4B;
		color: #fff;
	}

	.vacancy__side-line {
		background: #565658;
		height: 1px;
		width: 100%;
		margin-bottom: 32px;
	}
	.vacancy__requirements {
		list-style: none;
		display: flex;
		flex-direction: column;
		gap: 16px;
	}
	.vacancy__requirements li {
		display: flex;
		align-items: center;
	}
	.vacancy__requirements li svg{
		margin-right: 6px;
	}
	body.dark-theme	.vacancy__requirements li:nth-child(1) svg path {
		stroke: #fff;
	}
	body.dark-theme	.vacancy__requirements li:nth-child(2) svg path {
	 fill: #fff;
	}
	body.dark-theme	.vacancy__requirements li:nth-child(3) svg path {
		fill: #fff;
	 }
	.vacancy__updated-time {
		margin-top: 16px;
		margin-left: 40px;
	}
	.vacancy__updated-time2 {
		display: none;
	}
	.vacancy__updated-time p {
		color: #000;
		font-family: Inter;
		font-size: 16px;
		font-style: normal;
		font-weight: 400;
		line-height: 160%; 
	}
	.bottom__block {
		display: flex;
		align-items: start;
		justify-content: space-between;
		margin-bottom: 60px;
	}
	body.dark-theme	.vacancy__updated-time p {
		color: #fff;
	}
/* ================== POPUP ================== */
.popup {
  z-index: 1005;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease-in-out;
  overflow-y: auto;
  overflow-x: hidden;
}
.popup__container {
  display: flex;
  align-items: center;
  min-height: 100%;
  justify-content: center;
}
.popup__content {
  position: relative;
  border-radius: 12px;
  box-shadow: 0px 4px 9.4px 0px rgba(0, 0, 0, 0.13);
  padding: 24px 24px 24px 24px;
  margin: 15px;
  transform: translate(0, -50px);
  transition: transform 0.3s ease-out;
	background: #fff;
	max-width: 460px;
	min-width: 460px;
}
.popup__response-content {
	max-width: 340px;
	min-width: 340px;
}
body.dark-theme .popup__content {
	background: #2D3340;
}
.popup.popup__opened {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.4s ease-in-out;
}
.popup__content.showed {
  transform: none;
}

.close__popup {
  position: absolute;
	top: 10px;
	right: 10px;
  cursor: pointer;
  padding: 10px;
}
@media (min-width: 1150px) {
	.close__popup:hover {
		opacity: 0.5;
	}
 }
.close__popup svg {
  width: 30px;
  height: 30px;
}
body.dark-theme .close__popup svg path {
	fill: #fff;
	stroke: #fff;
}
.input__radio {
	background: #fff;
}
body.dark-theme .input__radio {
	background: #2B2F4B;
}
.answer-list li input[type="radio"] {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	width: 0;
	height: 0;
}

.answer-list li label {
	cursor: pointer;
	display: inline-block;
	position: relative;
	padding-left: 25px;
}

.answer-list li label:before {
	content: '';
	position: absolute;
	left: 9px;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	background: #fff;
	border-radius: 50%;
}
body.dark-theme .answer-list li label:before {
	background: #2B2F4B;
}
.answer-list li label::after {
  content: '';
  position: absolute;
  left: 17.2px;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background: #2546FF;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.answer-list li input[type="radio"]:checked + label::after {
	opacity: 1; 
}



/* =============== TEST =============== */
.test__title {
	color: #0E0E0F;
	font-family: Inter;
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 160%;
	margin-bottom: 20px;
}

.test__question {
	color: #0E0E0F;
	font-family: Inter;
	font-size: 18px;
	font-style: normal;
	font-weight: 500;
	line-height: 160%; 
	margin-bottom: 4px;
}
.test__descr {
	color: #0E0E0F;
	font-family: Inter;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 160%;
	margin-bottom: 16px;
}
body.dark-theme .test__title,
body.dark-theme .test__question,
body.dark-theme .test__descr {
	color: #fff;
}
.start__page .primary-btn,
.popup__content .primary-btn{
	min-width: 175px;
}
.question-container ul {
	list-style: none;
	margin-bottom: 24px;
}
.question-container ul li {
	border-radius: 5px;
	background: #F4F4F4;
	color: #0E0E0F;
	font-family: Inter;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 150%;
	margin-bottom: 8px;
	display: flex;
  align-items: center;
  gap: 14px;
	cursor: pointer;
}
body.dark-theme .question-container ul li {
	background: #3A436E;
	color: #fff;
}
.question-container ul li label {
	padding: 8px 12px 8px 34px;
	width: 100%;
	cursor: pointer;
}
.question-container p {
	color: #0E0E0F;
	font-family: Inter;
	font-size: 18px;
	font-style: normal;
	font-weight: 500;
	line-height: 160%;
	margin-bottom: 16px;
}
body.dark-theme .question-container p {
	color: #fff;	
}
progress {
  height: 21px; 
	width: 100%;
  appearance: none;
}

progress::-webkit-progress-bar {
  background: #F4F4F4; 
  border-radius: 12px; 
}
body.dark-theme progress::-webkit-progress-bar {
	background: #3A436E;
}
progress::-webkit-progress-value {
  background-color: #2546FF; 
  border-radius: 12px; 
}
@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

.shake {
  animation: shake 0.3s ease;
}
.application__form {
	display: flex;
	flex-direction: column;
}
.application__form input {
	margin-bottom: 16px;
}
.application__form span {
	color: #0E0E0F;
	font-family: Inter;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 160%;
	margin-bottom: 4px;
}
body.dark-theme .application__form span {
	color: #fff;
}
.application__form .resume-descr {
color: #565658;
font-family: Inter;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 160%; 
margin-bottom: 16px;
margin-top: 4px;
}
.popup__form-input {
	border-radius: 15px;
	background: #F4F4F4;
	padding: 16px;
	border: none;
}
body.dark-theme .popup__form-input {
	border-radius: 15px;
	border: 1px solid #A6A6A8;
	background: transparent;
}
.application__form input[type=text], .application__form input[type="email"] {
  font-size: 19px;
	color: #000;
}
body.dark-theme .application__form input[type=text],
body.dark-theme .application__form input[type="email"] {
  font-size: 19px;
	color: #fff;
}
.popup__form-input:focus-visible {
	outline: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
		transition: background 5000s ease-in-out 0s, color 5000s ease-in-out 0s;
	}


.file__input {
	position: relative;
}

.application__form input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
	bottom: 0;
	left: 30%;
}

.file__input label {
	width: 100%;
	border-radius: 15px;
	border: 1px dashed #3D8AFF;	
	background: transparent;
	padding: 16px 16px 16px 16px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 10px;
}
.file__input label span {
	color: #3D8AFF;
}
.popup__form-label span {
	margin-bottom: 0;
}
.popup__form-label svg {
	display: none;
	width: 14px;
}
.popup__response-content {
	display: flex;
	align-items: center;
	flex-direction: column;
	gap: 16px;
}
.response__title {
	color: #0E0E0F;
	text-align: center;
	font-family: Inter;
	font-size: 18px;
	font-style: normal;
	font-weight: 500;
	line-height: 160%; 
}

.response__text {
	color: #0E0E0F;
	text-align: center;
	font-family: Inter;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 160%; 
}
body.dark-theme .response__title ,
body.dark-theme .response__text {
	color: #fff;
}
	/* =============== @MEDIA =============== */

	@media(max-width: 930px) {
		.main__bg-xl {
			top: 18%;
			right: 0;
			max-width: 340px;
		}
		.main__block-title {
			font-size: 40px;
			margin-bottom: 24px;
		}
		.main__block-btnbox {
			flex-direction: column-reverse;
			align-items: start; 

		}
	}

	@media(max-width: 1000px) {
		.vacancy__main-descr {
			font-size: 16px;
		}
		.vacancy__main-right img {
			max-width: 360px;
		}
	}
	@media(max-width: 950px) {
		.vacancy__experience {
			display: none;
		}
		}
	@media(max-width: 800px) {
		.main__block-title {
			max-width: 330px;
		}
		.main__block-content {
			padding-top: 117px;
  		padding-bottom: 114px;
		}
		.vacancies {
			padding-top: 117px;
  		padding-bottom: 114px;
		}
		.vacancies__item p {
			font-size: 20px;
		}
		.vacancies__item {
			padding: 18px;
		}
		.vacancy__main {
			flex-direction: column;
			align-items: self-start;
			gap: 40px;
		}
		.vacancy__main-right {
			margin: 0 auto;
			display: flex;
		}
		.vacancy__main-right img {
			max-width: 80%;
			margin: 0 auto;
		}
		.vacancy__content {
			flex-direction: column-reverse;
		}
		.vacancy__content-right {
			max-width: 100%;
		}
		.vacancy__updated-time {
			display: none;
		}
		.vacancy__updated-time2 {
			display: block;
			margin-top: 0;
		}
	}


	@media(max-width: 620px) {
		.main__bg-xl {
			display: none;
		}
		.main__bg-sm {
			display: block;
			position: absolute;
			top: 20%;
			right: 24px;
			width: 317px;
		}
		.content__container-sm {
			padding: 20px;
		}
		.main__block-content {
			padding-top: 117px;
			padding-bottom: 170px 
		}
		.vacancy__updated-time2 {
			max-width: 220px;
		}
		.link__back {
			margin-top: 0px;
		}
	}
	
	@media(max-width: 480px) {
		.main__block-title {
			font-size: 30px;
			max-width: 220px;
			margin-bottom: 16px;
		}
		.main__block-descr {
			font-size: 16px;
			max-width: 240px;
		}
		.main__block-btnbox {
			gap: 16px;
		}
		.main__block-btn {
			width: 160px;
		}
		.main__bg-sm {
			width: 280px;
		}
		.vacancies {
			padding-top: 80px;
			padding-bottom: 60px;
		}
		.vacancies__maintitle {
			font-size: 35px;
			margin-bottom: 40px;
		}
		.vacancies__section-title {
			font-size: 27px;
			margin-bottom: 30px;
		}
		.vacancy__main-title {
			font-size: 30px;
		}
		.career-btn {
			width: 100%; 
		}
		.bottom__block {
			flex-direction: column;
		}
		.vacancy__updated-time2 {
			max-width: 100%;
			margin-left: 0;
			margin: 0 auto;
			margin-top: 20px;

		}
		.popup__content {
			min-width: 95%;
		}
	}
	@media(max-width: 400px) {
		.main__block-btnbox {
			flex-direction: column;
		}
		.main__bg-sm {
			width: 232px;
			top: 34%;
			right: 6px;
		}
		.main__block-title {
			font-size: 28px;
		}
		.vacancy__descr-block {
			padding: 18px;
		}
		.start__page .primary-btn, .popup__content .primary-btn {
			width: 100%;
		}
	}
	@media(max-width: 350px) {
	.main__bg-sm {
		width: 207px;
		top: 38%;
		right: 6px;
	}
	.main__block-btn {
		width: 140px;
	}
	.main__block-descr {
		font-size: 15px;
		max-width: 190px;
	}
	.vacancies__item p {
		font-size: 17px;
	}
	.vacancies__item {
		padding: 14px;
	}
	.vacancies {
		padding-top: 50px;
		padding-bottom: 20px;
	}
	.vacancies__maintitle {
		font-size: 30px;
		margin-bottom: 25px;
	}
	.vacancies__section-title {
		font-size: 22px;
		margin-bottom: 16px;
	}
	.vacancies__section-title span {
		margin-right: 16px;
	}
	.vacancy__main-descr {
		font-size: 14px;
	}
	.vacancy__main {
		margin-bottom: 40px;
	}
	.vacancy__block-title {
		font-size: 28px;
	}
	.popup__content {
		padding: 16px;
	}
}
@media(max-width: 320px) {
	.main__bg-sm {
		display: none;
	}
	.main__block-title {
		max-width: 100%;		
		font-size: 26px;
	}

	.main__block-descr {
	max-width: 240px;
	}
	.main__block-btn {
		padding: 9px;
	}
	.main__block-content {
		padding-top: 80px;
		padding-bottom: 80px;
	}
	.vacancy__arrow {
		display: none;
	}
	.vacancy__block-title {
		font-size: 25px;
	}
	.vacancy__block-subtitle {
		font-size: 16px;
	}
	.vacancy__block-list li {
		font-size: 14px;
	}
}