:root {
    --blue-color: #0BA0FF;
    --light-blue-color: #E1F3FF;
    --semi-black-color: #242A43;
    --semi-black-color-80: #242A43CC;
    --semi-black-color-60: #242A4399;
    --light-gray-color: #EDF2FB;
    --light-grayv2-color: #F5F9FF;
    --gray-color: #D9D9D9;
    --dark-gray-color: #7B7F91;
    --dark-grayv2-color: #ADAFBC;
    --dark-gray-background-color: #56607B;
    --violet-color: #9045FF;
    --light-violet-color: #E2DDFB;
    --color-for-light-background: #F5F8FF;
    --darkblue-color: #4A56FF;
    --light-darkblue-color: #D8DFFB;

    --white-color-80: #FFFFFFCC;
    --green-color: #08B480;
    --light-green-color: #F0FFF5;
    --orange-color: #DB811C;
    --light-orange-color: #FFFDF0;
}

@font-face {
    font-family: 'Rubik Medium';
    src: url('../fonts/Rubik-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Rubik SemiBold';
    src: url('../fonts/Rubik-SemiBold.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Rubik Regular';
    src: url('../fonts/Rubik-Regular.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Rubik Italic';
    src: url('../fonts/Rubik-Italic.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}


html {
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
}

body {
    font-family: 'Rubik Regular', sans-serif;
    color: var(--semi-black-color-80);
    background-color: var(--light-gray-color);
    margin: 0px;
    line-height: 20px;
}

h5 {
    font-size: 20px;
    color: var(--semi-black-color);
    font-family: 'Rubik Medium', sans-serif;
}

h6 {
    font-size: 16px;
    color: var(--semi-black-color);
    font-family: 'Rubik Medium', sans-serif;
}

a {
    text-decoration: unset;
    color: var(--semi-black-color);
}

a:hover {
    color: #44527f;
    cursor: pointer;
    text-decoration: none;
}

b {
    font-family: 'Rubik Medium', sans-serif;
    font-weight: 500;
    color: var(--semi-black-color);
}

i {
    font-family: 'Rubik Italic', sans-serif;
}

button {
    border: none;
    outline: none;
    cursor: pointer;
}

input {
    outline: none;
}

.site-container {
    max-width: 1675px;
    width: 100%;
    margin: 0 auto;
}

.color-smb80 {
    color: var(--semi-black-color-80);
}

.small-container {
    max-width: 1375px;
    width: 100%;
    padding: 30px 0px;
}

.middle-container {
    max-width: 1460px;
    margin: 0 auto;
}

.extra-small-container {
    max-width: 1375px;
    width: 100%;
    margin: 0 auto;
    padding: 30px 0px;
}

.flex {
    display: flex;
}

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

.font-medium {
    font-family: 'Rubik Medium', sans-serif;
}

.font-semibold {
    font-family: 'Rubik SemiBold', sans-serif;
}

.blue-text {
    color: var(--blue-color);
}

.ref-recrut {
    background-color: var(--light-blue-color);
    font-size: 24px;
    padding: 8px 16px;
    border-radius: 40px;
    width: max-content;
}

.big-text {
    font-size: 54px;
    line-height: 1.1;
    color: var(--semi-black-color);
}

.small-star {
    width: 37px;
}

.f-s-16 {
    font-size: 16px;
}

.mg-t-20 {
    margin-top: 20px;
}

.mg-t-40 {
    margin-top: 40px;
}

.btn {
    color: #fff;
    font-size: 16px;
    border-radius: 10px;
    padding: 10px 24px;
    text-decoration: unset;
    display: flex;
    justify-content: center;
    align-items: center;
    height: fit-content;
}

.btn:hover {
    color: var(--light-gray-color);
}

.blue-btn {
    background-color: var(--blue-color);
    color: #fff;
    font-size: 14px;
    border-radius: 10px;
    padding: 10px 24px;
    text-decoration: unset;
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
}

.green-btn {
    background-color: var(--green-color);
    color: #fff;
    font-size: 14px;
    border-radius: 10px;
    padding: 10px 24px;
    text-decoration: unset;
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
}

.violet-btn {
    background-color: var(--violet-color);
    color: #fff;
}

.blue-btn:hover, .green-btn:hover {
    color: var(--light-gray-color);
}

.casual-btn {
    background-color: #fff;
    color: var(--semi-black-color);
    font-size: 14px;
    border-radius: 10px;
    padding: 10px 24px;
    text-decoration: unset;
    border: 1px solid var(--blue-color);
    text-align: center;
}

.gap-20 {
    gap: 20px;
}

.white-back {
    background-color: #fff;
}

.relative {
    position: relative;
}

.main-img {
    position: absolute;
    right: 0%;
    top: -23%;
    width: auto;
    height: 620px;
}

.p-b-50 {
    padding-bottom: 50px;
}

.arrow-down::after {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url('../img/arrow-down.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: 5px;
}

.f-s-15 {
    font-size: 15px;
}

.align-center {
    align-items: center;
}

.gray-border {
    border: 1px solid var(--gray-color);
    border-radius: 50px;
}

.pd-8-16 {
    padding: 8px 16px;
}

.search-input-container {
    position: relative;
    width: 200px;
    display: flex;
    align-items: center;
}

.header-mobile-menu-search-input .search-input-container {
    width: auto;
}

.vacancies-list-search-container .search-input-container {
    width: 100%;
}

.search-button {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: none;
    padding: 0;
    background: url('../img/search.png') center/contain no-repeat;
    cursor: pointer;
    z-index: 2;
}

.header-search-input {
    width: 100%;
    padding-left: 45px;
}

.search-button:focus {
    outline: none;
}

.search-button:hover {
    opacity: 0.7;
}

.search-button:focus-visible {
    outline: 2px solid #007bff;
    outline-offset: 2px;
    border-radius: 4px;
}

.vacancies-list-search-container .blue-btn {
    width: 100%;
    padding: 13px 24px;
}

.header-search-input {
    width: 100%;
    padding: 12px 12px 12px 40px;
    border: 1px solid var(--gray-color);
    border-radius: 14px;
    font-size: 14px;
}

.search-input-container .search-result {
    display: none;
}

.search-input-container .search-result.active {
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 50px;
    background: #fff;
    border: 1px solid var(--gray-color);
    border-radius: 14px;
    gap: 8px;
    padding: 10px 15px;
    width: 310px;
}

.blog-header-block-input-container .search-result {
    display: none;
}

.blog-header-block-input-container .search-result.active {
    width: 100%;
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 60px;
    background: #fff;
    border: 1px solid var(--gray-color);
    border-radius: 14px;
    gap: 8px;
    padding: 10px 15px;
}

.search-input-container .search-result.active a {
    color: var(--semi-black-color-80);
}

.all-companies-search-input-container .search-result.active {
    width: 100%;
    z-index: 10;
    top: 60px;
}

.f-s-14 {
    font-size: 14px;
}

.justify-between {
    justify-content: space-between;
}

.main-container {
    border-radius: 50px;
    overflow: hidden;
    margin-top: 10px;
}

.header-container {
    border-radius: 50px;
    margin-top: 10px;
    /*overflow: hidden;*/
}

.dropdown-container {
    display: inline-block;
}

.dropdown-trigger {
    padding: 10px 0px;
}

/* Само выпадающее меню */
.dropdown-menu {
    position: absolute;
    top: 74%;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;

    left: 0px;
    width: 100%;
    background: #fff;
    padding: 10px 20px;
    max-height: calc(100vh - 65px);
    overflow-y: auto;
    display: block;
    border: none;
    margin: 0px;
}

/* Отображение меню при наведении */
.dropdown-container:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Содержимое меню */
.dropdown-content {
    padding: 16px 0;
}

/* Пункты меню */
.dropdown-item {
    display: flex;
    align-items: center;
    padding: 12px;
    color: var(--semi-black-color);
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 14px;
    position: relative;
}

.dropdown-item:after {
    content: '';
    width: 20px;
    height: 20px;
    background-image: url('../img/arrow-right.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: 5px;
    position: absolute;
    right: 10px;
    display: none;
}

.dropdown-item:hover:after {
    display: inline-block;
}

.dropdown-item:hover {
    background-color: var(--light-gray-color);
    border-radius: 10px;
}

.dropdown-container:hover .arrow-down::after {
    transform: rotate(180deg);
}

footer {
    background-color: #fff;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    padding: 20px 0px;
}

.gap-60 {
    gap: 60px;
}

.gap-10 {
    gap: 10px;
}

hr {
    border: 0;
    border-top: 2px solid var(--light-gray-color);
    margin: 40px 0px;
}

hr.dark {
    border-top: 2px solid var(--gray-color);
    margin: 20px 0px;
}

.gray-text {
    color: var(--gray-color);
}

.flex-end {
    justify-content: flex-end;
}

.footer-link {
    color: var(--semi-black-color);
    text-align: right;
    margin-bottom: 10px;
}

p {
    color: var(--semi-black-color);
    margin: 0px;
}

.op-60 {
    opacity: 0.6;
}

.arrow-right-circle {
    position: relative;
}

/*.arrow-right-circle:after {
    content: '';
    width: 36px;
    height: 36px;
    background-image: url('../img/arrow-right-circle.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    right: 0px;
}*/

.recommend-block-inner .arrow-right-circle img {
    margin-right: 15px;
}

.recommend-block-inner .title {
    font-size: 20px;
    font-family: 'Rubik Medium', sans-serif;

}

.arrow-right-circle-black:after {
    background-image: url('../img/arrow-right-circle-black.svg');
}

.violet-gradient {
    background: linear-gradient(135deg, #9045FF 0%, #BC8FFF 100%);
    color: #fff;
}

.blue-gradient {
    background: linear-gradient(135deg, #0BA0FF 25%, #79CBFF 100%);
    color: #fff;
}

.violet-gradient:hover, .blue-gradient:hover {
    color: #fff;
}

.recommend-block {
    padding: 25px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
}

.sub-text {
    margin-top: 20px;
}

.m-side-0 {
    margin-left: 0px;
    margin-right: 0px;
}

.f-s-20 {
    font-size: 20px;
}

.our-site {
    border-radius: 20px;
    background-color: #fff;
}

.f-s-24 {
    font-size: 24px;
}

.partners-slider .owl-item img {
    width: auto;
    margin: 0 auto;
    max-height: 56px;
}

.f-s-48 {
    font-size: 48px;
}

.f-s-54 {
    font-size: 54px;
}

.text-center {
    text-align: center;
}

.recommends {
    background-color: var(--light-blue-color);
    padding: 0px 16px;
    border-radius: 40px;
}

.best-hunter {
    text-align: center;
    font-size: 24px;
    margin-top: 40px;
}

.violet-back {
    color: var(--violet-color);
    background-color: var(--light-violet-color);
    padding: 0px 16px;
    border-radius: 40px;
}

.best-candidates-block {
    background-color: #fff;
    border-radius: 20px;
    position: relative;
    margin-top: 40px;
    align-items: center;
    padding: 0 10px;
    overflow: hidden;
    color: var(--semi-black-color);
}

.best-candidates-block p {
    margin-top: 10px;
}

.best-candidates-block img {
    height: 115px;
    margin-top: -15px;
    transform: scale(1.4);
}

.marketolog-block-image {
    margin: 0 auto;
}

.marketolog-block-image.success-img {
    height: 65px;
}

.darkblue-gradient {
    background: linear-gradient(135deg, #333A58 0%, #6E7DBE 100%);
    color: #fff;
}

.darkblue-gradient-v2 {
    background: linear-gradient(
            144deg,
            #333A58 50%,
            #6B7AB9 100%
    );
    color: #fff;
}

.white-link {
    color: #fff;
    font-size: 18px;
    width: 100%;
    display: flex;
    align-items: center;
}

.white-link:hover {
    color: var(--light-gray-color);
}

.specialist-block-main {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 0 -15px;
    margin-top: 20px;
    align-items: stretch;
    color: var(--semi-black-color);
}

/* 1-й блок - Размещайте вакансии */
.specialist-block-main .specialist-block:nth-child(1) {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
}

/* 2-й блок - Получайте отклики (высокий блок) */
.specialist-block-main .specialist-block:nth-child(2) {
    grid-row: 1 / 3; /* Изменено: теперь занимает ряды 1-3 */
    grid-column: 2 / 3;
}

/* 3-й блок - Прогнозируйте стоимость */
.specialist-block-main .specialist-block:nth-child(3) {
    grid-row: 1 / 2;
    grid-column: 3 / 4;
}

/* 4-й блок - Квалификация кандидата (высокий блок) */
.specialist-block-main .specialist-block:nth-child(4) {
    grid-row: 2 / 4; /* Изменено: теперь занимает ряды 2-3 */
    grid-column: 1 / 2;
}

/* 5-й блок - Никаких подписок */
.specialist-block-main .specialist-block:nth-child(5) {
    grid-row: 3 / 4; /* Ряд 3 */
    grid-column: 2 / 3;
}

/* 6-й блок - Пора менять правила игры */
.specialist-block-main .specialist-block:nth-child(6) {
    grid-row: 2 / 4; /* Изменено: занимает ряды 2-3 */
    grid-column: 3 / 4;
}

.specialist-block-main .specialist-block .small-img, .specialist-block-companies .specialist-block .small-img {
    margin-right: 10px;
}

.specialist-block-main .specialist-block, .specialist-block-companies .specialist-block {
    padding: 20px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
    height: unset;
}

.small-text {
    margin-top: 20px;
}

.gray-bordered-block {
    border-radius: 20px;
    padding: 12px 16px;
    border: 1px solid var(--gray-color);
}

.row.mg-t-20 {
    display: flex;
    flex-wrap: wrap;
}

.row.mg-t-20 > .col-md-4 {
    display: flex;
    flex-direction: column;
}

.specialist-block {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.specialist-block .flex,
.specialist-block .small-text,
.specialist-block .gray-bordered-block {
    flex: 1;
}

h2 {
    font-size: 54px;
    font-family: 'Rubik SemiBold', sans-serif;
    margin: 0px;
    letter-spacing: -1px;
    color: var(--semi-black-color);
}

.font-italic {
    font-family: 'Rubik Italic', sans-serif;
}

.f-s-18 {
    font-size: 18px;
}

.l-h-26 {
    line-height: 26px;
}

.who-finds {
    padding: 50px;
    border-radius: 20px;
}

.who-finds-block {
    border-radius: 20px;
    padding: 32px;
    position: relative; /* Добавляем для позиционирования псевдоэлемента */
    height: 100%;
}

.f-s-32 {
    font-size: 32px;
}

.candidates-background {
    position: relative;
}

.candidates-background:after {
    content: '';
    background-image: url('../img/candidates_icon.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    right: 0px;
    width: 100%;
    height: 255px;
    bottom: 0px;
}

.light-gray-back {
    background-color: var(--light-grayv2-color);
}

ul {
    list-style: none;
    padding-left: 0;
}

ul.checked-list li {
    position: relative;
    padding-left: 30px; /* отступ для стрелки */
    margin-bottom: 10px;
    font-size: 18px;
    color: var(--semi-black-color);
}

ul.checked-list li span {
    color: #777D8D;
    font-size: 16px;
    margin-top: 10px;
    display: block;
}

ul.checked-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    transform: translateY(-50%);
    width: 24px;
    height: 23px;
    background-image: url('../img/arrow-check.png');
    background-size: contain;
    background-repeat: no-repeat;
}

ul.checked-list.white-check li {
    color: #fff;
}

.last-step-at-all ul.checked-list.white-check li {
    width: 300px;
}

ul.checked-list.white-check li::before {
    background-image: url('../img/white-check.png');
}

ul.checked-list.violet-list li::before {
    background-image: url('../img/arrow-check-violet.png');
}

.violet-text {
    color: var(--violet-color);
}

.darkblue-btn {
    border-radius: 12px;
    padding: 14px 24px;
    font-size: 16px;
    font-family: 'Rubik Medium', sans-serif;
    background-color: var(--semi-black-color);
    color: #fff;
    text-align: center;
    display: flex;
    width: fit-content;
}

.darkblue-btn:hover {
    color: var(--light-gray-color);
}

.row.mg-t-40 {
    display: flex;
    flex-wrap: wrap;
}

.who-finds-block ul {
    margin-top: 20px;
    height: 230px;
    padding-right: 10px;
    list-style: none;
    padding-left: 0;
    position: relative;
    z-index: 1;
    -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
}

/* Убираем псевдоэлемент, он больше не нужен */
.who-finds-block ul::after {
    display: none;
}

.who-finds-block ul.checked-list li {
    margin-bottom: 15px;
}

.who-finds-block .valuations-text {
    font-family: 'Rubik Medium', sans-serif;
    width: 220px;
    line-height: 30px;
}

.row.mg-t-40 .who-finds-block {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.how-works {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 30px;
}

.how-works .how-works-items {
    border-radius: 50px;
    font-size: 40px;
    font-family: 'Rubik Medium', sans-serif;
    padding: 6px 24px;
    line-height: 42px;
}

.blue-background {
    color: var(--blue-color);
    background-color: #D1E8FA;
}

.violet-background {
    color: var(--violet-color);
    background-color: var(--light-violet-color);
}

.darkblue-background {
    color: var(--darkblue-color);
    background-color: var(--light-darkblue-color);
}

.how-works-block {
    background-color: #fff;
    padding: 24px;
    font-size: 18px;
    border-radius: 20px;
    display: grid;
    grid-template-rows: auto 1fr auto auto;
}

.how-works-block .first, .how-works-block .second {
    position: relative;
    padding: 24px 32px;
    border-radius: 20px;
    font-size: 32px;
    font-family: 'Rubik Medium', sans-serif;
    overflow: hidden;
    line-height: 34px;
}

.how-works-block .first:after {
    content: '';
    background-image: url('../img/how_work1.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    right: -18%;
    width: 100%;
    height: 100%;
    bottom: 0px;
}

.how-works-block .second:after {
    content: '';
    background-image: url('../img/how_work2.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    right: -23%;
    width: 100%;
    height: 100%;
    bottom: 0px;
}

.timeline-list {
    list-style: none;
    margin-top: 30px;
    padding: 10px 32px;
}

.timeline-list li {
    position: relative;
    padding-left: 30px;
    padding-bottom: 20px;
    margin-bottom: 0;
}

.timeline-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    width: 16px;
    height: 16px;
    border: 2px solid #333;
    border-radius: 50%;
    background-color: white;
    z-index: 2;
}

.timeline-list li::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 19px;
    width: 2px;
    height: calc(100% - 16px);
    background-color: #333;
    z-index: 1;
}

.timeline-list li:last-child::after {
    display: none;
}

.timeline-list li:not(:last-child)::after {
    display: block;
}

.timeline-list li {
    min-height: 24px;
}

.timeline-list.blue-color li::before {
    border: 2px solid var(--blue-color);
}

.timeline-list.blue-color li::after {
    background-color: var(--blue-color);
}

.timeline-list.violet-color li::before {
    border: 2px solid var(--violet-color);
}

.timeline-list.violet-color li::after {
    background-color: var(--violet-color);
}

.how-works-block .with-image img {
    width: 34px;
    height: 34px;
}

.how-works-block .with-image {
    border-radius: 20px;
    gap: 20px;
    background-color: var(--color-for-light-background);
    padding: 20px 24px;
}

.how-works-blocks {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
}

.how-works-blocks .btn {
    font-size: 16px;
}

.w-100 {
    width: 100%;
}

.how-works-blocks > .col-md-6 {
    display: flex;
}

.blue-gradient.first, .violet-gradient.second {
    grid-row: 1;
}

.timeline-list.blue-color, .timeline-list.violet-color {
    grid-row: 2;
}

.how-works-block .flex.with-image {
    grid-row: 3;
}

.how-works-block .btn {
    grid-row: 4;
}

.routine-block {
    border-radius: 20px;
    padding: 40px 0px;
    overflow: hidden;
}

.mid-star {
    width: 50px;
}

ul.arrow-bordered-list {
    margin-bottom: 0px;
}

ul.arrow-bordered-list li {
    position: relative;
    margin-bottom: 10px;
    font-size: 18px;
    color: #fff;
    border: 1px solid var(--light-gray-color);
    border-radius: 50px;
    padding: 10px 10px 10px 40px;
    font-family: 'Rubik Medium', sans-serif;
    width: max-content;
    max-width: 100%;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    line-height: 24px;
}

ul.arrow-bordered-list li::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 23px;
    background-image: url('../img/arrow-chek-white.png');
    background-size: contain;
    background-repeat: no-repeat;
}

.we-get .title {
    line-height: 34px;
}

.we-get {
    border-radius: 20px;
    padding: 32px;
    position: relative;
}

.we-get:after {
    content: '';
    background-image: url('../img/we-get-marketolog.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    right: 30px;
    width: 212px;
    height: 210px;
    bottom: 0px;
}

.we-get:before {
    content: '';
    background-image: url('../img/frame-88.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    right: -5px;
    width: 90px;
    height: 90px;
    bottom: 50px;
    z-index: 3;
}

.blue-gradient-v2 {
    background: linear-gradient(135deg, #0BA0FF 0%, #36b0ff 100%);
    color: #fff;
}

.routine-block .block-1 {
    width: 62%;
}

.routine-block .block-2 {
    width: 6%;
}

.routine-block .block-3 {
    width: 32%;
}

.need-from-you-wrapper {
    position: relative;
}

.need-from-you-wrapper:before {
    content: '';
    background-image: url(../img/ellipse-routine.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    right: -110px;
    width: 468px;
    height: 333px;
    top: -100px;
    z-index: 1;
}

.need-from-you-wrapper:after {
    content: '';
    background-image: url(../img/ellipse-routine2.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    right: 60px;
    width: 468px;
    height: 333px;
    bottom: -70px;
    z-index: 1;
}

.need-from-you {
    border-radius: 20px;
    background-color: var(--semi-black-color);
    padding: 32px;
    position: relative;
    z-index: 2;
    height: 100%;
}

.semiblack-btn {
    color: #fff;
    background-color: var(--semi-black-color);
}

.semiblack-btn:hover {
    color: var(--light-gray-color);
}

.vacancy-block {
    border-radius: 20px;
    padding: 32px;
    background-color: #fff;
}

.need-from-you div {
    line-height: 40px;
}

.vacancy-block .partner-block {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.vacancy-block .award {
    color: var(--violet-color);
    background-color: var(--light-violet-color);
    padding: 12px 16px;
    font-family: 'Rubik Medium', sans-serif;
    border-radius: 50px;
    font-size: 18px;
    display: flex;
    align-items: center;
    height: 40px;
}

.vacancy-block .vacancy-name {
    font-family: 'Rubik Medium', sans-serif;
    font-size: 24px;
    margin-top: 20px;
    line-height: 28px;
    color: var(--semi-black-color);
    display: block;
}

.vacancy-block .partner-block .partner-icon {
    max-height: 56px;
    width: auto;
}

.vacancy-block .vacancy-point {
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    margin-bottom: 15px;
}

.vacancy-block .vacancy-points {
    margin-top: 20px;
}

.vacancy-block .vacancy-point span:first-child {
    color: var(--dark-gray-color);
}

.vacancy-point span:last-child {
    text-align: right;
}

.vacancy-block .vacancy-additional-info {
    border-radius: 12px;
    background-color: var(--color-for-light-background);
    padding: 16px 24px;
    display: flex;
    gap: 20px;
    margin-top: 25px;
    align-items: center;
}

.vacancy-block .vacancy-additional-info span {
    line-height: 20px;
}

.vacancy-block .vacancy-bottom {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    position: relative;
}

.vacancy-block .vacancy-buttons {
    display: flex;
    gap: 10px;
}

.vacancy-block .vacancy-buttons .btn, .vacancy-block .vacancy-buttons .blue-btn {
    font-size: 16px;
}

.vacancy-block .vacancy-respond {
    position: relative;
    width: fit-content;
    padding: 12px 20px 12px 20px;
    border: 1px solid var(--blue-color);
    color: var(--semi-black-color);
}

.vacancy-block .vacancy-respond:hover {
    color: #000;
}

.vacancy-block .vacancy-recommend {
    position: relative;
    width: fit-content;
    padding: 12px 20px 12px 20px;
}

.vacancy-recommend img {
    margin-right: 5px;
}

/*.vacancy-block .vacancy-recommend:before {
    content: '';
    background-image: url(../img/arrow-curve.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    left: 20px;
    width: 20px;
    height: 20px;
    bottom: 10px;
}*/

.vacancy-recommendations {
    display: flex;
    gap: 20px;
    color: var(--dark-grayv2-color);
    margin-top: 20px;
}

.vacancy-block .vacancy-rating {
    background-color: var(--light-blue-color);
    color: var(--blue-color);
    font-family: 'Rubik Medium', sans-serif;
    font-size: 16px;
    border-radius: 50px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.vacancy-block .vacancy-rating-hint, .top-block .vacancy-rating-hint {
    display: none;
    position: absolute;
    background-color: var(--semi-black-color);
    padding: 20px 24px;
    width: 350px;
    font-size: 16px;
    border-top-right-radius: 16px;
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
    right: 0px;
    top: -170px;
}

.vacancy-block .vacancy-rating-hint .title, .top-block .vacancy-rating-hint .title {
    font-family: 'Rubik Medium', sans-serif;
    color: #fff;
    font-size: 16px;
}

.vacancy-block .vacancy-rating-hint .text, .top-block .vacancy-rating-hint .text {
    margin-top: 10px;
    color: var(--light-gray-color);
}

.vacancy-block .vacancy-rating-hint.active, .top-block .vacancy-rating-hint.active {
    display: block;
}

.all-vacancies-btn {
    font-size: 16px;
    padding: 14px 28px;
}

.purple-arrow, .blue-arrow, .green-arrow {
    position: relative;
    padding-left: 30px;
}

.purple-arrow:before {
    content: '';
    background-image: url(../img/purple-arrow.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    left: 0px;
    width: 20px;
    height: 20px;
    top: 3px;
}

.blue-arrow:before {
    content: '';
    background-image: url(../img/blue-arrow.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    left: 0px;
    width: 20px;
    height: 20px;
    top: 0px;
}

.green-arrow:before {
    content: '';
    background-image: url(../img/green-arrow.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    left: 0px;
    width: 20px;
    height: 20px;
    top: 0px;
}

.full-width {
    margin: 0;
}

.mobile-burger-menu-btn {
    background-image: url("../img/menu.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 32px;
    height: 32px;
    background-color: inherit;
}

.mobile-menu-close-btn {
    background-image: url("../img/btn-close.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 32px;
    height: 32px;
    background-color: #fff;
}

header {
    z-index: 10;
}

.breadcrumbs-wrapper {
    padding: 20px 0;
}

.breadcrumbs-compact {
    max-width: 1375px;
    margin: 0 auto;
    padding: 0px;
    display: block;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.breadcrumb-home,
.breadcrumb-link,
.breadcrumb-current {
    font-size: 14px;
    text-decoration: none;
    padding: 4px 0;
    margin-right: 10px;
}

.breadcrumb-home,
.breadcrumb-link {
    color: var(--dark-grayv2-color);
    transition: color 0.3s ease;
}

.breadcrumb-home:hover,
.breadcrumb-link:hover {
    color: var(--blue-color);
}

.breadcrumb-current {
    color: var(--dark-grayv2-color);
}

.breadcrumb-separator {
    position: relative;
    width: 20px;
    height: 20px;
    margin: 0px;
    margin-right: 15px;
}

.breadcrumb-separator::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    background-image: url('../img/breadcrumb-arrow.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.6;
}

.breadcrumbs-wrapper.dark .breadcrumb-separator::before {
    background-image: url('../img/breadcrumb-arrow-dark.svg');
}

.unites-companies {
    border-radius: 20px;
    overflow: hidden;
    padding-bottom: 50px;
}

.vacancies-main-block {
    border-radius: 20px;
    overflow: hidden;
    padding-bottom: 50px;
}

.unites-companies .main-img {
    position: absolute;
    right: -17%;
    top: -51%;
    width: auto;
    height: 800px;
}

.ref-recrut-block-title {
    font-family: 'Rubik SemiBold', sans-serif;
    font-size: 48px;
    color: #fff;
    margin-top: 20px;
    line-height: 54px;
}

.darkgray-back {
    background-color: var(--dark-gray-background-color);
    color: #fff;
}

.darkgray-color {
    color: var(--dark-grayv2-color);
}

.time-to-pay-block {
    margin-top: 40px;
}

.time-to-pay-block .company-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--light-gray-color);
    border-radius: 20px;
    padding: 24px 10px;
    gap: 20px;
}

.time-to-pay-block .company-block .company-block-text {
    width: 80%;
    text-align: center;
}

.time-to-pay-block .company-logo {
    max-width: 120px;
}

.time-to-pay-block-1 {
    background-color: var(--light-gray-color);
    border-bottom-left-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.time-to-pay-block-1 {
    background-color: transparent;
    padding: 30px;
    position: relative;
    z-index: 2;
    padding-right: 20px;
}

.time-to-pay-block-1::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: -30px;
    bottom: 0;
    background-color: var(--light-gray-color);
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    z-index: -1;
}

.time-to-pay-block-2 {
    background-color: #242A44;
    border-radius: 20px;
    color: var(--dark-grayv2-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 40px;
    background-image: url(../img/time-to-pay-block-2.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    gap: 10px;
    position: relative;
    z-index: 4;
    margin-left: -30px;
}

.time-to-pay-block-2 .title {
    line-height: 30px;
}

.time-to-pay-block.earn-block .time-to-pay-block-2 {
    background-image: url(../img/time-to-pay-block-2-purple.png);
    justify-content: space-between;
}

.white-color {
    color: #fff;
}

.white-half-opacity {
    padding: 20px 70px 20px 20px;
    position: relative;
    display: inline-block;
    text-decoration: none;
    color: white;
    border-radius: 20px;
    line-height: 22px;
    z-index: 1;
    background: linear-gradient(
            to right,
            rgba(255, 255, 255, 0.15) 0%,
            rgba(255, 255, 255, 0.12) 70%,
            rgba(255, 255, 255, 0) 100%
    );
}

.white-half-opacity::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    border-radius: 20px;
    padding: 1px;
    background: linear-gradient(
            to right,
            #fff 0%,           /* Белый слева */
            rgba(255, 255, 255, 0.8) 30%,   /* Чуть прозрачнее */
            rgba(255, 255, 255, 0.4) 60%,   /* Еще прозрачнее */
            rgba(255, 255, 255, 0) 100%     /* Полностью прозрачный справа */
    );
    -webkit-mask:
            linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.time-to-pay-block.earn-block .white-half-opacity {
    font-size: 24px;
    line-height: 28px;
    font-family: 'Rubik Italic', sans-serif;
}

.time-to-pay-block.earn-block .white-half-opacity:hover {
    color: #fff;
}

.time-to-pay-block.earn-block .white-half-opacity:after {
    display: none;
}

.white-half-opacity:hover {
    color: var(--light-gray-color);
}

.lightgray-back {
    background-color: var(--light-gray-color);
}

.lightgray-back-v2 {
    background-color: var(--light-gray-color);
}

.white-half-opacity::after {
    content: '';
    position: absolute;
    bottom: 10px;
    right: 20px;
    transform: translate(-50%, -50%);
    width: 25px;
    height: 25px;
    background-image: url(../img/arrow-right-circle.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.time-to-pay-block-1 .warning {
    position: relative;
    padding: 5px;
    padding-left: 35px;
    line-height: 20px;
    font-family: 'Rubik Medium', sans-serif;
}

.time-to-pay-block-1 .warning:before {
    content: '';
    position: absolute;
    top: 20px;
    left: 10px;
    transform: translate(-50%, -50%);
    width: 25px;
    height: 25px;
    background-image: url(../img/blue-warning.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.all-you-want-from-hire {
    padding: 30px 40px;
    border-radius: 20px;
    background-color: var(--light-grayv2-color);
}

.all-you-want-from-hire .title {
    width: 810px;
}

.all-you-want-block {
    background-color: #fff;
    padding: 20px 25px 20px 55px;
    border-radius: 20px;
    line-height: 20px;
}

.all-you-want-block:before {
    content: '';
    position: absolute;
    top: 33px;
    left: 45px;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 23px;
    background-image: url(../img/arrow-check.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.all-you-want-block .ayw-title {
    font-size: 18px;
    font-family: 'Rubik Medium', sans-serif;
    color: var(--semi-black-color);
    margin-bottom: 10px;
}

.all-you-want-block .ayw-description {
    font-size: 16px;
    color: #4D536B;
}

.all-you-want-blocks {
    margin-top: 40px;
}

.all-you-want-blocks .row {
    margin-bottom: 20px;
}

.recruters {
    background-image: url(../img/green-blue-back.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    justify-content: center;
    margin: 0 auto;
    text-align: center;
}

.recruters .recruters-image {
    display: flex;
    justify-content: space-around;
}

.recruters-title {
    font-size: 54px;
    font-family: 'Rubik SemiBold', sans-serif;
    display: flex;
    align-items: center;
    color: #fff;
    margin: 0 auto;
    margin-bottom: 50px;
    margin-top: 40px;
    line-height: 50px;
}

.recruters-subblock {
    padding: 170px 0px;
}

.recruters-advantage {
    background-color:var(--semi-black-color);
    padding: 20px 10px 20px 45px;
    border-radius: 20px;
    line-height: 20px;
}

.recruters-advantage:before {
    content: '';
    position: absolute;
    top: 28px;
    left: 38px;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 23px;
    background-image: url(../img/arrow-chek-white.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.recruters-advantages {
    max-width: 908px;
    margin: 0 auto;
}

.recruters-advantage .recruters-advantage-title {
    text-align: left;
    color: #fff;
}

.our-site-description {
    text-align: center;
}

.how-its-work {
    color: var(--dark-grayv2-color);
    background-color: var(--semi-black-color);
    width: 100%;
}

.how-its-work-title {
    font-size: 54px;
    color: #fff;
    font-family: 'Rubik Medium', sans-serif;
    line-height: 54px;
    margin-bottom: 20px;
}

.how-its-work-resume {
    padding: 50px 0px;
    position: relative;
    overflow: hidden;
    padding-bottom: 0px;
}

.how-its-work-resume:after {
    background-color: var(--semi-black-color);
    bottom: -60px;
    position: absolute;
    content: '';
    width: 100%;
    height: 63px;
    z-index: -1;
}

.how-its-work-description {
    font-size: 18px;
    color: #ffffffcc;
    margin-top: 30px;
}

.how-its-work .how-its-work-description {
    width: 560px;
}

.how-its-work-steps {
    display: flex;
    margin-top: 60px;
}

.how-its-work-step {
    background-color: transparent;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: 19%;
    padding: 30px 35px 40px 30px;
    height: auto;
}

.how-its-work-resume .how-its-work-step {
    width: 24%;
    min-height: 220px;
    height: 220px;
}

.how-its-work-resume .how-its-work-step.last-step {
    width: 28%;
}

.how-its-work-resume .how-its-work-step.last-step-at-all {
    width: 52%;
    padding-bottom: 0px;
}

.how-its-work-step .number {
    background-color: var(--blue-color);
    border-radius: 50px;
    width: 36px;
    height: 36px;
    font-size: 16px;
    color: #fff;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.how-its-work-resume .how-its-work-step .number {
    background-color: var(--green-color);
}

.how-its-work-step .how-its-work-step-title {
    font-family: 'Rubik Medium', sans-serif;
    font-size: 18px;
    color: #fff;
    margin-bottom: 10px;
}

.how-its-work-step .how-its-work-step-description {
    line-height: 20px;
    color: #ffffffcc;
    margin-bottom: 20px;
    font-size: 15px;
}

.how-its-work-step .how-its-work-step-description b {
    color: #ffffffcc;
}

.how-its-work-step .blue-btn {
    font-size: 16px;
}

.how-its-work-step.right-side-step::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: -30px;
    bottom: 0;
    background-color: var(--semi-black-color);
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    z-index: -1;
    border: 1px solid #D9D9D966;
}

.how-its-work-step.right-side-step.first-step::before {
    background-color: #535C85;
    border: none;
}

.how-its-work-step.last-step {
    width: 24%;
}

.how-its-work-step.right-side-step.last-step::before {
    border-radius: 20px;
}

.how-its-work-step.last-step-at-all {
    width: 43%;
    overflow: hidden;
}

.how-its-work-step.last-step-at-all .number {
    background-color: #fff;
    color: var(--blue-color);
}

.how-its-work-step.last-step-at-all .how-its-work-step-description {
    width: 60%;
}

.how-its-work-step.last-step-at-all::before {
    background: linear-gradient(164deg, #0BA0FF 60%, #79CBFF 100%);
    border-radius: 20px;
    border: none;
}

.how-its-work-resume .how-its-work-step.last-step-at-all::before {
    background: linear-gradient(164deg, #27CB99 60%, #27CB99AB 100%);
}

.how-its-work-step.right-side-step.last-step-at-all::before, .how-its-work-step.right-side-step.last-step::before {
    right: 0px;
}

.how-its-work-step.last-step-at-all::after {
    content: '';
    position: absolute;
    bottom: -19%;
    right: -25%;
    width: 100%;
    height: 100%;
    background-image: url(../img/hiw-last-step.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.how-its-work-resume .how-its-work-step.last-step-at-all::after {
    content: '';
    position: absolute;
    bottom: -9%;
    right: -2%;
    width: 330px;
    height: 100%;
    background-image: url(../img/how-its-work-resumev2.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.how-its-work .small-container {
    padding: 90px 0px;
    padding-bottom: 0px;
}

.green-gradient {
    background: linear-gradient(164deg, #27CB99 60%, #27CB99AB 100%);
    color: #fff;
}

.flexible-bonus {
    position: relative;
    overflow: hidden;
    padding-bottom: 90px;
}

.hiring-process-block .specialist-block {
    height: auto;
}

.hiring-process-block .row.mg-t-20.d-none.d-md-flex {
    display: flex;
}

.hiring-process-block .row.mg-t-20.d-none.d-md-flex .col-md-4 {
    display: flex;
    flex-direction: column;
}

/* Фиксируем первый блок */
.hiring-process-block .row.mg-t-20.d-none.d-md-flex .specialist-block.blue-gradient {
    flex-shrink: 0;
}

/* Растягиваем второй блок в каждой колонке */
.hiring-process-block .row.mg-t-20.d-none.d-md-flex .specialist-block.white-back {
    flex: 1;
}

.hiring-process-block {
    padding: 80px 0px;
}

.economy-with-us {
    overflow: hidden;
    display: flex;
    padding: 32px;
    position: relative;
    max-height: 190px;
    height: 100%;
    align-items: center;
    border-radius: 20px;
    margin-top: 20px;
}

.economy-with-us::after {
    content: '';
    position: absolute;
    bottom: -66%;
    right: 2%;
    width: 400px;
    height: 340px;
    background-image: url(../img/clock-flash.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.white-btn {
    display: flex;
    padding: 10px 60px;
    width: fit-content;
    color: var(--blue-color);
    background-color: #fff;
    border-radius: 12px;
    align-items: center;
}

.f-s-40 {
    font-size: 40px;
}

.security-and-safe {
    display: flex;
}

.security-and-safe-img {
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 600px;
}

.security-and-safe-text-block {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    gap: 40px;
}

.security-and-safe ul.checked-list li {
    margin-bottom: 15px;
}

.darkblue-gradient-v3 {
    background: linear-gradient(120deg, #0BA0FF, #437AFF);
    color: #fff;
}

.ready-to-hire {
    padding: 50px;
    border-radius: 20px;
    display: flex;
    overflow: hidden;
    position: relative;
    margin-bottom: 50px;
}

.ready-to-hire .ready-to-hire-img img{
    position: absolute;
    bottom: -70px;
}

.ready-to-hire-text-block-title {
    font-size: 54px;
    line-height: 60px;
    font-family: 'Rubik Medium', sans-serif;
    color: #ffffff;
    margin-bottom: 20px;
}

.ready-to-hire-text-block-description {
    color: #ffffff;
}

.ready-to-hire-text-block {
    display: flex;
    flex-direction: column;
}

.ready-to-hire-text-block-small .ready-to-hire-text-block-title {
    font-size: 24px;
    line-height: 30px;
}

.ready-to-hire.ready-to-hire-text-block-small {
    padding: 30px;
    padding-bottom: 0px;
}

.ready-to-hire.ready-to-hire-text-block-small .ready-to-hire-img img {
    position: relative;
    bottom: 0px;
    width: 420px;
}

.ready-to-hire.ready-to-hire-text-block-small .ready-to-hire-buttons .white-btn {
    padding: 14px 20px;
}

.ready-to-hire.ready-to-hire-text-block-small .ready-to-hire-text-block {
    padding: 0px;
    width: 90%;
}

.ready-to-hire.ready-to-hire-text-block-small .ready-to-hire-buttons {
    margin-top: 20px;
}

.simple-text {
    font-size: 18px;
    line-height: 24px;
}

.medium-title {
    font-size: 32px;
    font-family: 'Rubik SemiBold', sans-serif;
    color: var(--semi-black-color);
}

.about-us-block .simple-text {
    margin-top: 30px;
}

.about-us-block .medium-title {
    margin-top: 40px;
}

.ready-to-hire-buttons {
    display: flex;
    margin-top: 40px;
    gap: 20px;
}

.ready-to-hire-buttons .btn {
    border: 1px solid #ffffffcc;
    border-radius: 12px;
}

.ready-to-hire-buttons .white-btn {
    padding: 10px 20px;
    gap: 20px;
    font-family: 'Rubik SemiBold', sans-serif;
}

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

.blog-header-block {
    border-radius: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    max-width: 900px;
}

h1 {
    font-size: 54px;
    font-family: 'Rubik SemiBold', sans-serif;
    color: var(--semi-black-color);
}

.blog-header-block-description {
    font-size: 18px;
    text-align: center;
    margin-bottom: 30px;
    width: 510px;
}

.blog-header-block-input-container {
    position: relative;
    width: 100%;
}

.blog-header-block-input-container .search-button {
    right: 15px;
    left: unset;
}

/*.blog-header-block-input-container::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: url(../img/search.png) center / contain no-repeat;
    z-index: 2;
    pointer-events: none;
}*/

.blog-header-block-input-search {
    width: 100%;
    padding: 15px 12px 15px 12px;
    border: none;
    border-radius: 14px;
    font-size: 14px;
}

.blog-sections {
    max-width: 900px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin: 0 auto;
    justify-content: center;
    margin-top: 40px;
}

.blog-sections .blog-section {
    background-color: var(--light-gray-color);
    padding: 18px 24px;
    color: var(--semi-black-color);
    display: flex;
    align-items: center;
    border-radius: 12px;
    white-space: nowrap;
    flex-shrink: 0;
}

.blog-sections .blog-section.active {
    background-color: var(--blue-color);
    color: #fff;
}

.blog-sections .blog-section.active:hover {
    color: #fff;
}

.blog-items {
    margin-top: 30px;
}

.blog-items .blog-item .blog-item-img {
    border-radius: 20px;
}

.blog-items .blog-item .blog-item-date {
    color: #7B7E8E;
    font-size: 18px;
    margin-top: 20px;
}

.blog-items .blog-item .blog-item-title {
    color: var(--semi-black-color);
    font-size: 20px;
    font-family: 'Rubik Medium', sans-serif;
    margin-top: 20px;
    display: block;
}

.blog-items .blog-item .blog-item-url {
    color: var(--blue-color);
    font-size: 16px;
    position: relative;
    margin-top: 30px;
    display: block;
    width: fit-content;
}

.blog-items .blog-item .blog-item-url:after {
    content: '';
    position: absolute;
    bottom: 10%;
    right: -40%;
    width: 16px;
    height: 16px;
    background-image: url(../img/blog-arrow.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.blog-items .blog-item {
    margin-bottom: 30px;
}

.load-more-btn {
    border-radius: 12px;
    border: 1px solid var(--blue-color);
    padding: 12px;
    position: relative;
    color: var(--semi-black-color);
    padding-left: 20px;
    display: flex;
    align-items: center;
    width: fit-content;
    padding-right: 20px;
    gap: 10px;
    justify-content: center;
}

.pagination-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
}

.pagination-block {
    display: flex;
    gap: 10px;
}

.pagination-block .pagination-link {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    color: #242A4366;
}

.pagination-block .pagination-link.active {
    color: var(--blue-color);
}

.blog-container {
    margin-bottom: 60px;
}

.simple-text {
    font-size: 16px;
    color: var(--semi-black-color-80);
}

.blog-detail-card-body h1 {
    font-size: 44px;
}

h3 {
    font-size: 32px;
    font-family: 'Rubik SemiBold', sans-serif;
    color: var(--semi-black-color);
}

.blog-detail-card-body h3 {
    margin-bottom: 20px;
}

.advice {
    background-color: #0BA0FF2E;
    padding: 32px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-top-right-radius: 20px;
    margin: 40px 0px;
}

.advice div, .advice p {
    margin-bottom: 20px;
}

.gray-text-60 {
    color: var(--semi-black-color-60);
}

.useful-info {
    background-color: #F1E7FF;
    padding: 32px;
    border-radius: 20px;
    margin: 40px 0px;
}

.useful-info .useful-info-title {
    font-family: 'Rubik SemiBold', sans-serif;
    font-size: 20px;
    padding: 0px 0px 20px 50px;
    position: relative;
}

.useful-info .useful-info-title:before {
    content: '';
    position: absolute;
    bottom: 15px;
    left: 0px;
    width: 32px;
    height: 32px;
    background-image: url(../img/useful-info.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.blue-bold {
    color: var(--blue-color);
    font-family: 'Rubik Medium', sans-serif;
}

.blog-detail-card-body .useful-info p {
    margin: 0px;
}

.blog-detail-card-body .author-block {
    margin-top: 20px;
}

.blog-detail-card-body .blog-detail-img {
    border-radius: 20px;
    width: 100%;
    margin-top: 40px;
    margin-bottom: 40px;
}

.blog-detail-card-body .blog-detail-img img {
    width: 100%;
}

.blog-detail-card-body .blog-detail-text {
    margin-top: 40px;
}

.blog-detail-author {
    color: var(--semi-black-color-60);
}

.blog-detail-author .author {
    font-family: 'Rubik SemiBold', sans-serif;
}

.blog-detail-author .blod-detail-date {
    margin-top: 10px;
}

.blog-detail-card-body .author-block {
    display: flex;
    justify-content: space-between;
}

.blog-detail-card-body .share-btn {
    position: relative;
    border-radius: 12px;
    color: #fff;
    background-color: var(--semi-black-color);
    padding: 10px 40px 10px 60px;
}

.blog-detail-card-body .share-btn:before {
    content: '';
    position: absolute;
    bottom: 20%;
    left: 25px;
    width: 24px;
    height: 23px;
    background-image: url(../img/share-arrow.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.blog-detail-card-body p {
    margin-bottom: 20px;
    line-height: 24px;
}

.quote-block-text {
    background-color: var(--light-gray-color);
    padding: 20px;
    display: flex;
    gap: 20px;
    flex-direction: column;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
}

ul.point-list {
    margin-top: 20px;
}

ul.point-list a{
    color: var(--blue-color);
}

ul.point-list.mg-t-0 {
    margin-top: 0px;
}

ul.point-list li {
    list-style: disc;
    margin-left: 30px;
    margin-top: 14px;
    margin-bottom: 14px;
}

ul.line-list {
    list-style: none;
    padding: 0;
}

ul.line-list li {
    position: relative;
    padding-left: 20px;
    margin-top: 14px;
    margin-bottom: 14px;
}

ul.line-list li::before {
    content: '—';
    position: absolute;
    left: 0;
    font-weight: bold;
}

ol.numbered-list {
    padding-left: 20px;
}

ol.numbered-list li {
    font-family: 'Rubik Medium', sans-serif;
    padding-left: 10px;
    margin-top: 14px;
    margin-bottom: 14px;
}

ol.numbered-list li span {
    display: block;
    font-family: 'Rubik Regular', sans-serif;
    margin-top: 8px;
}

.text-block-with-line {
    border-left: 4px solid var(--gray-color);
    padding-left: 20px;
    margin: 0px 0;
}

.blog-detail-card-body .ready-to-hire-text-block-title {
    font-size: 24px;
    line-height: 24px;
    margin-bottom: 10px;
}

.blog-detail-card-body .ready-to-hire .ready-to-hire-img img {
    bottom: -30px;
}

.blog-detail-card-body .ready-to-hire-buttons {
    margin-top: 25px;
}

.blog-detail-card-body .ready-to-hire {
    padding: 30px 15px;
}

.blog-detail-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.blog-detail-navigation a {
    position: relative;
    display: flex;
    border-radius: 12px;
    border: 1px solid var(--blue-color);
    padding: 12px;
    color: var(--semi-black-color);
    align-items: center;
    width: fit-content;
}

.blog-detail-navigation .prev-nav {
    padding-left: 50px;
    padding-right: 30px;
}

.blog-detail-navigation .prev-nav:before {
    content: '';
    position: absolute;
    bottom: 32%;
    left: 10%;
    width: 16px;
    height: 16px;
    background-image: url(../img/blog-arrow.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: rotate(180deg);
}

.blog-detail-navigation .next-nav {
    padding-left: 30px;
    padding-right: 50px;
}

.blog-detail-navigation .next-nav:after {
    content: '';
    position: absolute;
    bottom: 32%;
    right: 10%;
    width: 16px;
    height: 16px;
    background-image: url(../img/blog-arrow.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.recommend-vacancies {
    padding: 32px;
    color: var(--semi-black-color);
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    border: 1px solid var(--gray-color);
}

.recommend-vacancies .recommend-vacancies-title {
    font-size: 24px;
    font-family: 'Rubik Medium', sans-serif;
}

.recommend-vacancies .recommend-vacancy {
    border-bottom: 1px solid var(--gray-color);
    padding: 25px 0px;
}

.recommend-vacancies .recommend-vacancy:last-child {
    border-bottom: none;
    padding-bottom: 0px;
}

.recommend-vacancies .recommend-vacancy .recommend-vacancy-btn {
    position: relative;
    border-radius: 12px;
    color: #fff;
    background-color: var(--semi-black-color);
    padding: 10px 40px 10px 40px;
    display: flex;
}

.recommend-vacancies .recommend-vacancy .recommend-vacancy-head-img {
    max-width: 100px;
}

.recommend-vacancies .recommend-vacancy .recommend-vacancy-head-img img {
    width: 100%;
    height: auto;
}

.recommend-vacancies .recommend-vacancy .recommend-vacancy-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 20px;
}

.recommend-vacancies .recommend-vacancy .recommend-vacancy-title {
    font-size: 18px;
    font-family: 'Rubik Medium', sans-serif;
    margin-bottom: 20px;
    display: block;
}

.recommend-vacancies .recommend-vacancy .recommend-vacancy-award {
    color: var(--violet-color);
    background-color: var(--light-violet-color);
    padding: 12px 16px;
    font-family: 'Rubik Medium', sans-serif;
    border-radius: 50px;
    font-size: 14px;
    display: flex;
    align-items: center;
    height: 40px;
    width: fit-content;
}

.who-finds-block-title {
    line-height: 32px;
}

.we-get-candidates-title {
    line-height: 52px;
}

.auth-block {
    max-width: 450px;
    width: 450px;
    display: flex;
    flex-direction: column;
}

.auth-block .logo {
    margin: 0 auto;
}

.auth-window {
    padding: 40px;
    background: #fff;
    border-radius: 12px;
    margin-top: 30px;
}

.auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    flex-direction: column;
    margin: 0 20px;
}

.centered-block {
    width: 500px;
    padding: 40px;
    background: #fff;
    border-radius: 12px;
}

.auth-window {
    background-color: #fff;
    border-radius: 20px;
    padding: 40px;
}

.auth-window .auth-window-title {
    font-size: 24px;
    font-family: 'Rubik SemiBold', sans-serif;
    color: var(--semi-black-color);
    text-align: center;
}

.floating-input {
    position: relative;
    margin-bottom: 24px;
    width: 100%;
    margin-top: 24px;
    font-family: 'Rubik Regular', sans-serif;
}

.input-wrapper {
    position: relative;
    width: 100%;
}

.input-wrapper.date::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-image: url('../img/calendar.svg'); /* Ваша иконка */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none; /* Чтобы клик проходил сквозь иконку к инпуту */
    z-index: 1;
}

.form-input {
    width: 100%;
    height: 56px;
    padding: 8px 16px 8px 16px;
    font-size: 16px;
    line-height: 1.5;
    color: #242A43;
    background-color: #fff;
    border: 1px solid var(--gray-color);
    border-radius: 12px;
    outline: none;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

/* Лейбл */
.floating-label {
    position: absolute;
    top: 50%;
    left: 15px; /* Совпадает с padding-left инпута */
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--gray-color);
    pointer-events: none;
    transition: all 0.3s ease;
    background-color: transparent;
    padding: 0 4px;
    z-index: 1;
}

/* Когда инпут в фокусе или заполнен */
.form-input:focus,
.form-input:not(:placeholder-shown) {
    padding-top: 24px;
    padding-bottom: 8px;
}

.form-input:focus {
    border: 1px solid var(--blue-color);
}

.form-input:focus + .floating-label,
.form-input:not(:placeholder-shown) + .floating-label {
    top: 5px;
    transform: translateY(0);
    font-size: 12px;
}

/* Иконка */
.input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #757575;
    transition: color 0.3s ease;
    z-index: 2;
}

/* Стили для ошибки */
.floating-input.error .form-input {
    border-color: #FF3B30;
    background-color: #FDEDEE;
}

.floating-input.error .form-input:focus {
    border-color: #FF3B30;
    box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.1);
}

.floating-input.error .floating-label {
    color: #FF3B30;
}

.floating-input.error .input-icon {
    color: #FF3B30;
}

.floating-input.error .error-message {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* Сообщение об ошибке */
.error-message {
    display: none;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.4;
    color: #FF3B30;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

/* Ховер эффекты */
.form-input:hover:not(:focus):not(.error) {
    border-color: var(--gray-color);
}

/* Disabled состояние */
.form-input:disabled {
    background-color: #F5F5F5;
    border-color: #E0E0E0;
    color: var(--gray-color);
    cursor: not-allowed;
}

.form-input:disabled + .floating-label {
    color: var(--gray-color);
}

/* Для разных типов инпутов */
.form-input[type="password"] {
    letter-spacing: 1px;
}

.password-input {
    padding-right: 60px; /* Место для кнопки глаза */
    letter-spacing: 1px; /* Для лучшей читаемости точек */
}

.toggle-password {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #757575;
    padding: 0;
    border-radius: 4px;
    transition: all 0.2s ease;
    z-index: 2;
}

.toggle-password:focus {
    border: none;
}

.auth-window .blue-btn {
    width: 100%;
    padding: 16px 24px;
    font-size: 15px;
}

button:focus,
button:active {
    outline: none;
}

.forgot-password-link {
    display: flex;
    font-family: 'Rubik Medium', sans-serif;
    font-size: 14px;
    justify-content: space-around;
    color: var(--blue-color);
    margin: 20px 0px;
}

.create-lk-link {
    display: flex;
    font-size: 14px;
    justify-content: space-around;
    color: var(--blue-color);
    padding: 16px;
    border-radius: 12px;
    border: 1px solid var(--blue-color);
}

.auth-notification {
    background-color: var(--semi-black-color);
    border-radius: 12px;
    font-size: 12px;
    padding: 16px;
    padding-left: 40px;
    line-height: 16px;
    position: relative;
}

.auth-notification:before {
    content: '';
    position: absolute;
    top: 12%;
    left: 4%;
    width: 16px;
    height: 16px;
    background-image: url(../img/white-warning.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.auth-notification .auth-notification-title {
    font-family: 'Rubik SemiBold', sans-serif;
    color: #fff;
}

.auth-notification .auth-notification-text {
    color: var(--dark-grayv2-color);
    margin-top: 5px;
}

.checkbox-container, .radio-container {
    display: flex;
    align-items: flex-start;
    padding: 20px 0px;
    border-radius: 10px;
}

.privacy-text .checkbox-container .checkbox-text, .privacy-text .radio-container .checkbox-text {
    font-size: 12px;
    line-height: 14px;
}

.have-account {
    width: 100%;
    text-align: center;
    font-family: 'Rubik Medium', sans-serif;
    font-size: 14px;
    margin-top: 30px;
}

/* Скрываем нативный чекбокс */
.custom-checkbox {
    display: none;
}

/* Кастомный чекбокс */
.checkbox-label {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    user-select: none;
    width: 100%;
}

.checkmark {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    margin-right: 15px;
    position: relative;
    transition: all 0.3s ease;
}

.blue-square {
    background-color: #0BA0FF2E;
}

.privacy-text .checkmark {
    background-color: var(--blue-color);
}

.custom-checkbox:checked + .checkbox-label .checkmark {
    background-color: var(--blue-color);
}

/* Белая галочка */
.custom-checkbox:checked + .checkbox-label .checkmark::after
{
    content: '';
    position: absolute;
    left: 7px;
    top: 3px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.consent-label .checkmark::after
{
    content: '';
    position: absolute;
    left: 6px;
    top: 1px;
    width: 5px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-text {
    font-size: 16px;
    color: var(--dark-grayv2-color);
    font-weight: 500;
}

.forgot-password-text {
    font-size: 14px;
    text-align: center;
    margin-top: 20px;
}

.auth-window .blue-btn {
    margin-top: 10px;
    display: inline;
}

.darkblue-gradient-v2 .big-text {
    color: #fff;
}

.vacancy-detail-card-body {
    background-color: #fff;
    padding: 30px;
    border-radius: 20px;
    margin-bottom: 30px;
}

.vacancy-detail-card-body p {
    margin-top: 20px;
    color: var(--semi-black-color-80);
}

.vacancy-detail-card-body h1 {
    font-size: 44px;
    margin-top: 30px;
}

.vacancy-reward-block {
    display: flex;
    justify-content: space-between;
}

.vacancy-reward-block .award {
    color: var(--violet-color);
    background-color: var(--light-violet-color);
    padding: 12px 16px;
    font-family: 'Rubik Medium', sans-serif;
    border-radius: 50px;
    font-size: 18px;
    display: flex;
    align-items: center;
    height: 40px;
    width: fit-content;
}

.vacancy-reward-block .award img {
    margin-right: 10px;
}

.recommend-block-outer {
    display: flex;
}

.how-all-work h2 {
    text-align: center;
}

.vacancy-detail-card-body .vacancy-points .vacancy-point {
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    margin-bottom: 15px;
}

.vacancy-detail-card-body .big-text {
    font-size: 24px;
    font-family: 'Rubik Medium', sans-serif;
}

.vacancy-detail-card-body .useful-info {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px 25px;
    border-radius: 12px;
}

.vacancy-detail-card-body .useful-info p {
    margin-top: 0px;
}

.vacancy-detail-card-body .vacancy-additional-info {
    border-radius: 12px;
    background-color: var(--light-blue-color);
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 10px;
}

.vacancy-detail-card-body b {
    font-family: 'Rubik SemiBold', sans-serif;
    font-size: 16px;
    color: var(--semi-black-color-80);
}

.right-side-smooth-border {
    position: relative;
}

.right-side-smooth-border .border-overlay {
    position: absolute;
    left: -2px;
    top: 0;
    bottom: 0;
    width: 100%;
    background: var(--blue-color);
    border-radius: 12px;
    z-index: 1;
}

.right-side-smooth-border.violet {
    margin-top: 30px;
    margin-bottom: 30px;
}

.right-side-smooth-border.violet .right-side-smooth-border-text{
    font-family: 'Rubik Regular', sans-serif;
    padding: 20px 20px 10px;
}

.right-side-smooth-border.violet p,.right-side-smooth-border.violet .right-side-smooth-border-text div {
    margin-bottom: 10px;
}


.one-result-block.img-right {
    width: fit-content;
    margin-top: 70px;
}

.right-side-smooth-border.violet .border-overlay {
    background: var(--violet-color);
    border-radius: 12px;
}

.right-side-smooth-border .right-side-smooth-border-text {
    z-index: 10;
    position: relative;
    background-color: var(--light-blue-color);
    border-radius: 12px;
    padding: 20px;
    font-family: 'Rubik Italic', sans-serif;
}

.right-side-smooth-border.violet .right-side-smooth-border-text {
    background-color: var(--light-grayv2-color);
}

.skills-block .skills {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin: 0 auto;
    margin-top: 30px;
}

.skills-block .skills .skill-item {
    background-color: var(--light-gray-color);
    padding: 8px 18px;
    color: var(--semi-black-color);
    display: flex;
    align-items: center;
    border-radius: 12px;
    white-space: nowrap;
    flex-shrink: 0;
}

.skills-block .skills-block-title {
    font-size: 24px;
    font-family: 'Rubik Medium', sans-serif;
    color: var(--semi-black-color);
}

.vacancy-feed-back-form {
    background-color: #fff;
    padding: 30px;
    border-radius: 20px;
}

.vacancy-feed-back-form .form-title {
    font-size: 24px;
    font-family: 'Rubik Medium', sans-serif;
    color: var(--semi-black-color);
}

.phone-input-wrapper {
    display: flex;
    position: relative;
}

.country-selector {
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 8px 0 0 8px;
    cursor: pointer;
    user-select: none;
    min-width: 80px;
    position: relative;
    transition: background-color 0.2s;
    justify-content: space-around;
    border: 1px solid var(--gray-color);
    border-right: none;
    height: 56px;
}

.country-flag {
    width: 24px;
    height: 18px;
    margin-right: 8px;
    flex-shrink: 0;
}

.flag-icon {
    width: 100%;
    height: 100%;
    border-radius: 2px;
    object-fit: cover;
}

.country-code {
    font-size: 14px;
    color: #333;
    font-weight: 500;
    margin-right: 4px;
}

.country-dropdown-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    transition: transform 0.2s;
}

.country-selector.active .country-dropdown-arrow {
    transform: rotate(180deg);
}

/* Дропдаун */
.country-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 240px;
    background: white;
    border: 1px solid #E5E5F0;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: none;
    max-height: 300px;
    overflow-y: auto;
}

.country-dropdown.show {
    display: block;
}

.country-option {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.country-option:hover {
    background: #F8F9FA;
}

.country-option .flag-icon {
    width: 24px;
    height: 18px;
    margin-right: 12px;
    flex-shrink: 0;
}

.country-option .country-name {
    flex: 1;
    font-size: 14px;
    color: #333;
}

.country-option .country-option-code {
    font-size: 14px;
    color: #666;
    font-weight: 500;
}

.floating-input.filled .country-selector {
    background: white;
}

.phone-input-wrapper .floating-label {
    left: 90px;
}

.phone-input-wrapper .form-input {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

.file-upload-container {
    width: 100%;
    margin-top: 20px;
}

.file-upload-area {
    border-radius: 12px;
    padding: 25px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: var(--light-grayv2-color);
    width: 100%;
    box-sizing: border-box;
}

.file-upload-area:hover {
    border-color: #007AFF;
    background-color: #F0F7FF;
}

.file-upload-area.drag-over {
    border-color: #007AFF;
    background-color: #E6F2FF;
    border-style: solid;
}

.upload-title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    margin-bottom: 8px;
}

.upload-subtitle {
    font-size: 12px;
    color: #666;
    line-height: 1.4;
    text-align: center;
}

.uploaded-files-list {
    margin-top: 20px;
}

.file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--light-grayv2-color);
    border-radius: 12px;
    margin-bottom: 8px;
    animation: fadeIn 0.3s ease;
}

.consent-checkbox {
    margin: 20px 0;
}

.consent-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    user-select: none;
    font-size: 14px;
    line-height: 1.4;
    color: #666;
}

.consent-input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.consent-label .checkmark {
    height: 20px;
    width: 20px;
    background-color: white;
    border: 2px solid #E5E5F0;
    border-radius: 4px;
    transition: all 0.2s ease;
    margin: 0px;
}

.vacancy-feed-back-form .blue-btn {
    width: 100%;
    padding: 14px 24px;
}

.consent-label:hover .checkmark {
    border-color: var(--blue-color);
}

.consent-input:checked ~ .checkmark {
    background-color: var(--blue-color);
    border-color: var(--blue-color);
}

.consent-input .checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 5px;
    top: 1px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.consent-input:checked ~ .checkmark:after {
    display: block;
}

.consent-text {
    padding-left: 10px;
    font-size: 12px;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.file-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.file-icon {
    flex-shrink: 0;
}

.file-icon svg {
    width: 24px;
    height: 24px;
}

.file-details {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.file-name {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-size {
    font-size: 12px;
    color: #666;
}

.delete-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    transition: background-color 0.2s;
    flex-shrink: 0;
    margin-left: 12px;
}

.file-error {
    color: #FF3B30;
    font-size: 12px;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.vacancy-detail-card-random-vacancy {
    background-color: #fff;
    padding: 32px;
    display: flex;
    flex-direction: column;
    border-radius: 20px;
}

.vacancy-detail-card-random-vacancy .btn {
    width: 100%;
    margin-bottom: 20px;
}

.vacancy-detail-card-random-vacancy .vacancy-respond {
    position: relative;
    padding: 12px 20px 12px 20px;
    border: 1px solid var(--blue-color);
    color: var(--semi-black-color);
}

.vacancy-detail-card-random-vacancy .vacancy-respond:hover {
    color: #000;
}

.vacancy-detail-card-random-vacancy .award {
    color: var(--violet-color);
    background-color: var(--light-violet-color);
    padding: 12px 16px;
    font-family: 'Rubik Medium', sans-serif;
    border-radius: 12px;
    font-size: 18px;
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 20px;
}

.vacancy-detail-card-random-vacancy .award img {
    margin-right: 15px;
}

.vacancy-detail-card-random-vacancy .company-name {
    font-size: 32px;
    font-family: 'Rubik SemiBold', sans-serif;
    color: var(--semi-black-color);
    margin-bottom: 15px;
}

.vacancy-detail-card-random-vacancy .company-certeficated span {
    color: var(--semi-black-color-80);
    font-size: 16px;
}

.vacancy-detail-card-random-vacancy .company-certeficated {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 15px;
}

.vacancy-detail-card-random-vacancy .all-vacancies {
    font-size: 16px;
    text-align: center;
    display: block;
    color: var(--blue-color);
}

.vacancy-detail-card-random-vacancy .company-img {
    margin-bottom: 15px;
    border-radius: 20px;
}

.vacancy-detail-card-random-vacancy .company-img img {
    width: 100%;
}

.vacancy-detail-card-random-vacancy .all-vacancies:hover {
    color: var(--darkblue-color);
}

.recommend-vacancies-main .recommend-vacancies-main-block {
    margin-top: 40px;
}

.about-us-body {
    display: flex;
    flex-direction: column;
}

.about-us-body .about-us-main-img {
    border-radius: 20px;
    margin-bottom: 30px;
    width: 100%;
}

.about-us-body .about-us-main-img img {
    width: 100%;
}

.about-us-body p {
    margin-bottom: 20px;
}

.about-us-body .about-us-gray-block {
    background-color: var(--light-gray-color);
    padding: 30px;
    border-radius: 20px;
}

.about-us-body .about-us-gray-block p:last-child {
    margin-bottom: 0px;
}

.table-container {
    width: 100%;
    overflow-x: auto; /* горизонтальный скролл при необходимости */
    -webkit-overflow-scrolling: touch; /* для плавного скролла на iOS */
    border-radius: 20px;
    border: 1px solid var(--gray-color);
}

table.bordered-table {
    width: 100%; /* или min-width: 100%; */
    font-size: 14px;
    color: var(--semi-black-color);
}

.table-container::-webkit-scrollbar {
    height: 8px;
}

.table-container::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.table-container::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

table.bordered-table thead {
    color: var(--semi-black-color-80);
}

table.bordered-table td {
    padding: 20px;
}

table.bordered-table a {
    color: var(--blue-color);
}

table.bordered-table tr, table.bordered-table thead {
    border-bottom: 1px solid var(--gray-color);
}

table.bordered-table tr:last-child {
    border-bottom: none;
}

.purple-status {
    color: var(--violet-color);
    background-color: var(--light-violet-color);
}

.blue-status {
    color: var(--blue-color);
    background-color: var(--light-blue-color);
}

.green-status {
    color: var(--green-color);
    background-color: var(--light-green-color);
}

.orange-status {
    color: var(--orange-color);
    background-color: var(--light-orange-color);
}

.orange-status,
.green-status,
.blue-status,
.purple-status {
    border-radius: 20px;
    padding: 5px 10px;
    display: inline-block;
    max-width: 190px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

table.bordered-table span {
    display: flex;
}

table.bordered-table span.status, span.status {
    display: block;
}

.cofounder-block {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.cofounder-block .cofounder-img {
    border-radius: 20px;
}

.cofounder-block .cofounder-img img {
    max-width: 120px;
}

.cofounder-block .cofounder-block-text {
    background-color: var(--light-gray-color);
    padding: 20px;
    display: flex;
    gap: 20px;
    flex-direction: column;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
}

.about-us-body img {
    width: 100%;
}

.cofounder-block-text img {
    width: auto;
}

.resume-constructor-block-main .resume-constructor-tab {
    background-color: var(--violet-color);
    color: #fff;
    font-size: 24px;
    padding: 8px 16px;
    border-radius: 40px;
    width: max-content;
    font-family: 'Rubik Medium', sans-serif;
}

.resume-constructor-block-main h1 {
    font-size: 54px;
    color: #fff;
    margin-top: 20px;
    width: 500px;
}

.resume-constructor-block-main .main-img {
    position: absolute;
    right: 40%;
    top: 0%;
    height: auto;
    transform: translate(50%, -25%);
    width: 1000px;
}

.green-star-btn {
    background-color: var(--green-color);
    padding: 15px 20px;
    color: #fff;
    text-align: center;
    display: block;
    border-radius: 12px;
}

.green-star-btn img {
    margin-right: 5px;
}

.resume-constructor-block-main-footer {
    margin-top: 40px;
    color: var(--light-grayv2-color);
}

.resume-constructor-block-main-footer span {
    font-size: 15px;
    margin-top: 20px;
    display: block;
}

.resume-constructor-block-main-footer img {
    max-height: 50px;
    width: auto;
}


.resume-constructor-features .resume-constructor-feature {
    position: relative;
    padding: 24px 20px 24px 55px;
    border-radius: 20px;
    color: #fff;
    background-color: #333A58;
    font-size: 18px;
    margin-bottom: 20px;
}

.resume-constructor-features .resume-constructor-feature:before {
    content: '';
    background-image: url(../img/green-arrow.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    left: 20px;
    width: 16px;
    height: 16px;
    top: 25px;
}

.resume-constructor-features {
    margin-top: 40px;
    margin-bottom: 40px;
}

.resume-constructor-possibilities {
    margin-top: 80px;
}

/* Grid контейнер */
.resume-constructor-possibilities-blocks-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 колонки */
    grid-auto-rows: minmax(200px, auto); /* Автовысота строк */
    gap: 30px; /* Расстояние между блоками */
    padding: 0; /* Убираем отступы если нужно */
    margin-top: 30px;
}

/* Стили для всех блоков */
.resume-constructor-possibilities-blocks-grid .resume-constructor-possibilities-block {
    padding: 30px;
    border-radius: 20px;
    background-color: #333A58;
    display: flex;
    flex-direction: column;
    height: 100%; /* Занимает всю доступную высоту ячейки */
}

/* Большой блок - растягивается на 2 строки */
.resume-constructor-possibilities-blocks-grid .resume-constructor-possibilities-block.big-block {
    grid-row: span 2; /* Занимает 2 строки */
    background-color: #333A58; /* Ваш цвет */
}

/* Фиолетовые блоки */
.resume-constructor-possibilities-blocks-grid .resume-constructor-possibilities-block.violet {
    background-color: var(--violet-color);
}

/* Стили для содержимого блоков (остаются как были) */
.resume-constructor-possibilities-blocks-grid .resume-constructor-possibilities-block .title {
    font-size: 20px;
    font-family: 'Rubik Medium', sans-serif;
    color: #fff;
}

.resume-constructor-possibilities-blocks-grid .resume-constructor-possibilities-block .img-block {
    display: flex;
    margin-bottom: 15px;
    flex-shrink: 0;
    align-items: center;
}

.resume-constructor-possibilities-blocks-grid .resume-constructor-possibilities-block .img-block img {
    margin-right: 15px;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.resume-constructor-possibilities-blocks-grid .resume-constructor-possibilities-block .text-block {
    font-size: 16px;
    color: var(--white-color-80);
    flex-grow: 1; /* Растягивается чтобы занять доступное пространство */
}

.resume-constructor-possibilities-blocks-grid .resume-constructor-possibilities-block.green {
    background-color: var(--green-color);
}

.resume-constructor-possibilities-blocks-grid .resume-constructor-possibilities-block.green img {
    width: 100%;
}

.resume-constructor-possibilities-blocks-grid .resume-constructor-possibilities-block .img-footer {
    width: 100%;
}

.who-can-recommend-main .resume-constructor-possibilities-blocks-grid .resume-constructor-possibilities-block {
    background-color: #fff;
    padding: 20px 30px;
}

.who-can-recommend-main .resume-constructor-possibilities-blocks-grid .resume-constructor-possibilities-block .text-block {
    color: var(--semi-black-color-80);
}

.who-can-recommend-main .resume-constructor-possibilities-blocks-grid .resume-constructor-possibilities-block .title {
    color: var(--semi-black-color);
}

.who-can-recommend-main .resume-constructor-possibilities-blocks-grid .resume-constructor-possibilities-block .img-block img {
    width: 24px;
    height: 24px;
}

.who-can-recommend-main .resume-constructor-possibilities-blocks-grid {
    grid-auto-rows: minmax(120px, auto);
}

.who-can-recommend-main .resume-constructor-possibilities-blocks-grid .resume-constructor-possibilities-block.violet {
    background: linear-gradient(135deg, #9045FF 0%, #BC8FFF 100%);
    display: flex;
    justify-content: space-between;
    position: relative;
}

.quote-block-text img {
    width: auto;
}

.who-can-recommend-main .resume-constructor-possibilities-blocks-grid .resume-constructor-possibilities-block.violet:after {
    content: '';
    position: absolute;
    bottom: -30px;
    right: 20px;
    width: 190px;
    height: 190px;
    background-image: url(../img/tg-send.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.who-can-recommend-main .resume-constructor-possibilities-blocks-grid .resume-constructor-possibilities-block.violet .title {
    color: #fff;
    font-size: 24px;
    width: 185px;
    line-height: 28px;
}

.who-can-recommend h2 {
    margin-bottom: 30px;
}

.integration-block {
    border-radius: 20px;
    margin-top: 100px;
    margin-bottom: 40px;
    min-height: 366px;
    overflow: hidden;
}

.integration-block img {
    width: 100%;
    bottom: 0px;
    position: absolute;
    right: 0px;
}

.integration-block .integration-block-text {
    display: flex;
    flex-direction: column;
    padding: 40px;
}

.integration-block .integration-block-text .title {
    font-size: 40px;
    font-family: 'Rubik SemiBold', sans-serif;
    color: #fff;
    margin-bottom: 20px;
    line-height: 42px;
}

.integration-block .integration-block-text .text {
    font-size: 16px;
    color: #fff;
    margin-bottom: 20px;
}

.integration-block .integration-block-text .btn {
    width: fit-content;
    background-color: #fff;
    color: var(--blue-color);
    padding: 10px 40px;
    font-family: 'Rubik Medium', sans-serif;
    font-size: 16px;
}

.make-resume-block {
    display: flex;
    position: relative;
    overflow: visible;
    z-index: 2;
    padding-top: 100px;
    padding-bottom: 70px;
}

.make-resume-block img {
    width: 100%;
}

.make-resume-block:before {
    content: '';
    background-image: url(../img/green-violet-gradient.png);
    background-size: 100% 100%; /* Растягиваем на всю ширину и высоту */
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: -1;
    transform: scale(1.5);
}

.make-resume-block .advantages {
    display: flex;
    gap: 5px;
    margin-bottom: 30px;
}

.make-resume-block .advantages .advantage {
    background-color: #333A58;
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
}

.make-resume-block .title {
    font-size: 54px;
    line-height: 56px;
    font-family: 'Rubik SemiBold', sans-serif;
    color: #fff;
    margin-bottom: 30px;
}

.make-resume-block p {
    color: var(--white-color-80);
    margin-bottom: 30px;
}

.small-advantages {
    display: flex;
    margin-top: 20px;
    margin-bottom: 20px;
    gap: 10px;
}

.small-advantages .small-advantage {
    padding: 20px;
    border-radius: 20px;
    border: 1px solid #FFFFFF21;
}

.small-advantages .small-advantage .small-advantage-title {
    color: #fff;
    font-size: 18px;
    font-family: 'Rubik SemiBold', sans-serif;
    margin-bottom: 5px;
}

.small-advantages .small-advantage .small-advantage-text {
    color: var(--dark-grayv2-color);
}

.recomendators-block .btn {
    width: fit-content;
}

.recomendators-block .main-img {
    position: absolute;
    right: -5%;
    width: 100%;
    height: auto;
    transform: scale(1.5);
    bottom: 0px;
    top: -50px;
}

.recomendators-block b {
    color: var(--white-color-80);
}

.recomendators-block .handshake-img {
    max-height: 52px;
}

.who-can-recommend-main, .ref-recruting-transforms-main {
    background-color: var(--light-grayv2-color);
    padding: 40px;
    border-radius: 24px;
}

.ref-recruting-transforms-main {
    margin-top: -80px;
    z-index: 10;
    position: relative;
    font-size: 40px;
    color: var(--semi-black-color);
    text-align: center;
    font-family: 'Rubik SemiBold', sans-serif;
    border-radius: 50px;
}

.ref-recruting-transforms-main p {
    font-size: 24px;
    color: var(--semi-black-color-80);
    text-align: center;
    margin-top: 30px;
    font-family: 'Rubik Regular', sans-serif;
}

.ref-recruting-transforms-main .violet-back {
    width: fit-content;
    text-align: center;
    display: block;
    margin: 0 auto;
    margin-top: 20px;
    padding: 18px 25px
}

.one-result-block {
    margin-top: 40px;
    margin-bottom: 40px;
}

.one-result-block .violet-back {
    line-height: 60px;
}

.one-result-block-text-block {
    margin-top: 90px;
}

.one-result-block-text-block .violet-btn {
    width: fit-content;
    padding: 10px 60px;
}

.one-result-block-text-block ul.checked-list{
    margin-top: 20px;
    margin-bottom: 20px;
}

.one-result-block-text-block ul.checked-list li {
    line-height: 24px;
}

.one-result-block-text-block-text {
    font-size: 24px;
    font-family: 'Rubik SemiBold', sans-serif;
    margin-bottom: 20px;
    line-height: 30px;
    color: var(--semi-black-color);
}

.one-result-block-footer {
    border-radius: 16px;
    background-color: var(--light-grayv2-color);
    padding: 20px 24px;
    display: flex;
    gap: 20px;
}

.one-result-block-footer img {
    width: 36px;
    height: 36px;
}

.one-result-block-main-img {
    position: relative;
}

.one-result-block-main-img img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-52%, -52%);
    max-width: 800px;
}

.one-result-block.img-right .one-result-block-main-img img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-55%, -46%);
}

.recomendators-footer {
    position: relative;
    width: 100%;
}

.recomendators-footer-point {
    background-color: var(--semi-black-color);
    padding: 24px;
    color: #fff;
    font-size: 24px;
    position: absolute;
    border-radius: 24px;
    display: flex;
    gap: 10px;
    line-height: 26px;
}

.recomendators-footer-point img{
    width: 22px;
    height: 23px;
}

.recomendators-footer-point.first-point {
    top: 31%;
    left: 13%;
    width: 330px;
    border-bottom-right-radius: 0px;
}

.recomendators-footer-point.second-point {
    top: 38%;
    right: 42%;
    width: 300px;
    border-top-right-radius: 0px;
}

.recomendators-footer-point.third-point {
    top: 32%;
    left: 65%;
    width: 216px;
    border-bottom-left-radius: 0px;
}

.recomendators-footer-text {
    color: #fff;
    font-size: 54px;
    font-family: 'Rubik SemiBold', sans-serif;
    position: absolute;
    bottom: 30%;
    left: 50%;
    transform: translateX(-50%);
    line-height: 65px;
    text-align: center;
}

.recomendators-footer .footer-bg {
    width: 100%;
    transform: scale(1.2);
}

.personal-cab-block {
    margin-top: 40px;
    background-color: var(--semi-black-color);
    color: #fff;
}

.personal-cab-block .small-container {
    padding: 90px 20px;
    margin: 0px auto;
}

.personal-cab-block-title {
    font-size: 54px;
    font-family: 'Rubik SemiBold', sans-serif;
    color: #fff;
    width: 900px;
}

.personal-cab-block-text {
    color: var(--white-color-80);
    margin-top: 20px;
}

.personal-cab-block .specialist-block {
    background-color: #535C84;
    color: #fff;
}

.personal-cab-block .specialist-block .small-text{
    color: var(--white-color-80);
}

.personal-cab-block .specialist-block.first-block,
.personal-cab-block .specialist-block.fifth-block {
    min-height: 416px;
}

.personal-cab-block .specialist-block.first-block,
.personal-cab-block .specialist-block.fourth-block,
.personal-cab-block .specialist-block.fifth-block {
    position: relative;
}

.personal-cab-block .specialist-block.first-block .flex,
.personal-cab-block .specialist-block.fourth-block .flex,
.personal-cab-block .specialist-block.fifth-block .flex{
    flex: 0;
}

.personal-cab-block .specialist-block.first-block img,
.personal-cab-block .specialist-block.fourth-block img,
.personal-cab-block .specialist-block.fifth-block img {
    position: absolute;
    bottom: 0px;
    right: 0px;
}

.personal-cab-block .specialist-block.fourth-block img {
    overflow: hidden;
}

.flex-start {
    align-items: flex-start;
}

.you-have-tool {
    margin-top: 60px;
    margin-bottom: 60px;
}

.you-have-tool .you-have-tool-text{
    margin-top: 20px;
}

.tools-points {
    margin-top: 30px;
}

.tool-point {
    background: linear-gradient(90deg, #333A58 0%, #535C84 100%);
    border-radius: 24px;
    padding: 32px;
    color: var(--white-color-80);
    position: relative;
    min-height: 190px;
    overflow: hidden;
}

.tool-point .number {
    background-color: #FFFFFF3D;
    border-radius: 50px;
    width: 36px;
    height: 36px;
    font-size: 16px;
    color: #fff;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.tool-point .number-block {
    display: flex;
    gap: 20px;
}

.tool-point img {
    position: absolute;
    width: 350px;
    height: 335px;
    bottom: -75px;
    right: -105px;
}

.tool-point .number-block .title {
    font-family: 'Rubik SemiBold', sans-serif;
    color: #fff;
}

.rounded-text {
    padding: 8px 16px;
    border: 1px solid #fff;
    border-radius: 50px;
    margin-top: 5px;
    width: fit-content;
}

.resume-construct-image {
    position: relative;
}

.resume-construct-image img {
    position: absolute;
    bottom: -50px;
}

.resume-construct {
    margin-top: 40px;
    border-radius: 32px;
    padding: 50px;
    padding-top: 60px;
}

.resume-construct-title {
    font-size: 40px;
    font-family: 'Rubik Medium', sans-serif;
}

.resume-construct-text {
    color: var(--white-color-80);
    margin-top: 20px;
}

.resume-construct-block .white-half-opacity:hover {
    color: #fff;
}

.resume-construct-block .white-half-opacity:after {
    display: none;
}

.resume-construct-block .white-half-opacity {
    margin-top: 20px;
    font-family: 'Rubik Italic', sans-serif;
    font-size: 18px;
}

.who-can-recommend-text {
    width: 440px;
}

.vacancies-list-main-block-text {
    width: 65%;
    margin-top: 20px;
    color: var(--dark-grayv2-color);
    font-size: 16px;
}

.vacancies-list-main-block .main-img {
    width: 435px;
    height: fit-content;
    position: relative;
    right: unset;
    top: unset;
}

.hand-right {
    width: 32px;
}

.vacancies-list-main-block .vacancies-list-main-img {
    align-items: center;
}

.vacancies-list-main-block-title {
    font-size: 50px;
    color: #fff;
    margin-top: 20px;
    font-family: 'Rubik SemiBold', sans-serif;
    line-height: 60px;
}

.vacancies-list-main-block .ref-recrut {
    margin-top: 20px;
}

.recommend-small-block {
    background: #fff;
    padding: 24px;
    border-radius: 24px;
}

.recommend-small-title {
    font-size: 18px;
    font-family: 'Rubik Medium', sans-serif;
    margin-bottom: 20px;
    color: var(--semi-black-color);
}

.recommend-small-block .btn {
    width: 100%;
    font-size: 16px;
    margin-top: 30px;
}

.search-input {
    width: 100%;
    padding: 12px 12px 12px 40px;
    border: 1px solid var(--gray-color);
    border-radius: 14px;
    font-size: 14px;
}

.vacancies-list-search-container {
    display: flex;
    justify-content: space-between;
}

.vacancies-list-search-container .search-input {
    border-radius: 12px;
    border: none;
}

.vacancies-list-search-container .search-input {
    padding: 15px 12px 15px 44px;
}

.vacancies-list-container {
    margin-top: 10px;
}

.vacancies-list-filter {
    background-color: #fff;
    padding: 32px;
    border-radius: 24px;
}

.vacancies-list-filter-top {
    display: flex;
    gap: 5px;
    align-items: center;
    margin-bottom: 20px;
}

.vacancies-list-filter-top .text {
    font-size: 18px;
    font-family: 'Rubik Medium', sans-serif;
    color: var(--semi-black-color);
}

.price-filter {
    width: 100%;
    padding: 0px;
    margin-bottom: 40px;
}

.price-filter .slider-container {
    padding: 0px 10px;
}

.price-inputs {
    display: flex;
    margin-bottom: 25px;
}

.price-inputs .price-field {
    flex: 1;
    pointer-events: none;
}

#price-slider .noUi-handle {
    width: 24px;
    height: 24px;
    top: -10px;
    border-radius: 50%;
    border: 3px solid var(--blue-color);
    box-shadow: unset;
}

#price-slider .noUi-handle:after, #price-slider .noUi-handle:before {
    display: none;
}

#price-slider .noUi-connects {
    background: var(--gray-color);
}

.price-field label {
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
    color: #666;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.price-input {
    width: 100%;
    padding: 13px 12px;
    border: 1px solid var(--gray-color);
    font-size: 18px;
    box-sizing: border-box;
}

.price-input:focus {
    outline: none;
    border-color: #0066cc;
}

.price-field:first-child .price-input {
    border-right: unset;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.price-field:last-child .price-input {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* Скрытые инпуты не отображаем */
.price-hidden {
    display: none;
}

.price-filter .noUi-horizontal {
    height: 3px;
}

.price-filter .noUi-target {
    box-shadow: unset;
    border: none;
}

.price-filter .noUi-connect {
    background: var(--blue-color);
}

.vacancies-list-block {
    margin-top: 40px;
}

.filter-group {
    margin-bottom: 30px;
}

.checkbox-filter-group, .radio-filter-group {
    display: flex;
    flex-direction: column;
    font-size: 18px;
    margin-top: 10px;
}

.checkbox-filter-group .filter-item, .radio-filter-group .filter-item {
    display: flex;
}

.filter-group .title {
    font-size: 18px;
    font-family: 'Rubik Medium', sans-serif;
    color: var(--semi-black-color);
}

.filter-group .checkbox-text {
    color: var(--semi-black-color);
    font-size: 18px;
}

.filter-group .checkmark {
    margin-right: 10px;
    border: 1px solid #D3D3D3;
}

.filter-group .custom-checkbox:checked + .checkbox-label .checkmark::after {
    left: 7px;
    top: 2px;
}

.filter-group .custom-checkbox:checked + .checkbox-label .checkmark {
    border: none;
}

.filter-group-wrapper {
    max-height: 225px;
    overflow-y: auto;
    transition: max-height 0.3s ease;
    margin-right: -10px;
    padding-right: 10px;
}

.filter-group-wrapper::-webkit-scrollbar {
    width: 6px;
}

.filter-group-wrapper::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 3px;
}

.filter-group-wrapper::-webkit-scrollbar-thumb {
    background: #c0c0c0;
    border-radius: 3px;
}

.filter-group-wrapper::-webkit-scrollbar-thumb:hover {
    background: #a0a0a0;
}

.filter-item.hide-extra {
    display: none;
}

.filter-group .checkbox-container, .filter-group .radio-container {
    padding: 5px 0px;
}

.filter-actions a {
    color: var(--blue-color);
}

.filter-actions {
    margin-top: 5px;
}


.custom-checkbox[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Меняем квадрат на круг для radio */
.filter-item.radio-container .checkmark {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid #d1d5db; /* Серый ободок */
    border-radius: 50%; /* Круглая форма */
    background-color: #fff;
    transition: all 0.2s ease;
    margin-right: 8px;
}

/* Убираем старую галочку */
.filter-item.radio-container .checkmark::after {
    display: none;
}

/* Добавляем точку для radio */
.filter-item.radio-container .checkmark::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 7px;
    height: 7px;
    background-color: #d1d5db;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 1;
}

/* Выбранное состояние */
.filter-item.radio-container .custom-checkbox[type="radio"]:checked + .checkbox-label .checkmark {
    border-color: #007bff; /* Синий ободок */
}

.filter-item.radio-container .custom-checkbox[type="radio"]:checked + .checkbox-label .checkmark::before {
    background-color: var(--blue-color); /* Синяя точка */
    opacity: 1;
}

/* Hover эффект */
.filter-item.radio-container .checkbox-label:hover .checkmark {
    border-color: #999;
}

.filter-result-block {
    display: flex;
    gap: 30px;
}

.filter-clear-btn {
    border: 1px solid var(--blue-color);
    color: var(--semi-black-color);
    padding: 10px 24px;
    border-radius: 12px;
    background-color: #fff;
    font-size: 16px;
}

.filter-tooltip {
    color: #fff;
    padding: 10px 24px;
    border-radius: 12px;
    background-color: var(--semi-black-color);
    font-size: 16px;
    position: relative;
}

.filter-tooltip::before {
    content: '';
    position: absolute;
    left: -14px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 20px solid var(--semi-black-color);
}

.vacancies-list-items {
    display: flex;
    flex-direction: column;
    gap: 25px;
    padding: 0px;
}

.vacancies-list-items {

}

.catalog-text {
    margin-top: 40px;
}

.catalog-text h2, .catalog-text h3 {
    margin-bottom: 20px;
}

.catalog-text p {
    margin-bottom: 30px;
    color: var(--semi-black-color-80);
}

.mobile-filter-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%; /* Делает кнопку круглой */
    padding: 0;
    border: none;
    background: var(--blue-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    overflow: hidden; /* Чтобы картинка не выходила за границы */
}

.mobile-filter-btn:hover {
    background: var(--blue-color);
    transform: scale(1.1);
}

.mobile-filter-btn:active {
    transform: scale(0.95);
}

.btn-icon {
    width: 60%; /* Картинка занимает 60% кнопки */
    height: 60%;
    object-fit: contain; /* Сохраняет пропорции */
}

.vacancies-list-search-container-mobile {
    display: none;
}

.company-card-main-img {
    border-radius: 32px;
    height: 250px;
    z-index: 2;
}

.company-card-main-img img {
    width: 100%;
}

.company-card-main-info {
    border-radius: 32px;
    padding: 40px;
    padding-top: 100px;
    background-color: #fff;
    z-index: 5;
    position: relative;
    margin-top: -60px;
    display: flex;
    justify-content: space-between;
}

.company-card-main-info .company-card-logo {
    position: absolute;
    top: -55px;
}

.company-card-main-info .top-block .title-block .title {
    font-size: 32px;
    font-family: 'Rubik Medium', sans-serif;
    color: var(--semi-black-color);

}

.company-card-main-info .top-block .title-block {
    display: flex;
    align-items: center;
    gap: 10px;
}

.company-card-main-info .top-block .rating {
    padding: 10px 14px;
    border-radius: 50px;
    background-color: var(--light-blue-color);
    color: var(--blue-color);
    font-family: 'Rubik Medium', sans-serif;
    width: fit-content;
}

.company-card-main-info .industry {
    margin-top:20px;
    font-size: 16px;
}

.company-card-main-info .top-block {
    display: flex;
    gap: 30px;
    position: relative;
}

.company-card-main-info .all-vacancies {
    font-family: 'Rubik Medium', sans-serif;
    width: fit-content;
    color: #fff;
    font-size: 14px;
    border-radius: 10px;
    padding: 10px 24px;
    text-decoration: unset;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--semi-black-color);
    gap: 10px;
}

.company-card-main-info .right-block {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 290px;
    width: 290px;
}

.company-card-main-info .vacancy-recommend img {
    margin-right: 0px;
    gap: 10px;
}

.company-card-main-info .right-block .btn {
    width: 100%;
    gap: 10px;
    font-size: 16px;
}

.company-benefits .company-benefit {
    padding: 24px 30px;
    border-radius: 20px;
    background-color: #fff;
}

.company-benefits .company-benefit .number {
    font-size: 32px;
    font-family: 'Rubik Medium', sans-serif;
    color: var(--semi-black-color);
}

.company-benefits .company-benefit .company-benefit-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.company-benefits .company-benefit .text {
    font-size: 16px;
    color: var(--semi-black-color-60);
    margin-top: 10px;
}

.company-card-main-block {
    margin-top: 40px;
}

.company-info-block {
    padding: 24px 30px;
    border-radius: 20px;
    background-color: #fff;
    margin-top: 30px;
}

.company-info-block p {
    margin-top: 20px;
    line-height: 24px;
}

.company-info-block p {
    color: var(--semi-black-color-80);
}

h4 {
    font-size: 24px;
    color: var(--semi-black-color);
    font-family: 'Rubik Medium', sans-serif;
}

.company-site {
    font-family: 'Rubik Medium', sans-serif;
    font-size: 18px;
    color: var(--blue-color);
    margin-top: 30px;
    display: block;
    word-wrap: break-word;
}

.how-to-recommend-block {
    position: relative;
    height: 270px;
    overflow: hidden;
}

.how-to-recommend-block .how-to-recommend-img {
    position: absolute;
    bottom: 0px;
    width: 420px;
}

.company-vacancies-block {
    margin-top: 60px;
}

.company-vacancies-block .title {
    font-size: 32px;
    font-family: 'Rubik SemiBold', sans-serif;
    color: var(--semi-black-color);
    line-height: 36px;
}

.company-vacancies-block .row {
    margin-top: 40px;
}

.company-card-container {
    padding-top: 0px;
}

.company-vacancies-block .vacancy-block {
    margin-bottom: 20px;
}

.catalog-main-block {
    border-radius: 56px;
    overflow: hidden;
    padding: 0px 90px;
    padding-bottom: 50px;
    /*height: 370px;*/
}

.catalog-main-block .main-img {
    position: absolute;
    right: -130px;
    bottom: -80px;
    width: 890px;
}

.catalog-main-block .ref-recrut {
    margin-top: 0px;
}

.catalog-main-block .vacancies-list-main-block-text {
    width: 93%;
}

.catalog-main-block .vacancies-list-main-block-title {
    line-height: 55px;
}

.vacancies-categories-main-block {
    margin-top: 40px;
}

.vacancies-categories-main-block .vacancies-category {
    padding: 32px;
    border-radius: 32px;
    background: #fff;
    display: flex;
    flex-direction: column;
    position: relative;
    height: 250px;
    justify-content: space-between;
    margin-bottom: 20px;
}

.vacancies-categories-main-block .vacancies-category .title {
    font-size: 20px;
    font-family: 'Rubik Medium', sans-serif;
    color: var(--semi-black-color);
}

.vacancies-categories-main-block .vacancies-category .vacancy-img {
    position: absolute;
    bottom: 0px;
    right: 0px;
}

.vacancies-categories-main-block .vacancies-category .vacancy-icon {
    width: 32px;
    height: 32px;
}

.posting-offers-block {
    margin-top: 40px;
    border-radius: 32px;
    padding: 32px;
    color: #fff;
    position: relative;
    height: 162px;
    align-items: center;
}

.posting-offers-block .title {
    font-size: 24px;
    font-family: 'Rubik Medium', sans-serfif;
    margin-bottom: 20px;
}

.posting-offers-block .text {
    font-size: 18px;
}

.posting-offers-block .posting-offers-block-img {
    position: absolute;
    bottom: -80px;
    right: 0px;
}

.catalog-footer-block {
    margin-top: 60px;
}

.catalog-footer-block h2 {
    margin-bottom: 20px;
}

.catalog-footer-block .recommend-small-container {
    margin-top: 30px;
    margin-bottom: 100px;
}

.catalog-footer-block .recommend-small-title {
    font-size: 32px;
    font-family: 'Rubik Medium', sans-serif;
    width: 77%;
    line-height: 36px;
}

.catalog-footer-block .recommend-small-title.blue {
    color: var(--blue-color);
}

.catalog-footer-block .recommend-small-title.violet {
    color: var(--violet-color);
}

.catalog-footer-block .recommend-small-text {
    margin-bottom: 15px;
}

.catalog-footer-block .background-block {
    border-radius: 20px;
    gap: 20px;
    background-color: var(--color-for-light-background);
    padding: 20px 24px;
    display: flex;
}

.catalog-footer-block .background-block img {
    width: 36px;
    height: 36px;
}

.catalog-footer-block .recommend-small-block {
    height: 490px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 35px;
    overflow: hidden;
    z-index: 5;
    position: relative;
}

.catalog-footer-block .blue, .catalog-footer-block .violet {
    position: relative;
}

.catalog-footer-block .boxshadow-img {
    z-index: 1;
    position: absolute;
    bottom: -150px;
    left: 0;
    width: 100%;
}

.catalog-footer-block .recommend-small-block .recommend-small-text {
    font-size: 18px;
    line-height: 24px;
}

.all-companies {
    border-radius: 40px;
    overflow: hidden;
    padding-bottom: 50px;
    height: 400px;
    max-width: 1480px;
    margin: 0 auto;
}

.all-companies .main-img{
    position: absolute;
    top: -360px;
    width: auto;
    height: auto;
    right: -120px;
}

.all-companies-main-block-title {
    font-size: 54px;
    color: #fff;
    margin-top: 20px;
    font-family: 'Rubik SemiBold', sans-serif;
    line-height: 60px;
}

.all-companies-main-block-text {
    width: 65%;
    margin-top: 20px;
    color: var(--dark-grayv2-color);
    font-size: 16px;
}

.companies-list-block .company-item {
    border-radius: 24px;
    background: #fff;
    padding: 30px;
    margin-bottom: 20px;
}

.company-points {
    margin-top: 20px;
}

.company-point {
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    margin-bottom: 15px;
}

.company-point span:first-child {
    color: var(--dark-gray-color);
}

.company-item {
    display: flex;
    flex-direction: column;
}

.company-item .title {
    font-size: 24px;
    font-family: 'Rubik Medium', sans-serif;
    color: var(--semi-black-color);
    margin-top: 20px;
    margin-bottom: 15px;
}

.company-footer {
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
}

.company-rating {
    background-color: var(--light-blue-color);
    color: var(--blue-color);
    font-family: 'Rubik Medium', sans-serif;
    font-size: 16px;
    border-radius: 50px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    width: fit-content;
}

.lk-profile-menu-block {
    background: #fff;
    border-radius: 32px;
    padding: 36px 24px;
    height: fit-content;
}

.lk-profile-menu-title {
    font-size: 24px;
    font-family: 'Rubik Medium', sans-serif;
    color: var(--semi-black-color);
}

.lk-profile-menu {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 30px;
}

.lk-profile-menu-item {
    display: flex;
    gap: 10px;
    padding: 15px;
    align-items: center;
}

.lk-profile-menu-item.active {
    background: var(--light-gray-color);
    border-radius: 12px;
}

.lk-profile-menu-item:hover {
    background: var(--light-gray-color);
    border-radius: 12px;
}

.lk-main-block {
    padding: 24px;
    border-radius: 32px;
    background: #fff;
}

.personal-img {
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-photo {
    width: 125px;
    height: 125px;
    transition: filter 0.3s;
    object-fit: contain;
    border-radius: 50%;
}

.upload-overlay {
    position: absolute;
    width: 125px;  /* Фиксированная ширина 125px */
    height: 125px; /* Фиксированная высота 125px */
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%; /* Если тоже нужен круглый */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    color: white;

    /* Центрирование внутри родителя */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.camera-icon {
    width: 40px;
    height: 40px;
    filter: brightness(0) invert(1);
}

.personal-img:hover .profile-photo {
    filter: brightness(0.6);
}

.personal-img:hover .upload-overlay {
    opacity: 1;
}

.lk-personal-photo-block {
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.lk-personal-photo-block .user-name {
    font-size: 20px;
    font-family: 'Rubik Medium', sans-serif;
    color: var(--semi-black-color);
    text-align: center;
    margin-bottom: 20px;
}

.lk-personal-photo-block .user-email {
    font-size: 15px;
    color: #90939C;
    text-align: center;
}

.lk-personal-info-block .title {
    font-size: 20px;
    font-family: 'Rubik Medium', sans-serif;
    color: var(--semi-black-color);
}

.lk-main-block .floating-label {
    color: #90939C;
}

.lk-main-block .form-input {
    border-color: var(--gray-color);
}

.lk-main-block .floating-input {
    margin-bottom: 0px;
}
/* Базовые стили для кастомного селекта */
.custom-select {
    appearance: none; /* Убираем стандартную стрелку */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("../img/select-arrow.png");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 24px;
    cursor: pointer;
    padding-right: 45px;
}

/* Стили для выбранного значения */
.custom-select:valid {
    color: #242A43;
}

/* Стили для опций (работает в некоторых браузерах) */
.custom-select option {
    font-family: 'Rubik Regular', sans-serif;
    font-size: 14px;
    padding: 12px 16px;
    color: #242A43;
    background-color: #fff;
}

/* Стили при наведении на опции (ограниченная поддержка) */
.custom-select option:hover {
    background-color: #f0f0f0;
}

/* Стили для выбранной опции */
.custom-select option:checked {
    background-color: var(--blue-color);
    color: white;
}

/* Стрелка при фокусе */
.custom-select:focus {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23242A43' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='18 15 12 9 6 15'/></svg>");
    border-color: var(--blue-color);
}

/* Адаптация floating label для select */
.custom-select:focus + .floating-label,
.custom-select:not([value=""]):valid + .floating-label {
    top: 5px;
    transform: translateY(0);
    font-size: 12px;
}

/* Для Firefox убираем внутреннюю тень */
.custom-select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #242A43;
}

/* Убираем стандартный outline в Firefox */
.custom-select:-moz-focusring * {
    color: #242A43;
    text-shadow: none;
}

.date-input {
    font-family: 'Rubik Regular', sans-serif;
    /* Стандартный календарь */
}

/* Скрываем стандартный placeholder даты */
.date-input::-webkit-datetime-edit-text,
.date-input::-webkit-datetime-edit-month-field,
.date-input::-webkit-datetime-edit-day-field,
.date-input::-webkit-datetime-edit-year-field {
    color: #242A43;
    font-family: 'Rubik Regular', sans-serif;
}

/* Когда поле пустое, скрываем текст */
.date-input:invalid::-webkit-datetime-edit {
    color: transparent;
}

/* Стилизация иконки календаря */
.date-input::-webkit-calendar-picker-indicator {
    background: transparent;
    width: 20px;
    height: 20px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.date-input::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Для Firefox */
.date-input::-moz-calendar-picker-indicator {
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.date-input::-moz-calendar-picker-indicator:hover {
    opacity: 1;
}

.date-input:focus + .floating-label,
.date-input:valid + .floating-label {
    top: 5px;
    transform: translateY(0);
    font-size: 12px;
}

.textarea-input::-webkit-scrollbar {
    width: 8px;
}

.textarea-input::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 0 12px 12px 0;
}

.textarea-input::-webkit-scrollbar-thumb {
    background: var(--gray-color);
    border-radius: 4px;
}

.textarea-input::-webkit-scrollbar-thumb:hover {
    background: #b3b3b3;
}

.floating-input textarea {
    min-height: 90px;
}

.resume-title, .socials-title {
    margin-top: 20px;
    font-size: 20px;
    font-family: 'Rubik Medium', sans-serif;
    color: var(--semi-black-color);
}

.user-socials-items {
    margin-top: 30px;
    display: flex;
}

.user-socials-items .user-socials-item {
    padding: 8px 12px;
    background: var(--light-grayv2-color);
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.modal__overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal__container {
    background-color: #fff;
    padding: 30px;
    max-width: 500px;
    max-height: 100vh;
    border-radius: 4px;
    overflow-y: auto;
    box-sizing: border-box;
}

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

.modal__title {
    margin-top: 0;
    margin-bottom: 0;
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.25;
    color: var(--blue-color);
    box-sizing: border-box;
}

.modal__close {
    background: transparent;
    border: 0;
}

.modal__header .modal__close:before { content: "\2715"; }

.modal__content {
    margin-top: 2rem;
    margin-bottom: 2rem;
    line-height: 1.5;
    color: var(--semi-black-color);
}

.modal__btn {
    font-size: .875rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    background-color: #e6e6e6;
    color: var(--semi-black-color);
    border-radius: .25rem;
    border-style: none;
    border-width: 0;
    cursor: pointer;
    -webkit-appearance: button;
    text-transform: none;
    overflow: visible;
    line-height: 1.15;
    margin: 0;
    will-change: transform;
    -moz-osx-font-smoothing: grayscale;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    transition: -webkit-transform .25s ease-out;
    transition: transform .25s ease-out;
    transition: transform .25s ease-out,-webkit-transform .25s ease-out;
}

.modal__btn:focus, .modal__btn:hover {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}

.modal__btn-primary {
    background-color: var(--blue-color);
    color: #fff;
}

@keyframes mmfadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes mmfadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes mmslideIn {
    from { transform: translateY(15%); }
    to { transform: translateY(0); }
}

@keyframes mmslideOut {
    from { transform: translateY(0); }
    to { transform: translateY(-10%); }
}

.micromodal-slide {
    display: none;
}

.micromodal-slide.is-open {
    display: block;
}

.micromodal-slide[aria-hidden="false"] .modal__overlay {
    animation: mmfadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.micromodal-slide[aria-hidden="false"] .modal__container {
    animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__overlay {
    animation: mmfadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__container {
    animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1);
}

.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay {
    will-change: transform;
}

.social-change-modal {
    background: #fff;
    border-radius: 32px;
    padding: 32px;
    width: 425px;
}

.social-change-modal-title-block {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.social-change-modal .btn{
    width: 100%;
}

.modal-close-btn {
    background: #fff;
    width: 32px;
    height: 32px;
}

.social-change-modal-title {
    font-size: 24px;
    font-family: 'Rubik SemiBold', sans-serif;
    color: var(--semi-black-color);

}

.company-vacancies-title {
    font-size: 32px;
    font-family: 'Rubik Medium', sans-serif;
    color: var(--semi-black-color);
    margin-bottom: 30px;
}

.personal-container .vacancies-list-search-container {
    margin-bottom: 30px;
}

.vacancy-edit {
    background: var(--blue-color);
    padding: 13px;
    border-radius: 12px;
}

.vacancy-close {
    position: relative;
    width: fit-content;
    padding: 12px 20px 12px 20px;
    border: 1px solid var(--gray-color);
    color: #90939C;
    display: flex;
    gap: 10px;
}

.lk-vacancies-block .vacancy-block {
    margin-bottom: 30px;
}

.lk-vacancies-block .vacancy-recommend img {
    width: 24px;
    height: 24px;
}

.vacancy-close-modal {
    background: #fff;
    border-radius: 32px;
    padding: 32px;
    width: 425px;
}

.vacancy-modal-title-block {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.vacancy-close-modal-title {
    font-size: 24px;
    font-family: 'Rubik SemiBold', sans-serif;
    color: var(--semi-black-color);
    margin-top: 20px;
    margin-bottom: 20px;
}

.vacancy-close-modal .btn {
    width: 100%;
}

.vacancy-close-modal p {
    margin-bottom: 20px;
}

.vacancy-close-modal .blue-btn {
    margin-bottom: 20px;
}

.vacancy-close-modal .btn-cancel-vacancy {
    background: #fff;
    border: 1px solid var(--gray-color);
    border-radius: 12px;
    color: var(--semi-black-color-60);
}

.lk-vacancy-name {
    margin-top: 20px;
    font-size: 20px;
    color: var(--blue-color);
    font-family: 'Rubik Medium', sans-serif;
}

.lk-vacancy-candidates-block {
    margin-top: 30px;
}

.lk-vacancy-candidates-block .lk-vacancy-candidate {
    padding: 32px;
    background: #fff;
    border-radius: 32px;
    margin-bottom: 30px;
}

.lk-vacancy-candidates-block .lk-vacancy-candidate .user-data {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lk-vacancy-candidates-block .lk-vacancy-candidate .vacancy-date {
    color: var(--semi-black-color-60);
}

.lk-vacancy-candidates-block .lk-vacancy-candidate .user-data img {
    width: 40px;
    height: 40px;
}

.lk-vacancy-candidates-block .lk-vacancy-candidate .user-data .user-name {
    font-size: 24px;
    font-family: 'Rubik Medium', sans-serif;
    color: var(--semi-black-color);
}

.lk-vacancy-candidates-block .lk-vacancy-candidate .header-block {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.lk-vacancy-candidates-block .lk-vacancy-candidate .darkblue-btn {
    font-family: 'Rubik Regular', sans-serif;
    border-radius: 16px;
    margin-top: 20px;
}

.vacancy-edit-block {
    display: none;
}

.vacancy-edit-block.active {
    display: block;
}

.lk-vacancy-points {
    gap: 20px;
    display: flex;
    flex-direction: column;
    margin-top: 30px;
}

.lk-vacancy-points .lk-vacancy-point {
    font-size: 18px;
    display: flex;
    justify-content: space-between;
}

.lk-vacancy-points .lk-vacancy-point span:first-child {
    color: var(--semi-black-color-60);
}

.lk-vacancy-file {
    color: var(--blue-color);
    font-family: 'Rubik Medium', sans-serif;
    font-size: 18px;
}

.lk-vacancy-status {
    color: var(--blue-color);
    background-color: var(--light-blue-color);
    border-radius: 20px;
    padding: 6px 8px;
}

.lk-my-resume-block {
    margin-top: 30px;
}

.lk-resume-main-title {
    font-size: 32px;
    font-family: 'Rubik Medium', sans-serif;
    color: var(--semi-black-color);
}

.lk-resume-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.lk-resume-header .btn {
    display: flex;
    gap: 10px;
    align-items: center;
}

.lk-resume-block {
    background-color: #fff;
    border-radius: 32px;
    padding: 24px;
    min-height: 300px;
    display: grid;
    grid-template-rows: auto auto auto 1fr;
    margin-bottom: 30px;
    height: 100%;
}

.lk-resume-block.h-100 .lk-resume-title {
    flex: 1 0 auto; /* Занимает все доступное пространство */
}

/* Фиксируем футер внизу */
.lk-resume-block.h-100 .lk-resume-footer {
    margin-top: auto;
}

.lk-my-resume-block .col-lg-4 {
    margin-bottom: 20px;
}

.lk-resume-block.lk-add-resume img {
    width: 64px;
    height: 64px;
}

.lk-resume-block.lk-add-resume {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.lk-resume-btn {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
}

.lk-resume-footer {
    display: flex;
    justify-content: space-between;
    margin-top: auto;
    position: relative;
}

.lk-resume-actions-block {
    position: absolute;
    display: none;
    background: #F0FAFF;
    border-radius: 24px;
    padding: 25px;
    width: 232px;
}

.lk-resume-actions-block.active {
    display: flex;
    flex-direction: column;
    gap: 20px;
    top: 50px;
    right: 0px;
    z-index: 10;
}

.lk-resume-footer .lk-resume-up, .lk-resume-footer .lk-resume-down {
    border: 1px solid var(--gray-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.lk-resume-footer .lk-resume-edit {
    background: var(--blue-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.lk-resume-footer .lk-resume-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--semi-black-color);
}

.lk-resume-footer .lk-resume-footer-right{
    display: flex;
    gap: 10px;
}

.lk-resume-img {
    border-radius: 16px;
    margin-bottom: 20px;
    width: 100%;
}

.lk-resume-title {
    font-family: 'Rubik Medium', sans-serif;
    font-size: 20px;
    color: var(--semi-black-color);
    margin-bottom: 15px;
    white-space: normal;
    word-break: break-word;
}

.lk-resume-date-views {
    color: var(--semi-black-color-60);
    display: flex;
    justify-content: space-between;
}

.lk-resume-views {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.resume-tags-title-block {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.resume-tags-title-block .title {
    font-size: 24px;
    font-family: 'Rubik SemiBold', sans-serif;
    color: var(--semi-black-color);
}

.resume-tags-modal {
    background: #fff;
    border-radius: 32px;
    padding: 32px;
    width: 425px;
}

.resume-tags-block {
    height: 380px;
    overflow: auto;
    margin-top: 20px;
    margin-bottom: 20px;
}

.resume-tags-block::-webkit-scrollbar {
    width: 6px;
}

.resume-tags-block::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.resume-tags-block::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 2px;
}

.resume-tags-block::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.resume-tags-block .checkbox-text {
    color: var(--semi-black-color);
}

.resume-tag-item .checkmark {
    border: 1px solid #D3D3D3;
}

.resume-tag-item.checkbox-container {
    padding: 5px 0px;
}

.resume-tag-item .custom-checkbox:checked + .checkbox-label .checkmark::after {
    left: 7px;
    top: 2px;
}

.resume-tag-item .custom-checkbox:checked + .checkbox-label .checkmark {
    border: none;
}

.resume-tags-modal .btn {
    width: 100%;
}

.lk-settings {
    color: var(--blue-color);
    font-family: 'Rubik Medium', sans-serif;
    font-size: 15px;
    display: flex;
    align-items: center;
    background: #fff;
    gap: 10px;
}

.lk-candidates-replies-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lk-candidates-replies-header .title {
    font-family: 'Rubik Medium', sans-serif;
    font-size: 32px;
    color: var(--semi-black-color);
}

.lk-resume-table {
    margin-top: 30px;
}

.lk-resume-table table.bordered-table td {
    padding: 0px 12px;
    width: 200px;
}

.lk-resume-table {
    max-width: 100%; /* Чтобы не выходил за пределы родителя */
    overflow: auto;   /* Включаем прокрутку (и вертикальную, и горизонтальную) */
    position: relative;
}

.lk-resume-table.table-container::-webkit-scrollbar {
    width: 2px;
    height: 4px;
}

.lk-resume-table::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.lk-resume-table::-webkit-scrollbar-thumb {
    background: #C4CDDD;
    border-radius: 2px;
}

.lk-resume-table::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.lk-resume-table .bordered-table {
    border-collapse: collapse;
    width: 100%;
    min-width: 900px;
    table-layout: fixed;
}

/* Стили для ячеек */
.lk-resume-table .bordered-table th,
.lk-resume-table .bordered-table td {
    padding: 15px 10px;
    text-align: left;
    vertical-align: middle;
    word-wrap: break-word; /* разрешаем перенос длинных слов */
    word-break: break-word;
    white-space: nowrap; /* Запрет переноса текста (для горизонтального скролла) */
}

.lk-resume-table .bordered-table th.white-space-normal,
.lk-resume-table .bordered-table td.white-space-normal {
    white-space: normal;
    word-wrap: break-word;
}

/* Фиксируем шапку при скролле (опционально, но удобно) */
.lk-resume-table .bordered-table thead tr {
    position: sticky;
    top: 0;
    z-index: 2;
}

.lk-resume-table .bordered-table th:nth-child(1), /* Чекбокс */
.lk-resume-table .bordered-table td:nth-child(1) {
    width: 64px;
    min-width: 64px;
    max-width: 64px;
}

.lk-resume-table .bordered-table th:nth-child(2),
.lk-resume-table .bordered-table td:nth-child(2) {
    width: 120px;
    min-width: 120px;
    max-width: 120px;
}

.lk-resume-table .bordered-table tr {
    height: 60px;
}

.bordered-table span.checkmark, .candidates-replies-mobile span.checkmark {
    border: 1px solid var(--gray-color);
    width: 24px;
    height: 24px;
    margin-right: 0px;
}

.bordered-table .checkbox-label, .candidates-replies-mobile .checkbox-label {
    justify-content: space-around;
}

.bordered-table label, .candidates-replies-mobile label {
    margin-bottom: 0px;
}

.lk-resume-table .bordered-table td a {
    color: var(--blue-color);
}

.lk-resume-table .bordered-table td .status {
    padding: 5px;
}

.lk-resume-table .bordered-table .custom-checkbox:checked + .checkbox-label .checkmark {
    border: unset;
}

.lk-resume-table .bordered-table .custom-checkbox:checked + .checkbox-label .checkmark::after {
    left: 9px;
    top: 4px;
}

.lk-resume-table table tbody tr td.number-td,
.lk-resume-table table thead tr td.number-td {
    width: 85px;
    min-width: 85px;
    max-width: 85px;
    white-space: normal;
    word-break: break-word;
}

.lk-resume-table table tbody tr td.manager-td,
.lk-resume-table table thead tr td.manager-td {
    width: 205px;
    min-width: 205px;
    max-width: 205px;
    white-space: normal;
    word-break: break-word;
}

.lk-resume-table table tbody tr td:last-child,
.lk-resume-table table thead tr td:last-child {
    width: 205px;
    min-width: 205px;
    max-width: 205px;
    white-space: normal;
    word-break: break-word;
}

.page-size {
    position: relative;
    display: inline-block;
    width: 65px; /* ширина селекта */
}

.page-size select {
    width: 100%;
    padding: 6px 30px 6px 11px;
    font-family: inherit;
    font-size: 16px;
    color: var(--gray-color);
    background-color: white;
    border: 1px solid var(--gray-color);
    border-radius: 8px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s ease;
}

/* Стили для вашей кастомной иконки (справа) */
.page-size::after {
    content: '';
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background-image: url(../img/page-size.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
}


.page-size select option {
    color: #333; /* цвет текста в выпадающем списке */
    background-color: white;
}

.page-size select:hover {
    border-color: #bfbfbf; /* чуть темнее при наведении */
}

.page-size select:focus {
    border-color: var(--gray-color);
    box-shadow: 0 0 0 2px rgba(217, 217, 217, 0.2);
}

.page-size select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 var(--gray-color);
}

.page-size:hover::after {
    opacity: 0.8;
}

.pagination-container.lk-table-pagination {
    justify-content: flex-end;
    gap: 20px;
}

.pagination-container.lk-table-pagination .pagination-block .pagination-link {
    color: var(--gray-color);
}

.selected-items {
    display: flex;

    flex-wrap: wrap;
    gap: 20px;
}

.selected-item {
    margin-top: 20px;
    background: #F0FAFF;
    padding: 8px 12px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.selected-item .close-city-btn{
    background: #F0FAFF;
    padding: 0px;
}

.work-payment-title {
    font-size: 16px;
    font-family: 'Rubik Medium', sans-serif;
    color: var(--semi-black-color);
    margin-top: 30px;
}

.lk-vacancy-creation-body .price-inputs{
    margin-bottom: 0px;
    margin-top: 24px;
}

.lk-vacancy-creation-body .price-inputs .price-input {
    padding: 17px 12px;
    padding-left: 35px;
}

.lk-vacancy-creation-body .price-inputs .price-field {
    pointer-events: unset;
}

.lk-vacancy-creation-body .price-inputs .price-field.min-price,
.lk-vacancy-creation-body .price-inputs .price-field.max-price {
    position: relative;
}

.lk-vacancy-creation-body .price-inputs .price-field.min-price:before {
    content: 'от';
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--semi-black-color-60);
    z-index: 1;
    pointer-events: none;
}

.lk-vacancy-creation-body .price-inputs .price-field.max-price:before {
    content: 'до';
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--semi-black-color-60);
    z-index: 1;
    pointer-events: none;
}

/* Скрываем стандартный Choices.js контейнер выбранных элементов */
.choices__inner .choices__list--multiple {
    display: none !important;
}

/* Настраиваем внешний вид Choices.js */
.choices {
    margin-bottom: 0;
}

.choices__inner {
    background: transparent;
    border: none;
    padding: 0;
    min-height: unset;
    width: 100%;
}

.choices__list--dropdown {
    z-index: 1000;
}

.choices__input {
    background-color: transparent !important;
    width: 100%;
}

.choices__list--dropdown, .choices__list[aria-expanded] {
    z-index: 100;
}

.choices {
    width: 100%;
}

input.choices__input {
    height: 56px;
    padding: 8px 16px 8px 16px;
    font-size: 16px;
    line-height: 1.5;
    color: #242A43;
    background-color: #fff;
    border: 1px solid var(--gray-color);
    border-radius: 12px;
    outline: none;
    transition: all 0.3s ease;
    box-sizing: border-box;
    width: 100% !important;
    margin-bottom: 0px;
    padding-top: 24px;
}

.choices.is-focused + label.floating-label, .choices + .floating-label.active {
    top: 5px;
    transform: translateY(0);
    font-size: 12px;
}

.editor-container .input-wrapper {
    flex-direction: column;
}

.editor-container .quill-editor {
    width: 100%;
    border-radius: 12px;
}

.editor-container .ql-toolbar.ql-snow + .ql-container.ql-snow {
    border: 1px solid var(--gray-color);
}

.editor-container .ql-editor {
    padding-top: 80px;
}

.editor-container .ql-toolbar {
    position: absolute;
    left: 20px;
    top: 20px;
    z-index: 50;
    border: none;
    background: var(--light-gray-color);
    border-radius: 12px;
}

.more-about-vacancy-title {
    margin-top: 30px;
}

.lk-vacancy-creation-award {
    background: #F2E9FF;
    padding: 24px;
    border-radius: 24px;
    margin-top: 30px;
}

.lk-vacancy-creation-award-title {
    color: var(--semi-black-color);
    font-size: 16px;
    font-family: 'Rubik Medium', sans-serif;
}

.lk-vacancy-creation-award-description {
    font-size: 14px;
    color: var(--semi-black-color-80);
}

.lk-vacancy-creation-recomend-award {
    background-color: var(--violet-color);
    padding: 16px;
    color: #fff;
    border-radius: 24px;
    margin-top: 20px;
    display: flex;
    align-items: center;
}

.lk-vacancy-creation-recomend-award-title {
    font-size: 16px;
    font-family: 'Rubik Medium', sans-serif;
}

.lk-vacancy-creation-recomend-award-desc {
    margin-top: 15px;
}

.lk-vacancy-creation-recomend-award .left {
    width: 66%;
}

.lk-vacancy-creation-recomend-award .right {
    width: 30%;
    display: flex;
    justify-content: center;
}

.lk-vacancy-creation-award-input {
    padding: 17px 12px;
    padding-left: 35px;
    border-radius: 12px;
    border: 1px solid var(--gray-color);
    font-size: 18px;
    box-sizing: border-box;
    width: 100%;
    margin-top: 20px;
}

.lk-vacancy-creation-recomend-award-sum {
    display: flex;
    justify-content: center;
    font-size: 32px;
    font-family: 'Rubik Medium', sans-serif;
}

.btn-cancel-vacancy-creation {
    font-size: 16px;
    color: var(--semi-black-color-60);
    background-color: #fff;
    padding: 15px 32px;
    border: 1px solid var(--gray-color);
    border-radius: 12px;
}

.btn-create-vacancy {
    font-size: 16px;
    color: #fff;
    background-color: var(--blue-color);
    padding: 15px 32px;
    border-radius: 12px;
}

.lk-vacancy-creation-buttons {
    display: flex;
    gap: 20px;
    margin-top: 30px;
}

.resume-photo {
    border: 1px solid var( --gray-color);
    border-radius: 12px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    height: 200px;
    width: 200px;
    margin-top: 20px;
    display: flex;
}

.resume-photo:hover {
    border-color: #666;
    background-color: rgba(0, 0, 0, 0.02);
}

/* Состояние загрузки (по умолчанию) */
.resume-photo .upload-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    height: 100%;
    width: 100%;
    cursor: pointer;
}

/* Состояние с фото */
.resume-photo .photo-state {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.resume-photo .image-container {
    width: 100%;
    height: calc(100% - 50px);
    overflow: hidden;
    border-radius: 12px 12px 0 0;
}

.resume-photo .uploaded-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.resume-photo .delete-btn {
    background: none;
    border: none;
    color: #ff4444;
    font-size: 18px;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 50px;
    transition: opacity 0.3s ease;
    font-family: inherit;
    margin: 0px;
}

.resume-photo .delete-btn:hover {
    opacity: 0.8;
}

.resume-photo .delete-btn span {
    font-size: 14px;
}

.resume-photo-block {
    display: flex;
    gap: 20px;
}

.resume-photo-block .right .floating-input:not(:first-child) {
    margin-top: 15px;
}

.resume-photo-block .right .floating-input:first-child {
    margin-top: 0px;
}

.resume-photo-block .right {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.salary-checkbox-container {
    padding: 5px 0px;
}

.salary-title {
    margin-top: 20px;
}

.salary-checkbox-container .checkmark {
    border: 1px solid #E5E5F0;
}

.salary-checkbox-container .custom-checkbox:checked + .checkbox-label .checkmark {
    border: none;
}

.lk-vacancy-creation-body .salary-inputs {
    margin: 0px;
}

.mg-t-0 {
    margin-top: 0px;
}

.lk-resume-creation-body h6 {
    margin-top: 30px;
}

.tag-block h6 {
    margin-top: 0px;
}

.work-experience-block, .study-block, .courses-block, .languages-block {
    border: 1px solid var(--gray-color);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 30px;
}

.work-experience-block .action-buttons button,
.study-block .action-buttons button,
.courses-block .action-buttons button,
.languages-block .action-buttons button{
    background-color: #fff;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.work-experience-block .action-buttons button img,
.study-block .action-buttons button img,
.courses-block .action-buttons button img,
.languages-block .action-buttons button img
{
    padding: 5px;
}

.work-experience-block .action-buttons button:hover,
.study-block .action-buttons button:hover,
.courses-block .action-buttons button:hover,
.languages-block .action-buttons button:hover
{
    background-color: var(--light-gray-color);
}

.work-experience-block .action-buttons,
.study-block .action-buttons,
.courses-block .action-buttons,
.languages-block .action-buttons
{
    display: flex;
    gap: 15px;
}

.work-experience-block-header, .study-block-header, .courses-block-header, .languages-block-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.study-block-header .title, .courses-block-title, .work-experience-block-header .title, .languages-block-title {
    font-size: 16px;
    font-family: 'Rubik Medium', sans-serif;
    color: var(--semi-black-color);
}

.study-block-header .finish-year-title {
    font-size: 14px;
    font-family: 'Rubik Regular', sans-serif;
    color: var(--semi-black-color-60);
}

.study-block .study-info, .languages-info {
    display: flex;
    gap: 20px;
}

.study-block .finish-year, .courses-block .finish-year {
    display: flex;
    gap: 20px;
    align-items: center;
}

.study-block .supposed-text, .courses-block .supposed-text {
    font-size: 14px;
    color: var(--semi-black-color-60);
    margin-top: 20px;
    width: 100%;
}

.work-experience-block .company-info {
    display: flex;
    gap: 20px;
}

.work-experience-block .company-info .floating-input {
    margin-top: 10px;
}

.toggle-checkbox-container label {
    display: inline-block;
    cursor: pointer;
}

.toggle-checkbox-container .toggle-checkbox-toggle {
    flex: 0 0 auto;
    margin: 0 12px 0 0;
    padding: 2px;
    position: relative;
    display: flex;
    width: 44px;
    height: 24px;
    border-radius: 14px;
    background: var(--gray-color);
    cursor: pointer;
    transition: background .15s ease-in-out;
}

.toggle-checkbox-container .toggle-checkbox-toggle > span {
    position: absolute;
    top: 4px;
    bottom: 2px;
    left: 5px;
    right: calc(100% - 22px);
    background: #FFF;
    border-radius: 12px;
    width: 16px;
    transition: all .15s ease-in-out;
    height: 16px;
}

.toggle-checkbox-container .toggle-checkbox-text {
    flex: 1 1 0;
}

.toggle-checkbox-container input:checked + label .toggle-checkbox-toggle > span {
    left: calc(100% - 22px);
    right: 2px;
}

.toggle-checkbox-container input:checked + label .toggle-checkbox-toggle {
    background: var(--blue-color);
}

.toggle-checkbox-container input {
    display: none;
}

.company-calendar-inputs {
    display: flex;
    width: 70%;
}

.company-calendar-inputs .floating-input:first-child input {
    border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
}

.company-calendar-inputs .floating-input:last-child input {
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
}

.company-calendar-inputs .input-wrapper.date::after {
    width: 24px;
    height: 23px;
}

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

.quill-editor {
    font-size: 14px;
    font-family: 'Rubik Regular', sans-serif;
}

.add-more-work-experience, .add-more-study, .add-more-course, .add-more-language {
    color: #fff;
    background-color: var(--semi-black-color);
    padding: 12px 32px;
    margin-top: 30px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.work-experience-block.collapsed .company-info,
.work-experience-block.collapsed .company-calendar,
.work-experience-block.collapsed h6,
.work-experience-block.collapsed .editor-container {
    display: none;
}

.work-experience-block.collapsed .work-experience-block-header {
    border-bottom: none;
    margin-bottom: 0;
}

/* Анимация для стрелки */
.hide-btn img {
    transition: transform 0.3s ease;
}

/* Для блока образования */
.study-block.collapsed .study-info,
.study-block.collapsed .finish-year {
    display: none;
}

.study-block.collapsed .study-block-header {
    border-bottom: none;
    margin-bottom: 0;
}

/* Анимация для стрелки (общая для всех блоков) */
.hide-btn img {
    transition: transform 0.3s ease;
}

.courses-info {
    display: flex;
    gap: 20px;
}

/* Для блока курсов */
.courses-block.collapsed .courses-info,
.courses-block.collapsed .supposed-text {
    display: none;
}

.courses-block.collapsed .courses-block-header {
    border-bottom: none;
    margin-bottom: 0;
}

.languages-block.collapsed .languages-info {
    display: none;
}

.languages-block.collapsed .languages-block-header {
    border-bottom: none;
    margin-bottom: 0;
}

.two-items-row {
    display: flex;
    gap: 20px;
}

.copy-input-container .form-input {
    padding: 8px 16px 8px 16px;
}

.copy-input-container .input-wrapper {
    position: relative;
    width: 100%;
}

.copy-input-container .form-input {
    padding-right: 40px; /* Отступ для иконки копирования */
    width: 100%;
    box-sizing: border-box;
}

.copy-btn {
    position: absolute;
    right: 8px; /* Отступ от правого края */
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
    transition: opacity 0.2s ease;
    z-index: 2;
}

.copy-btn:hover {
    opacity: 1;
}

.copy-btn img {
    width: 24px;
    height: 24px;
    display: block;
}

/* Стили для уведомления о копировании */
.copy-notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 14px;
    z-index: 9999;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.lk-vacancy-creation-body .share-buttons {
    display: flex;
    gap: 20px;
}

.lk-vacancy-creation-body .share-buttons .share-resume, .lk-vacancy-creation-body .share-buttons .send-resume-email {
    color: #fff;
    background-color: var(--semi-black-color);
    padding: 12px 32px;
    margin-top: 30px;
    border-radius: 12px;
    display: flex;
    align-items: center;
}

.lk-vacancy-creation-body .share-buttons .download-resume {
    color: var(--semi-black-color);
    background-color: #fff;
    border: 2px solid var(--blue-color);
    padding: 12px 32px;
    margin-top: 30px;
    border-radius: 12px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.accompanying-text-block {
    background-color: var(--light-blue-color);
    padding: 20px;
    border-radius: 16px;
    margin-top: 30px;
}

.accompanying-text-block h6 {
    margin-top: 0px;
    font-size: 20px;
}

.accompanying-text-block .editor-container .ql-toolbar.ql-snow + .ql-container.ql-snow {
    background: #fff;
    border: none;
}

/* Основной контейнер */
.template-selector {
    margin-bottom: 30px;
    margin-top: 20px;
}

.template-selector h6 {
    margin-bottom: 20px;
    font-size: 18px;
    color: #333;
}

/* Сетка шаблонов (для первого варианта) */
.template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

/* Элемент шаблона */
.template-item {
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.template-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Контейнер для изображения */
.template-image {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: #f5f5f5;
}

.template-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.template-item:hover .template-image img {
    transform: scale(1.05);
}


.template-item.active .template-check {
    opacity: 1;
}

.template-check img {
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(1);
}

/* Альтернативный вариант с radio */
.template-radio-group {
    display: flex;
    flex-wrap: wrap;
    margin: -10px;
}

.who-finds-block .who-find-img {
    position: absolute;
    bottom: 0px;
}

.template-radio {
    cursor: pointer;
    text-align: center;
    width: calc(33.333% - 20px);
    margin: 10px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.template-radio-image {
    position: relative;
    display: block;
    width: 100%;
    height: 150px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 10px;
    transition: all 0.3s ease;
}

.template-radio-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.template-radio.active .template-radio-image {
    border: 2px solid var(--blue-color);
}


.template-radio.active .radio-check {
    opacity: 1;
}

.template-radio-name {
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.tag-block {
    background: var(--light-violet-color);
    padding: 20px;
    border-radius: 16px;
}

.tag-block h6 {
    font-size: 20px;
    margin-top: 0px;
}

.tag-block p {
    margin-top: 20px;
    font-size: 14px;
    color: var(--semi-black-color-80);
}

.save-resume {
    margin-top: 30px;
}

.lk-vacancy-creation-header .title {
    font-size: 20px;
    font-family: 'Rubik Medium', sans-serif;
    color: var(--semi-black-color);
}

.main__search-dropdown {
    position: absolute;
    bottom: -30px;
    left: 0;
    transform: translateY(100%);
    background: #fff;
    color: #060c1c;
    width: 100%;
    text-align: left;
    padding: 10px 0;
    opacity: 0;
    pointer-events: none;
    user-select: none;
    transition: all .2s ease-in-out;
    box-shadow: 0 0 9px 2px rgba(0, 0, 0, .3);
    z-index: 3
}

.main__search-dropdown div {
    display: block;
    padding: 5px 20px;
    cursor: pointer;
    transition: all .2s ease-in-out
}

.main__search-dropdown div:hover {
    background: #f4f7fa
}

.we-get-all-specialists-title {
    width: 70%;
}

.who-finds h2 {
    font-size: 40px;
}

.social-modal-item {
    background-color: var(--light-grayv2-color);
    border-radius: 16px;
    padding: 8px 12px;
}

.main-slider-companies .title {
    color: var(--semi-black-color);
}

.resume-container .accompanying-text-resume {
    padding: 24px;
    border-radius: 12px;
    line-height: 22px;
}

.resume-container .title {
    font-size: 24px;
    font-family: 'Rubik Medium', sans-serif;
    color: var(--semi-black-color);
}

.resume-container .text {
    font-size: 16px;
    margin-top: 20px;
}

.resume-container.resume-1 .accompanying-text-resume, .resume-container.resume-7 .accompanying-text-resume{
    background-color: var(--light-violet-color);
}

.resume-container .user-photo img {
    width: 124px;
    height: 124px;
    border-radius: 50%;
    object-fit: cover;
}

.resume-main-body {
    background-color: #fff;
    border-radius: 20px;
    margin-top: 30px;
    color: var(--semi-black-color-80);
    display: flex;
    word-break: break-all;
}

.resume-main-body .user-photo-block {
    display: flex;
    gap: 50px;
}

.resume-main-body .user-photo-block .user-name {
    font-size: 28px;
    font-family: 'Rubik SemiBold', sans-serif;
    color: var(--semi-black-color);
}

.resume-main-body .user-photo-block .user-position {
    margin-top: 20px;
    font-size: 18px;
}

.resume-main-body .user-photo-block hr {
    margin: 20px 0px;
}

.resume-main-body .user-name-block {
    width: 100%;
}

.resume-user-contacts {
    background-color: #DBF1FF;
    width: 45%;
    padding: 50px 30px 50px 30px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    word-break: break-all;
}

.resume-user-contacts h5 {
    font-size: 18px;
}

.resume-user-info-block {
    padding: 50px 80px 50px 40px;
    width: fit-content;
    line-height: 24px;
}

.resume-user-info-block .user-info-block {
    margin-top: 40px;
    color: var(--semi-black-color);
}

.resume-user-info-block .work-experience-title, .resume-user-info-block .education-title {
    margin-top: 40px;
}

.resume-user-info-block .resume-work-experience-block {
    margin-top: 20px;
    gap: 20px;
    display: flex;
    flex-direction: column;
}

.resume-user-info-block .resume-work-experience-block .resume-work-experience-item {
    display: flex;
    justify-content: space-between;
}

.resume-user-info-block .resume-work-experience-block .resume-work-experience-item .title {
    font-size: 18px;
    font-family: 'Rubik SemiBold', sans-serif;
}

.resume-user-info-block .resume-work-experience-block .resume-work-experience-item .resume-work-experience-position {
    color: var(--semi-black-color-60);
    margin-top: 5px;
}

.resume-user-info-block .resume-work-experience-block .resume-work-experience-item .resume-work-experience-time {
    font-size: 14px;
    color: var(--semi-black-color-60);
    margin-top: 5px;
    width: 150px;
    text-align: right;
}

.resume-user-info-block .tasks-title {
    margin-top: 20px;
}

.resume-user-info-block .company-results-block {
    padding: 16px;
    background-color: var(--light-blue-color);
    border-radius: 16px;
}

.resume-user-info-block .company-results-block .company-results-title {
    font-size: 16px;
    font-family: 'Rubik Medium', sans-serif;
}

.resume-user-info-block .company-results-block .company-results-text {
    margin-top: 15px;
}

.resume-user-info-block hr {
    margin: 30px 0px;
}

.resume-user-info-block .resume-education-block {
    margin-top: 20px;
    gap: 20px;
    display: flex;
    flex-direction: column;
}

.resume-user-info-block .resume-education-block .resume-education-item {
    display: flex;
    justify-content: space-between;
}

.resume-user-info-block .resume-education-block .resume-education-item .title {
    font-size: 18px;
    font-family: 'Rubik SemiBold', sans-serif;
}

.resume-user-info-block .resume-education-block .resume-education-item .resume-education-position {
    color: var(--semi-black-color-60);
    margin-top: 5px;
}

.resume-user-info-block .resume-education-block .resume-education-item .resume-education-date {
    font-size: 16px;
    color: var(--semi-black-color-60);
}

.resume-user-contacts-title {
    font-size: 20px;
}

.resume-user-contacts-phone-block,
.resume-user-contacts-email-block,
.resume-user-contacts-socials-block,
.resume-user-work-experience-block,
.resume-user-business-block,
.resume-user-skills-block,
.resume-user-qualities-block,
.resume-user-language-block,
.resume-user-advanced-training-block
{
    margin-top: 20px;
}

.resume-user-contacts-socials-block {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.resume-user-contacts-socials-block .resume-user-contacts-social-item {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 18px;
}

.resume-user-about-block {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.resume-user-about-item {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
}

.resume-user-about-item span:first-child {
    color: var(--semi-black-color-80);
}

.resume-user-about-item span:last-child {
    font-family: 'Rubik Medium', sans-serif;
    color: var(--semi-black-color);
}

.resume-user-skills-item, .resume-user-quality-item{
    background-color: #F0F9FF;
    border-radius: 12px;
    padding: 8px 12px;
    width: fit-content;
}

.resume-user-skills-block {
    gap: 10px;
    display: flex;
    flex-direction: column;
}

.resume-user-qualities-block {
    gap: 10px;
    display: flex;
    flex-direction: column;
}

.resume-user-language-item {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    margin-top: 20px;
}

.resume-user-language-item span:first-child {
    color: var(--semi-black-color-80);
}

.resume-user-language-item span:last-child {
    font-family: 'Rubik Medium', sans-serif;
    color: var(--semi-black-color);
}

.resume-user-advanced-training-block {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.resume-user-advanced-training-item {
    font-family: 'Rubik Medium', sans-serif;
    color: var(--semi-black-color);
}

.resume-logo-block {
    display: flex;
    gap: 60px;
    align-items: center;
}

.blue-violet-gradient {
    background: linear-gradient(90deg, #0BA0FF 0%, #9045FF 100%);
    border-radius: 50px;
    color: #fff;
    padding: 9px 16px;
}

.blue-violet-gradient:hover {
    color: var(--white-color-80);
}

.create-resume-btn {
    color: #fff;
    padding: 11px 40px;
    gap: 10px;
}

.create-resume-btn:hover {
    color: var(--white-color-80);
}

.resume-footer {
    background: unset;
    padding-top: 0px;
}

.resume-container.resume-2 .resume-main-body{
    color: var(--semi-black-color);
    padding-bottom: 5px;
    border-radius: 0px;
}

.resume-container.resume-2 .accompanying-text-resume{
    background-color: var(--semi-black-color);
    border-radius: 0px;
}

.resume-container.resume-2 .accompanying-text-resume .title {
    color: #fff;
}

.resume-container.resume-2 .accompanying-text-resume .text {
    color: var(--white-color-80);
}

.resume-container.resume-2 .accompanying-text-resume a {
    color: #A7DDFF;
}

.resume-container.resume-2 .resume-main-body .user-photo-block {
    flex-direction: column;
    align-items: center;
    gap: 25px;
}

.resume-container.resume-2 .resume-main-body .user-name-block {
    text-align: center;
}

.resume-container.resume-2 .resume-main-body .user-photo-block .user-name {
    font-size: 32px;
    line-height: 40px;
    text-transform: uppercase;
}

.resume-container.resume-2 .resume-main-body .resume-user-contacts-phone-block,
.resume-container.resume-2 .resume-main-body .resume-user-contacts-email-block {
    text-align: center;
}

.resume-container.resume-2 .resume-main-body .resume-user-contacts {
    background: #fff;
    width: 55%;
}

.resume-container.resume-2 .resume-main-body hr {
    border-top: 2px solid #242A4366;
    margin: 20px 0px;
}

.resume-container.resume-2 .user-photo {
    border: 1px solid var(--semi-black-color);
    border-radius: 50%;
    padding: 5px;
}

.resume-container.resume-2 .user-photo img {
    filter: grayscale(100%);
}

.resume-container.resume-2 .user-address {
    margin-top: 20px;
}

.resume-container.resume-2 .resume-main-body .user-photo-block .user-position {
    background: var(--semi-black-color);
    color: #fff;
    width: fit-content;
    padding: 3px 5px;
    margin: 0 auto;
    margin-top: 20px;
}

.resume-container.resume-2 .resume-user-contacts-phone-block {
    margin-top: 0px;
}

.resume-container.resume-2 .resume-user-contacts-socials-block h5,
.resume-container.resume-2 .resume-user-work-experience-block h5,
.resume-container.resume-2 .resume-user-business-block h5,
.resume-container.resume-2 .resume-user-about-block h5,
.resume-container.resume-2 .resume-user-skills-block h5,
.resume-container.resume-2 .resume-user-qualities-block h5,
.resume-container.resume-2 .resume-user-language-block h5,
.resume-container.resume-2 .resume-user-advanced-training-block h5
{
    text-align: center;
    text-transform: uppercase;
}

.resume-container.resume-2 .resume-user-about-item span:first-child,
.resume-container.resume-2 .resume-user-language-item span:first-child
{
    color: var(--semi-black-color);
}

.resume-container.resume-2 .resume-user-skills-item,
.resume-container.resume-2 .resume-user-quality-item {
    background: unset;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 0px;
}

.resume-container.resume-2 .resume-user-info-block {
    border-left: 2px solid #242A4366;
    padding: 50px 40px 50px 40px;
}

.resume-container.resume-2 .resume-user-info-block .user-info-block {
    margin-top: 0px;
}

.resume-container.resume-2 .resume-user-info-block .resume-user-about-title,
.resume-container.resume-2 .resume-user-info-block .work-experience-title,
.resume-container.resume-2 .resume-user-info-block .education-title
{
    background: var(--semi-black-color);
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    font-size: 24px;
    font-family: 'Rubik Medium', sans-serif;
    padding: 5px 0px;
}

.resume-container.resume-2 .user-info-block a {
    color: #0C2CB0;
}

.resume-container.resume-2 .user-info-block a:hover {
    color: var(--light-blue-color);
}

.resume-container .resume-work-experience-dates {
    text-align: right;
}

.resume-container.resume-2 .resume-user-info-block .resume-work-experience-block .resume-work-experience-item .title {
    text-transform: uppercase;
}

.resume-container.resume-2 .resume-user-info-block .resume-work-experience-block .resume-work-experience-item .resume-work-experience-position {
    font-family: 'Rubik Italic', sans-serif;
    color: var(--semi-black-color);
}

.resume-container.resume-2 .tasks-title {
    text-transform: uppercase;
}

.resume-container.resume-2 .company-results-block {
    background: unset;
    border-left: 1px solid var(--semi-black-color);
    border-radius: 0px;
    padding: 0px 16px;
}

.resume-container.resume-2 .resume-user-info-block .company-results-block .company-results-title {
    font-size: 18px;
    font-family: 'Rubik SemiBold', sans-serif;
    text-transform: uppercase;
}

.hr-right-side {
    height: 2px;
    background: #242A4366;
    position: relative;
    margin: 20px 0px;
}

.hr-right-side-lint {
    position: absolute;
    height: 6px;
    background: var(--semi-black-color);
    left: 0px;
    width: 112px;
    top: -2px;
}

.resume-container.resume-2 .resume-user-info-block .resume-education-block .resume-education-item .title {
    text-transform: uppercase;
}

.resume-container.resume-1 .resume-user-info-block .resume-education-block .left-block {
    width: 550px;
}

.resume-container.resume-2 .resume-user-info-block .resume-education-block .left-block {
    width: 525px;
}

.resume-container.resume-2 .resume-user-info-block .resume-education-block .resume-education-item .resume-education-date,
.resume-container.resume-2 .resume-user-info-block .resume-education-block .resume-education-item .resume-education-position {
    color: var(--semi-black-color);
}


.resume-container.resume-2 .resume-main-body .resume-education-block hr {
    margin: 0px;
}

.resume-container.resume-2 .resume-user-advanced-training-item {
    font-family: 'Rubik Regular', sans-serif;
}

.resume-container.resume-3 .accompanying-text-resume a {
    color: var(--violet-color);
}

.resume-container.resume-3 .accompanying-text-resume {
    background-color: var(--light-violet-color);
    border-radius: 0px;
}

.resume-container.resume-3 .resume-user-contacts {
    padding-top: 0px;
}

.resume-container.resume-3 .user-photo img {
    width: auto;
    height: 460px;
    border-radius: 0px;
    max-width: 360px;
}

.resume-container.resume-3 .user-photo {
    position: relative;
}

.resume-container.resume-3 .user-photo::before {
    content: "";
    position: absolute;
    width: 360px;
    height: 112px;
    bottom: 0;
    left: 0;
    background: linear-gradient(to top right, #E8F9F6 50%, transparent 50%);
    z-index: 1;
    pointer-events: none;
}

.resume-container.resume-3 .resume-user-contacts {
    width: 360px;
    background-color: #E8F9F6;
    border-radius: 0px;
}

.resume-container.resume-3 .left-side-block {
    width: 55%;
}

.resume-container.resume-3 .resume-user-contacts-title {
    text-transform: uppercase;
}

.resume-container.resume-3 .resume-user-contacts-phone-block,
.resume-container.resume-3 .resume-user-contacts-email-block {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.resume-container.resume-3 .resume-user-work-experience-block,
.resume-container.resume-3 .resume-user-business-block,
.resume-container.resume-3 .resume-user-about-block,
.resume-container.resume-3 .resume-user-skills-block,
.resume-container.resume-3 .resume-user-qualities-block,
.resume-container.resume-3 .resume-user-language-block,
.resume-container.resume-3 .resume-user-advanced-training-block
{
    margin-top: 40px;
}

.resume-container.resume-3 .resume-user-work-experience-block h5,
.resume-container.resume-3 .resume-user-business-block h5,
.resume-container.resume-3 .resume-user-about-block h5,
.resume-container.resume-3 .resume-user-skills-block h5,
.resume-container.resume-3 .resume-user-qualities-block h5,
.resume-container.resume-3 .resume-user-language-block h5,
.resume-container.resume-3 .resume-user-advanced-training-block h5
{
    text-transform: uppercase;
}

.resume-container.resume-3 .resume-user-contacts ul {
    margin-top: 0px;
    margin-bottom: 0px;
}

.resume-container.resume-3 .resume-user-contacts ul li {
    margin-left: 20px;
}

.resume-container.resume-3 .progress-container {
    width: 100%;
    background-color: white;
    box-sizing: border-box;
    height: 12px;
    border-radius: 15px;
    overflow: hidden;
    margin-top: 10px;
}

.resume-container.resume-3 .progress-fill {
    height: 100%;
    background-color: var(--semi-black-color);
    transition: width 0.3s ease;
    border-radius: 15px;
}

.resume-container.resume-3 .resume-main-body .user-photo-block .user-name {
    font-size: 48px;
    line-height: 52px;
}

.resume-container.resume-3 .resume-main-body .user-photo-block .user-position {
    font-size: 24px;
    color: var(--semi-black-color);
}

.resume-container.resume-3 .resume-main-body .user-photo-block .user-address {
    font-size: 18px;
    color: var(--semi-black-color-80);
    margin-top: 20px;
}

.resume-container.resume-3 .text {
    line-height: 22px;
}

.resume-container.resume-3 .resume-work-experience-block-item {
    border-left: 1px solid var(--semi-black-color-60);
    padding-left: 20px;
}

.resume-container.resume-3 .resume-user-info-block .resume-education-block {
    border-left: 1px solid var(--semi-black-color-60);
    padding-left: 20px;
}

.resume-container.resume-3 .resume-user-info-block .resume-work-experience-block .resume-work-experience-item .resume-work-experience-position {
    font-family: 'Rubik Italic', sans-serif;
}

.resume-container.resume-3 .resume-user-info-block .company-results-block {
    background-color: #E8F9F6;
    border-radius: 0px;
    line-height: 22px;
}

.resume-container.resume-3 .resume-user-info-block .resume-education-block .resume-education-item .resume-education-position {
    font-family: 'Rubik Italic', sans-serif;
}

.resume-container.resume-3 .resume-user-info-block .resume-education-block .resume-education-item .title {
    text-transform: uppercase;
}

.resume-container.resume-3 .resume-user-info-block .resume-education-block .resume-education-item .left-block {
    width: 465px;
}

.resume-container.resume-3 .resume-user-info-block .resume-education-block .resume-education-item .resume-education-date {
    color: var(--semi-black-color);
}

.resume-container.resume-4 .accompanying-text-resume {
    background-color: #34407E;
    border-radius: 0px;
}

.resume-container.resume-4 .accompanying-text-resume .text {
    color: var(--white-color-80);
}

.resume-container.resume-4 .accompanying-text-resume a {
    color: #9FD9FF;
}

.resume-container.resume-4 .title {
    color: #fff;
}

.resume-container.resume-4 .resume-main-title {
    background-color: #34407E;
    color: #fff;
    width: 300px;
    height: 62px;
    font-size: 24px;
    font-family: 'Rubik Medium', sans-serif;
    display: flex;
    align-items: center;
    padding-left: 30px;
}

.resume-container.resume-4 .resume-user-info-block {
    padding: 50px 40px 50px 50px;
    padding-top: 0px;
}

.resume-container.resume-4 .resume-main-body {
    background-color: #EAE8EA;
    border-radius: 0px;
}

.resume-container.resume-4 .resume-main-title-block {
    position: relative;
}

.resume-container.resume-4 .resume-main-title-block:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 120%;
    height: 2px;
    background-color: var(--semi-black-color-60);
    z-index: 1;
}

.resume-container.resume-4 .resume-main-body .user-photo-block {
    margin-top: 0px;
    z-index: 2;
    position: relative;
}

.resume-container.resume-4 .resume-main-body .user-name-block {
    margin-top: 50px;
}

.resume-container.resume-4 .resume-main-body .user-photo-block .user-name {
    font-size: 48px;
    line-height: 54px;
}

.resume-container.resume-4 .resume-main-body .user-photo-block .user-position {
    font-size: 24px;
    color: var(--semi-black-color);
}

.resume-container.resume-4 .resume-main-body .user-photo-block .user-address {
    font-size: 18px;
    color: var(--semi-black-color-60);
    margin-top: 20px;
}

.resume-container.resume-4 .resume-main-body .user-info-about-block {
    background-color: #242A430A;
    padding: 16px;
    position: relative;
}

.resume-container.resume-4 .resume-main-body .user-info-about-block:after {
    content: '';
    position: absolute;
    right: 40px;
    top: 0px;
    transform: translateY(-50%);
    width: 32px;
    height: 24px;
    background-image: url(../img/resume/resume-quotes.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
}

.resume-container.resume-4 .resume-user-info-block .resume-work-experience-block .resume-work-experience-item .resume-work-experience-position {
    font-family: 'Rubik Italic', sans-serif;
}

.resume-container.resume-4 .resume-user-info-block .resume-work-experience-block .resume-work-experience-item .title {
    color: var(--semi-black-color);
}

.resume-container ul.point-list li {
    margin-top: 8px;
    margin-bottom: 8px;
}

.resume-container.resume-4 .resume-user-info-block .company-results-block {
    background-color: #242A430A;
    border-radius: 0px;
}

.resume-container.resume-4 hr {
    border: 1px solid #242A430A;
}

.resume-user-info-block h5 {
    font-size: 16px
}

.resume-container.resume-4 .resume-user-info-block .education-title {
    margin-top: 20px;
}

.resume-container.resume-4 .resume-user-info-block .resume-education-block .resume-education-item .title {
    text-transform: uppercase;
    color: var(--semi-black-color);
}

.resume-container.resume-4 .resume-user-info-block .resume-education-block .resume-education-item .left-block {
    width: 500px;
}

.resume-container.resume-4 .resume-education-block hr {
    margin: 0px;
}

.resume-container.resume-4 .resume-user-info-block .resume-education-block .resume-education-item .resume-education-position {
    font-family: 'Rubik Italic', sans-serif;
}

.resume-container.resume-4 .user-photo img {
    width: 300px;
    height: 450px;
    border-radius: 0px;
}

.resume-container.resume-4 .resume-user-info-block .user-info-block {
    margin-top: 60px;
}

.resume-container.resume-4 .right-side-block {
    padding-right: 50px;
    width: 350px;
    min-width: 350px;
}

.resume-container.resume-4 .right-side-block h5 {
    margin-bottom: 0px;
}

.resume-container.resume-4 .resume-user-contacts {
    width: 300px;
    margin-top: 20px;
    border-radius: 0px;
}

.resume-container.resume-4 .resume-user-work-experience-block {
    margin-top: 30px;
}

.resume-container.resume-4 .resume-user-contacts,
.resume-container.resume-4 .resume-user-business-block,
.resume-container.resume-4 .resume-user-about-block,
.resume-container.resume-4 .resume-user-skills-union,
.resume-container.resume-4 .resume-user-language-block,
.resume-container.resume-4 .resume-user-advanced-training-block
{
    background-color: #242A430A;
    padding: 30px;
}

.resume-container.resume-4 .resume-user-skills-union {
    margin-top: 20px;
}

.resume-container.resume-4 .resume-user-skills-block {
    margin-top: 0px;
}

.resume-container.resume-4 .right-side-block ul.line-list {
    margin-bottom: 0px;
}

.resume-container.resume-4 .resume-user-advanced-training-item {
    font-family: 'Rubik Regular', sans-serif;
}

.resume-container.resume-5 .accompanying-text-resume {
    background-color: #fff;
}

.resume-container.resume-5 .resume-main-body {
    background-color: #3F5B6D;
    color: #fff;
}

.resume-container.resume-5 .resume-main-body .user-photo-block .user-name {
    font-size: 38px;
    color: #fff;
    line-height: 42px;
}

.resume-container.resume-5 .resume-main-body .user-name-block {
    text-align: center;
}

.resume-container.resume-5 .resume-main-body .user-photo-block .user-position {
    font-size: 24px;
    font-family: 'Rubik Regular', sans-serif;
}

.resume-container.resume-5 .user-address {
    color: var(--white-color-80);
    margin-top: 20px;
    font-size: 18px;
}

.resume-container.resume-5 .user-info-block h3 {
    color: #3F5B6D;
    background-color: #fff;
    text-align: center;
    border-radius: 16px;
    font-size: 24px;
    padding: 10px 0px;
}

.resume-container.resume-5 .resume-user-info-block .user-info-block {
    color: var(--white-color-80);
}

.resume-container.resume-5 .resume-user-info-block .user-info-block a {
    color: #7CDAFF;
}

.resume-container.resume-5 .title {
    color: #fff;
}

.resume-container.resume-5 .accompanying-text-resume .title {
    color: var(--semi-black-color);
}

.resume-container.resume-5 .resume-user-info-block .resume-work-experience-block .resume-work-experience-item .resume-work-experience-position {
    font-family: 'Rubik Italic', sans-serif;
    color: var(--white-color-80);
}

.resume-container.resume-5 .resume-user-info-block .resume-work-experience-block .resume-work-experience-item .resume-work-experience-time {
    color: var(--white-color-80);
}

.resume-container.resume-5 .resume-user-info-block .tasks-title {
    color: #fff;
}

ul.square-list, ul.diamond-list {
    list-style: none;
    padding-left: 0;
}

ul.square-list li, ul.diamond-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
}

ul.square-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background-color: var(--white-color-80);
}

ul.diamond-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    width: 10px;
    height: 10px;
    background-color: #3376BA;
    transform: rotate(45deg);
}

.resume-container.resume-5 .company-results-block {
    border: 1px solid var(--white-color-80);
    background-color: #3F5B6D;
}

.resume-container.resume-5 ul.square-list {
    margin-top: 20px;
}

.resume-container.resume-5 hr {
    border-top: 2px solid var(--white-color-80);
}

.resume-container.resume-5 .resume-education-item .resume-education-position {
    color: var(--white-color-80);
    font-family: 'Rubik Italic', sans-serif;
}

.resume-container.resume-5 .resume-education-block hr {
    margin: 0px;
}

.resume-container.resume-5 .resume-user-info-block .resume-education-block .resume-education-item .resume-education-date {
    color: #fff;
}

.resume-container.resume-5 .resume-user-info-block {
    padding: 40px 40px 50px 40px;
}

.resume-container.resume-5 .right-side-block {
    padding: 40px 40px 50px 0px;
    width: 62%;
}

.resume-container.resume-5 .user-photo img {
    width: 180px;
    height: 180px;
}

.resume-container.resume-5 .user-photo {
    margin: 0 auto;
    border: 6px solid #fff;
    border-radius: 50%;
}

.resume-container.resume-5 .resume-user-contacts {
    width: 100%;
    border-radius: 20px;
    background-color: #fff;
    padding: 30px;
    color: var(--semi-black-color-80);
    margin-top: 25px;
}

.resume-container.resume-5 .resume-main-body .user-name-block{
    margin-top: 45px;
}

.resume-container.resume-5 .resume-user-contacts h4 {
    font-size: 28px;
    color: #3F5B6D;
    font-family: 'Rubik SemiBold', sans-serif;
    position: relative;
    padding-bottom: 5px;
}

.resume-container.resume-5 .resume-user-contacts h4:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 120%;
    height: 2px;
    background-color: #3F5B6D;
    z-index: 1;
}

.resume-container.resume-5 .resume-user-contacts-phone-block, .resume-container.resume-5 .resume-user-contacts-email-block {
    color: var(--semi-black-color-80);
}

.resume-container.resume-5 .resume-user-contacts-socials-block .resume-user-contacts-social-item {
    color: #3F5B6D;
}

.resume-container.resume-5 .resume-user-contacts ul.square-list {
    margin-top: 0px;
}

.resume-container.resume-5 .resume-user-contacts ul.square-list li::before {
    background-color: #3F5B6D;
}

.resume-container.resume-5 .resume-user-contacts ul.square-list li {
    top: 8px;
}

.resume-container.resume-5 .resume-user-info-block .resume-education-block .resume-education-item .left-block {
    width: 550px;
}

.resume-container.resume-5 .resume-user-business, .resume-container.resume-5 .resume-user-work-experience {
    margin-top: 15px;
}

.resume-container.resume-5 .resume-user-info-block .user-info-block {
    margin-top: 60px;
}

.resume-container.resume-6 .accompanying-text-resume .title {
    color: #fff;
}

.resume-container.resume-6 .accompanying-text-resume {
    background-color: #332B23;
    color: var(--white-color-80);
    border-radius: 20px;
}

.resume-container.resume-6 .accompanying-text-resume .text {
    color: var(--white-color-80);
}

.resume-container.resume-6 .accompanying-text-resume a{
    color: #FCDFAD;
}

.resume-container.resume-6 .resume-main-body {
    color: #1B3A5A;
    background-color: #FDF1E7;
    position: relative;
}

.resume-container.resume-6 .resume-main-body .user-photo-block .user-name {
    font-size: 36px;
    font-family: 'Rubik SemiBold', sans-serif;
    color: #1B3A5A;
    border-bottom: 1px solid #1B3A5ACC;
    padding-bottom: 10px;
    line-height: 42px;
}

.resume-container.resume-6 .resume-main-body .user-photo-block .user-position {
    font-size: 24px;
    text-transform: uppercase;
}

.resume-container.resume-6 .resume-main-body .user-photo-block .user-address {
    margin-top: 15px;
    font-size: 18px;
    color: #1B3A5A;
}

.resume-container.resume-6 .resume-main-body h3,
.resume-container.resume-6 .resume-main-body h4,
.resume-container.resume-6 .resume-main-body h5
{
    color: #1B3A5A;
    font-size: 20px;
    font-family: 'Rubik SemiBold', sans-serif;
}

.resume-container.resume-6 .resume-user-info-block .tasks-title {
    font-size: 16px;
}

.resume-container.resume-6 .text
{
    color: #1B3A5A;
}

.resume-container.resume-6 .resume-user-info-block .resume-work-experience-block .resume-work-experience-item .resume-work-experience-position {
    font-family: 'Rubik Italic', sans-serif;
}

.resume-container.resume-6 .resume-work-experience-block::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 20px;
    width: 2px;
    height: calc(100% - 40px);
    background-color: #3376BA;
    z-index: 1;
}

.resume-container.resume-6 .resume-work-experience-block-item {
    position: relative;
    margin-bottom: 30px;
}

.resume-container.resume-6 .resume-work-experience-block-item:last-child {
    margin-bottom: 0px;
}

.resume-container.resume-6 .resume-work-experience-block-item::before {
    content: '';
    position: absolute;
    left: -33px;
    top: 9px;
    width: 10px;
    height: 10px;
    border: 2px solid #3376BA;
    background-color: #3376BA;
    transform: rotate(45deg);
    z-index: 2;
}

.resume-container.resume-6 .resume-work-experience-block {
    position: relative;
    padding-left: 40px;
}

.resume-container.resume-6 .user-info-block {
    padding-right: 40px;
}

.resume-container.resume-6 .resume-user-info-block {
    padding: 50px 30px 50px 40px;
}

.resume-container.resume-6 .resume-user-info-block .company-results-block {
    background-color: #CCDBEB;
}

.resume-container.resume-6 .resume-user-info-block .company-results-block .company-results-text {
    margin-top: 5px;
}

.resume-container.resume-6 ul.line-list li {
    color: #1B3A5ACC;
    margin-top: 8px;
    margin-bottom: 8px;
}

.resume-container.resume-6 .resume-education-block {
    position: relative;
    padding-left: 40px;
}

.resume-container.resume-6 .resume-education-block::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 20px;
    width: 2px;
    height: calc(100% - 25px);
    background-color: #3376BA;
    z-index: 1;
}

.resume-container.resume-6 .resume-education-item {
    position: relative;
}

.resume-container.resume-6 .resume-education-item::before {
    content: '';
    position: absolute;
    left: -33px;
    top: 9px;
    width: 10px;
    height: 10px;
    border: 2px solid #3376BA;
    background-color: #3376BA;
    transform: rotate(45deg);
    z-index: 2;
}

.resume-container.resume-6 .resume-user-info-block .resume-education-block .resume-education-item .left-block {
    width: 580px;
}

.resume-container.resume-6 .resume-user-info-block .resume-education-block .resume-education-item .title {
    color: #1B3A5A;
}

.resume-container.resume-6 .resume-user-info-block .resume-education-block .resume-education-item .resume-education-position {
    font-family: 'Rubik Italic', sans-serif;
}

.resume-container.resume-6 .right-side-block {
    padding: 40px 30px 0px 0px;
    width: 430px;
}

.resume-container.resume-6 .user-photo {
    margin: 0 auto;
    border-radius: 50%;
}

.resume-container.resume-6 .user-photo img {
    width: 180px;
    height: 180px;
}

.resume-container.resume-6 .resume-user-contacts {
    width: 100%;
    border-radius: 20px;
    background-color: #FDF1E7;
    padding: 30px 0px;
    color: var(--semi-black-color-80);
    margin-top: 0px;
}

.resume-container.resume-6 .resume-user-contacts-phone-block h5,
.resume-container.resume-6 .resume-user-contacts-email-block h5
{
    font-size: 16px;
}

.resume-container.resume-6 .resume-user-contacts hr {
    margin: 20px 0px;
    border-top: 1px solid #D4CAC0;
}

.resume-container.resume-6 .resume-main-body::after {
    content: '';
    position: absolute;
    left: 775px;
    bottom: 0;
    width: 1px;
    background-color: #D4CAC0;
    z-index: 1;
    height: 90%;
}

.resume-container.resume-7 .resume-main-body {
    flex-direction: column;
}

.resume-container.resume-7 .resume-main-body-block, .resume-container.resume-7 .user-photo-block {
    display: flex;
    padding: 20px;
}

.resume-container.resume-7 .resume-user-contacts, .resume-container.resume-7 .user-photo-block .user-photo {
    width: 335px;
    flex-shrink: 0;
}

.resume-container.resume-7 .user-photo img {
    border-radius: 0px;
    border-top-right-radius: 40px;
    border-bottom-left-radius: 40px;
    width: 100%;
    height: 380px;
}

.resume-container.resume-7 .resume-main-body-block {
    padding-top: 0px;
}

.resume-container.resume-7 .user-photo-block .user-name {
    font-size: 50px;
    color: rgba(42, 34, 29, 0.8);
    line-height: 54px;
    margin-top: 20px;
}

.resume-container.resume-7 .resume-main-body .user-photo-block .user-position {
    font-size: 24px;
    color: rgba(42, 34, 29, 0.8);
    line-height: 28px;
}

.resume-container.resume-7 .resume-main-body .user-photo-block .user-address {
    font-size: 18px;
    margin-top: 20px;
}

.resume-container.resume-7 .resume-user-contacts {
    padding: 0px;
    background-color: #fff;
}

.resume-container.resume-7 .resume-user-skills-block {
    margin-top: 0px;
}

.resume-container.resume-7 .resume-user-skills-union {
    margin-top: 20px;
}

.resume-container.resume-7 .resume-user-contacts .resume-user-contacts-top,
.resume-container.resume-7 .resume-user-contacts .resume-user-business-block,
.resume-container.resume-7 .resume-user-contacts .resume-user-about-block,
.resume-container.resume-7 .resume-user-contacts .resume-user-skills-union,
.resume-container.resume-7 .resume-user-contacts .resume-user-language-block,
.resume-container.resume-7 .resume-user-contacts .resume-user-advanced-training-block
{
    padding: 30px;
    border-top-right-radius: 40px;
    border-bottom-left-radius: 40px;
    background-color: #F9ECEB;
}

.resume-container.resume-7 .resume-user-work-experience-block {
    margin-top: 40px;
}

.resume-container.resume-7 .resume-user-contacts h5 {
    font-size: 20px;
    font-family: 'Rubik SemiBold', sans-serif;
    color: var(--semi-black-color);
}

.resume-7-hr {
    border-top: 5px solid var(--semi-black-color);
    width: 60px;
    margin: 20px 0px;
}

.resume-container.resume-7 .resume-user-contacts .resume-user-about-block .resume-7-hr,
.resume-container.resume-7 .resume-user-contacts .resume-user-skills-union .resume-7-hr,
.resume-container.resume-7 .resume-user-contacts .resume-user-language-block .resume-7-hr,
.resume-container.resume-7 .resume-user-contacts .resume-user-advanced-training-block .resume-7-hr
{
    margin: 10px 0px;
}

.resume-container.resume-7 .resume-user-contacts .resume-user-about-block h5,
.resume-container.resume-7 .resume-user-contacts .resume-user-skills-union h5,
.resume-container.resume-7 .resume-user-contacts .resume-user-language-block h5,
.resume-container.resume-7 .resume-user-contacts .resume-user-advanced-training-block h5
{
    margin-bottom: 0px;
}


.resume-container.resume-7 .resume-user-contacts ul.point-list {
    margin-top: 0px;
    margin-bottom: 0px;
    color: var(--semi-black-color);
}

.resume-container.resume-7 .resume-user-info-block .user-info-block {
    margin-top: 0px;
}

.resume-container.resume-7 .resume-user-info-block {
    padding: 0px 0px 0px 20px;
}

.resume-container.resume-7 .text,
.resume-container.resume-7 .user-info-block-about h3,
.resume-container.resume-7 .user-info-block-about hr,
.resume-container.resume-7 .user-info-block-about text
{
    color: rgba(42, 34, 29, 0.8);
}

.resume-container.resume-7 .user-info-block-about hr
{
    border-top: 5px solid rgba(42, 34, 29, 0.8);
}

.resume-container.resume-7 .user-info-block-about,
.resume-container.resume-7 .user-info-block-experience,
.resume-container.resume-7 .user-info-block-education
{
    border-top-left-radius: 40px;
    border-bottom-right-radius: 40px;
    padding: 30px;
}

.resume-container.resume-7 .user-info-block-about, .resume-container.resume-7 .user-info-block-education {
    background-color: #F9EEE2;
}

.resume-container.resume-7 .user-info-block-experience {
    background-color: #F7F3EF;
}

.resume-container.resume-7 .resume-user-info-block .work-experience-title, .resume-container.resume-7 .resume-user-info-block .education-title {
    margin-top: 0px;
}

.resume-container.resume-7 .user-info-block-experience,
.resume-container.resume-7 .user-info-block-education
{
    margin-top: 20px;
}

.resume-container.resume-7 .resume-user-info-block .resume-7-hr
{
    margin: 20px 0px;
}

.resume-container.resume-7 .resume-user-info-block .resume-work-experience-block
{
    margin-top: 40px;
}

.resume-container.resume-7 .resume-user-info-block .company-results-block
{
    background-color: unset;
    border: 1px solid rgba(42, 34, 29, 0.2);
}

.resume-container.resume-7 .resume-user-info-block .resume-work-experience-block .resume-work-experience-item .resume-work-experience-position,
.resume-container.resume-7 .resume-user-info-block .resume-education-block .resume-education-item .resume-education-position
{
    font-family: 'Rubik Italic', sans-serif;
}

.resume-container.resume-7 .resume-user-info-block .resume-education-block .resume-education-item .left-block {
    width: 550px;
}

.resume-container.resume-8 .accompanying-text-resume {
    background-color: #242A43;
    color: #fff;
    border-radius: 0px;
}

.resume-container.resume-8 .accompanying-text-resume a {
    color: #9FD9FF;
}

.resume-container.resume-8 .accompanying-text-resume .title{
    color: #fff;
}

.resume-container.resume-6 .accompanying-text-resume .text {
    color: var(--white-color-80);
}

.resume-container.resume-8 .resume-main-body {
    flex-direction: column;
    border-radius: 0px;
}

.resume-container.resume-8 .resume-main-body-block, .resume-container.resume-8 .user-photo-block {
    display: flex;
    padding: 20px;
    background-color: #EAEAF6;
    margin-right: 30px;
    padding-top: 0px;
    gap: 30px;
    padding-left: 40px;
}

.resume-container.resume-8 .resume-user-contacts, .resume-container.resume-8 .user-photo-block .user-photo {
    width: 387px;
    flex-shrink: 0;
}

.resume-container.resume-8 .resume-main-body-block {
    margin-top: 30px;
}

.resume-container.resume-8 .user-photo-block .user-photo {
    background-color: #242A43;
    display: flex;
    justify-content: space-around;
    height: 336px;
    align-items: center;
}

.resume-container.resume-8 .user-photo img {
    width: 214px;
    height: 214px;
    border: 8px solid #fff;
}

.resume-container.resume-8 .resume-main-body .user-name-block {
    margin-top: 30px;
}

.resume-container.resume-8 .resume-main-body .user-photo-block .user-name {
    font-size: 44px;
    font-family: 'Rubik Medium', sans-serif;
    line-height: 48px;
}

.resume-container.resume-8 .resume-main-body .user-photo-block .user-position {
    font-size: 24px;
    line-height: 28px;
    margin-top: 15px;
}

.resume-container.resume-8 .resume-main-body .user-photo-block .user-address {
    font-size: 18px;
    margin-top: 15px;
}

.resume-container.resume-8 .user-info-block-about h3 {
    font-size: 24px;
    font-family: 'Rubik Medium', sans-serif;
    margin-top: 20px;
    border-bottom: 1px solid var(--semi-black-color);
    padding-bottom: 5px;
    width: fit-content;
}

.resume-container.resume-8 .user-info-block-about a {
    color: #167CBF;
}

.resume-container.resume-8 .resume-user-contacts {
    padding: 30px;
    background-color: #242A43;
    color: #fff;
    border-radius: 0px;
}

.resume-container.resume-8 .resume-user-contacts .resume-user-contacts-title{
    color: #fff;
    border-bottom: 1px solid #7e7e7e;
    padding-bottom: 5px;
    font-size: 28px;
    font-family: 'Rubik Medium', sans-serif;
}

.resume-container.resume-8 .resume-user-contacts h5 {
    color: #fff;
}

.resume-container.resume-8 .resume-user-work-experience-block h5,
.resume-container.resume-8 .resume-user-business-block h5,
.resume-container.resume-8 .resume-user-about-block h5,
.resume-container.resume-8 .resume-user-skills-block h5,
.resume-container.resume-8 .resume-user-qualities-block h5,
.resume-container.resume-8 .resume-user-language-block h5,
.resume-container.resume-8 .resume-user-advanced-training-block h5
{
    font-size: 28px;
    font-family: 'Rubik Medium', sans-serif;
    border-bottom: 1px solid #7e7e7e;
    padding-bottom: 5px;
}

.resume-container.resume-8 .resume-user-contacts .resume-user-contacts-phone,
.resume-container.resume-8 .resume-user-contacts .resume-user-contacts-email {
    color: var(--white-color-80);
}

.resume-container.resume-8 .resume-user-contacts .resume-user-contacts-phone-block,
.resume-container.resume-8 .resume-user-contacts .resume-user-contacts-email-block {
    margin-top: 30px;
}

.resume-container.resume-8 .resume-user-contacts-socials-block .resume-user-contacts-social-item {
    color: var(--white-color-80);
}

.resume-container.resume-8 .resume-user-work-experience,
.resume-container.resume-8 .resume-user-business,
.resume-container.resume-8 .resume-user-about-item
{
    color: var(--white-color-80);
}

.resume-container.resume-8 .resume-user-about-item span:first-child, .resume-container.resume-8 .resume-user-language-item span:first-child {
    color: var(--white-color-80);
}

.resume-container.resume-8 .resume-user-about-item span:last-child, .resume-container.resume-8 .resume-user-language-item span:last-child {
    color: #fff;
}

.resume-container.resume-8 ul.point-list {
    margin-top: 0px;
    margin-bottom: 0px;
    color: var(--white-color-80);
}

.resume-container.resume-8 .resume-user-contacts .resume-user-business-block,
.resume-container.resume-8 .resume-user-contacts .resume-user-about-block,
.resume-container.resume-8 .resume-user-contacts .resume-user-skills-union,
.resume-container.resume-8 .resume-user-contacts .resume-user-language-block,
.resume-container.resume-8 .resume-user-contacts .resume-user-advanced-training-block
{
    margin-top: 30px;
}

.resume-container.resume-8 .resume-user-info-block .user-info-block
{
    margin-top: 0px;
}

.resume-container.resume-8 .resume-user-info-block
{
    padding: 0px 10px 40px 0px;
}

.resume-container.resume-8 .resume-user-info-block .work-experience-title,
.resume-container.resume-8 .resume-user-info-block .education-title
{
    margin-top: 30px;
    background-color: var(--semi-black-color);
    color: #fff;
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 15px;
    font-family: 'Rubik Medium', sans-serif;
    font-size: 28px;
    gap: 10px;
}

.resume-container.resume-8 .resume-user-info-block .resume-work-experience-block .resume-work-experience-item .resume-work-experience-position {
    font-family: 'Rubik Italic', sans-serif;
}

.resume-container.resume-8 .resume-user-info-block ul.point-list {
    color: var(--semi-black-color-80);
}

.resume-container.resume-8 .resume-user-info-block .company-results-block {
    background-color: rgba(36, 42, 67, 0.12);
    border-radius: 0px;
}

.resume-container.resume-8 .resume-user-info-block hr {
    border-top: 2px solid rgba(51, 58, 88, 0.12);
}

.resume-container.resume-8 .resume-user-info-block .resume-education-block .resume-education-item .title {
    text-transform: uppercase;
}

.resume-container.resume-8 .resume-user-info-block .resume-education-block .resume-education-item .left-block {
    width: 540px;
}

.resume-container.resume-8 .user-info-block-education hr {
    margin: 10px 0px;
}

.resume-container.resume-8 .user-info-block-education {
    margin-top: 50px;
}

.resume-container.resume-8 .resume-user-info-block .resume-education-block .resume-education-item .resume-education-position {
    font-family: 'Rubik Italic', sans-serif;
}

.resume-container.resume-8 .resume-user-info-block .resume-education-block .resume-education-item .resume-education-date {
    color: var(--semi-black-color);
}

.resume-container.resume-9 .accompanying-text-resume {
    background-color: #1C3333;
    border-radius: 20px;
}

.resume-container.resume-9 .accompanying-text-resume .title {
    color: #fff;
}

.resume-container.resume-9 .accompanying-text-resume .text {
    color: var(--white-color-80);
}

.resume-container.resume-9 .accompanying-text-resume a {
    color: #D2987A;
}

.resume-container.resume-9 .resume-main-body .user-photo-block {
    background-color: #DFC8BC;
    border-bottom-right-radius: 160px;
    border-top-right-radius: 160px;
    width: 73%;
    height: 270px;
}

.resume-container.resume-9 .resume-main-body .user-photo {
    border: 15px solid #DFC8BC;
    border-radius: 50%;
}

.resume-container.resume-9 .user-photo img {
    width: 240px;
    height: 240px;
}

.resume-container.resume-9 .resume-main-body {
    display: flex;
    flex-direction: column;
    background-color: #EEE6E5;
    padding: 40px 0px;
    overflow: hidden;
    padding-bottom: 0px;
}

.resume-container.resume-9 .resume-main-body .user-name-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 0px 40px;
}

.resume-container.resume-9 .resume-main-body .user-photo-block .user-name {
    font-size: 40px;
    line-height: 44px;
}

.resume-container.resume-9 .resume-user-photo-block {
    display: flex;
    position: relative;
    padding-bottom: 20px;
}

.resume-container.resume-9 .resume-side-background, .resume-container.resume-9 .resume-user-contacts {
    width: 380px;
    flex-shrink: 0;
}

.resume-container.resume-9 .resume-user-contacts {
    width: 37%;
    background-color: #1D3434;
    border-radius: 0px;
    color: #fff;
}

.resume-container.resume-9 .right-side-block {
    display: flex;
    padding: 0px;
}

.resume-container.resume-9 .user-info-block {
    padding: 20px 40px;
}

.resume-container.resume-9 .resume-side-background {
    width: 38%;
    height: 350px;
    background-color: #1D3434;
    -webkit-mask: radial-gradient(circle at 100% 0%, rgba(44, 0, 0, 0) 180px, rgba(0, 0, 0, 1) 71px), radial-gradient(circle at -6% 53%, rgba(0, 0, 0, 0) 150px, rgba(0, 0, 0, 1) 51px);
    -webkit-mask-composite: destination-in;
    mask: radial-gradient(circle at 100% 0%, rgba(0, 0, 0, 0) 180px, rgba(0, 0, 0, 1) 181px),
    radial-gradient(circle at -6% 53%, rgba(0, 0, 0, 0) 150px, rgba(0, 0, 0, 1) 151px);
    mask-composite: intersect;
    position: absolute;
    right: -11px;
    bottom: -10px;
}

.resume-container.resume-9 .user-info-block h3 {
    font-size: 20px;
}

.resume-container.resume-9 .user-info-block a {
    color: #4C9292;
}

.resume-container.resume-9 .work-experience-title {
    margin-top: 40px;
}

.resume-container.resume-9 .title, .resume-container.resume-9 h5 {
    font-size: 18px;
}

.resume-container.resume-9 .resume-user-info-block .company-results-block {
    background-color: #DFC8BC;
}

.resume-container.resume-9 .resume-user-info-block hr {
    border-top: 2px solid var(--gray-color);
    margin: 10px 0px;
}

.resume-container.resume-9 .resume-user-info-block .resume-education-block .resume-education-item .left-block {
    width: 590px;
}

.resume-container.resume-10 .resume-user-info-block .resume-education-block .resume-education-item .left-block {
    width: 590px;
}

.resume-container.resume-9 .resume-user-info-block .resume-education-block .resume-education-item .resume-education-date {
    color: var(--semi-black-color);
}

.resume-container.resume-9 .resume-user-info-block .resume-education-block .resume-education-item .resume-education-position {
    font-family: 'Rubik Italic', sans-serif;
}

.resume-container.resume-9 .resume-user-contacts-title,
.resume-container.resume-9 .resume-user-contacts h5,
.resume-container.resume-9 .resume-user-contacts h4
{
    color: #fff;
}

.resume-container.resume-9 .resume-user-contacts-phone, .resume-container.resume-9 .resume-user-contacts-email {
    color: var(--white-color-80);
}

.resume-container.resume-9 .resume-user-contacts-socials-block .resume-user-contacts-social-item {
    color: var(--white-color-80);
}

.resume-container.resume-9 .resume-user-work-experience-block,
.resume-container.resume-9 .resume-user-business-block,
.resume-container.resume-9 .resume-user-about-block,
.resume-container.resume-9 .resume-user-skills-block,
.resume-container.resume-9 .resume-user-qualities-block,
.resume-container.resume-9 .resume-user-language-block,
.resume-container.resume-9 .resume-user-advanced-training-block
{
    margin-top: 40px;
}

.resume-container.resume-9 .resume-user-work-experience,
.resume-container.resume-9 .resume-user-business,
.resume-container.resume-9 .resume-user-about-item
{
    color: var(--white-color-80);
}

.resume-container.resume-9 .resume-user-about-item span:first-child, .resume-container.resume-9 .resume-user-language-item span:first-child {
    color: var(--white-color-80);
}

.resume-container.resume-9 .resume-user-about-item span:last-child, .resume-container.resume-9 .resume-user-language-item span:last-child {
    color: #fff;
}

.resume-container.resume-9 ul.point-list {
    margin-top: 0px;
    margin-bottom: 0px;
}

.resume-container.resume-9 .resume-user-contacts ul.point-list {
    color: var(--white-color-80);
}

.resume-container.resume-10 .accompanying-text-resume {
    background-color: #333333;
    border-radius: 20px;
}

.resume-container.resume-10 .title {
    color: #fff;
}

.resume-container.resume-10 .text {
    color: var(--white-color-80);
}

.resume-container.resume-10 a {
    color: #E7A8A8;
}

.resume-container.resume-10 .resume-main-body {
    display: flex;
    flex-direction: column;
}

.resume-container.resume-10 .resume-main-body-top {
    display: flex;
    padding: 40px;
    background-color: #E0E0E0;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
}

.resume-container.resume-10 .user-info-block-about h3,
.resume-container.resume-10 .work-experience-title,
.resume-container.resume-10 .education-title
{
    color: #353535;
    font-size: 28px;
    font-family: 'Rubik SemiBold', sans-serif;
    display: flex;
    gap: 10px;
    align-items: center;
}

.resume-container.resume-10 .user-info-block-about .text {
    color: rgba(50, 50, 50, 0.8);
    padding-right: 35px;
}

.resume-container.resume-10 .resume-main-body .user-name-block, .resume-container.resume-10 .resume-user-contacts {
    width: 360px;
    flex-shrink: 0;
}

.resume-container.resume-10 .resume-main-body-block {
    display: flex;
    padding: 0px 40px;
}

.resume-container.resume-10 .resume-main-body .user-name-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.resume-container.resume-10 .resume-main-body .user-name-block .user-name {
    font-size: 32px;
    line-height: 36px;
    color: #353535;
    font-family: 'Rubik SemiBold', sans-serif;
    text-align: center;
}

.resume-container.resume-10 .resume-main-body .user-name-block .user-position {
    font-size: 20px;
    color: rgba(50, 50, 50, 0.7);
    margin-top: 10px;
}

.resume-container.resume-10 .resume-main-body .user-name-block .user-address {
    margin-top: 10px;
}

.resume-container.resume-10 .resume-user-info-block .user-info-block,
.resume-container.resume-10 .resume-user-info-block .work-experience-title
{
    margin-top: 0px;
    color: #353535;
}

.resume-container.resume-10 .resume-user-info-block .resume-work-experience-block .resume-work-experience-item .title,
.resume-container.resume-10 .user-info-block-experience
{
    color: #353535;
}

.resume-container.resume-10 .resume-user-info-block .resume-work-experience-block .resume-work-experience-item .resume-work-experience-position {
    font-family: 'Rubik Italic', sans-serif;
}

.resume-container.resume-10 .resume-user-info-block {
    padding: 40px 40px 50px 0px;
}

.resume-container.resume-10 .resume-user-info-block .company-results-block {
    background-color: #E0E0E0;
}

.resume-container.resume-10 .resume-user-info-block .company-results-block .company-results-text,
.resume-container.resume-10 .resume-user-info-block .company-results-block ul
{
    color: rgba(18, 19, 15, 0.7);
}

.resume-container.resume-10 .resume-user-info-block .resume-work-experience-block .resume-work-experience-item .title {
    font-size: 24px;
}

.resume-container.resume-10 ul.point-list li {
    color: rgba(18, 19, 15, 0.7);
}

.resume-container.resume-10 .resume-user-info-block .resume-education-block .resume-education-item .title {
    color: #353535;
    text-transform: uppercase;
}

.resume-container.resume-10 .resume-user-info-block .resume-education-block .resume-education-item .resume-education-position {
    font-family: 'Rubik Italic', sans-serif;
}

.resume-container.resume-10 .resume-user-info-block .resume-education-block .resume-education-item .resume-education-date {
    color: #353535;
}

.resume-container.resume-10 .resume-education-block hr {
    margin: 10px 0px;
}

.resume-container.resume-10 .user-photo img {
    width: 362px;
    height: 362px;
    margin: 0 auto;
}

.resume-container.resume-10 .resume-user-contacts {
    padding: 0px;
    background-color: #fff;
    margin-top: 20px;
}

.resume-container.resume-10 .contacts-union {
    background-color: #333333;
    z-index: 2;
    position: relative;
    padding: 20px 30px;
    color: #fff;
}

.resume-container.resume-10 .user-photo-block::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 195px;
    background-color: #333333;
    top: 43%;
    left: 0;
    z-index: 1;
    margin-top: 20px;
}

.resume-container.resume-10 .user-photo-block {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.resume-container.resume-10 .user-photo {
    z-index: 2;
}

.resume-container.resume-10 .resume-user-contacts-title,
.resume-container.resume-10 .resume-user-work-experience-block h5,
.resume-container.resume-10 .resume-user-business-block h5,
.resume-container.resume-10 .resume-user-about-block h5,
.resume-container.resume-10 .resume-user-skills-block h5,
.resume-container.resume-10 .resume-user-qualities-block h5,
.resume-container.resume-10 .resume-user-language-block h5,
.resume-container.resume-10 .resume-user-advanced-training-block h5
{
    color: #fff;
    font-size: 24px;
    font-family: 'Rubik SemiBold', sans-serif;
    display: flex;
    gap: 10px;
    align-items: center;
}

.resume-container.resume-10 .resume-user-advanced-training-block h5 {
    align-items: flex-start;
}

.resume-container.resume-10 .resume-user-contacts h5 {
    color: #fff;
}

.resume-container.resume-10 .resume-user-contacts-phone,
.resume-container.resume-10 .resume-user-contacts-email
{
    color: var(--white-color-80);
}

.resume-container.resume-10 .resume-user-contacts-socials-block .resume-user-contacts-social-item {
    color: var(--white-color-80);
}

.resume-container.resume-10 .resume-user-work-experience,
.resume-container.resume-10 .resume-user-business
{
    color: var(--white-color-80);
    margin-top: 15px;
}

.resume-container.resume-10 .resume-user-work-experience-block,
.resume-container.resume-10 .resume-user-business-block,
.resume-container.resume-10 .resume-user-skills-block,
.resume-container.resume-10 .resume-user-qualities-block,
.resume-container.resume-10 .resume-user-language-block,
.resume-container.resume-10 .resume-user-advanced-training-block {
    margin-top: 40px;
}

.resume-container.resume-10 .resume-user-about-item span:first-child,
.resume-container.resume-10 .resume-user-language-item span:first-child {
    color: var(--white-color-80);
}

.resume-container.resume-10 .resume-user-about-item span:last-child,
.resume-container.resume-10 .resume-user-language-item span:last-child {
    color: #fff;
}

.resume-container.resume-10 ul.point-list {
    margin: 0px;
}

.resume-container.resume-10 .resume-user-contacts ul.point-list li {
    color: var(--white-color-80);
}

.resume-container.resume-11 .accompanying-text-resume {
    background-color: #3B2432;
    border-radius: 20px;
}

.resume-container.resume-11 .accompanying-text-resume .title {
    color: #fff;
}

.resume-container.resume-11 .accompanying-text-resume .text {
    color: var(--white-color-80);
}

.resume-container.resume-11 .accompanying-text-resume a {
    color: #EABBB6;
}

.resume-container.resume-11 .resume-main-body {
    flex-direction: column;
    padding: 50px 40px;
    background-color: #1E1F21;
}

.resume-container.resume-11 .user-name-block .user-name {
    color: #D3AAC4;
    font-size: 56px;
    font-family: 'Rubik SemiBold', sans-serif;
    line-height: 60px;

}

.resume-container.resume-11 .user-name-block .user-position {
    font-size: 24px;
    font-family: 'Rubik Medium', sans-serif;
    color: #EABBB6;
    margin-top: 15px;
}

.resume-container.resume-11 .user-name-block .user-address {
    font-size: 18px;
    font-family: 'Rubik Regular', sans-serif;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 15px;
}

.resume-container.resume-11 .resume-main-body-block {
    margin-top: 40px;
    display: flex;
}

.resume-container.resume-11 .resume-user-contacts {
    background-color: unset;
    padding: 50px 0px 50px 0px;
    width: 33%;
}

.resume-container.resume-11 .user-photo img {
    width: 180px;
    height: 180px;
}

.resume-container.resume-11 .contacts-union {
    margin-top: 30px;
    color: #fff;
}

.resume-container.resume-11 .resume-user-contacts h5 {
    color: #fff;
}

.resume-container.resume-11 .resume-user-contacts-title,
.resume-container.resume-11 .resume-user-work-experience-block h5,
.resume-container.resume-11 .resume-user-business-block h5,
.resume-container.resume-11 .resume-user-about-block h5,
.resume-container.resume-11 .resume-user-skills-block h5,
.resume-container.resume-11 .resume-user-qualities-block h5,
.resume-container.resume-11 .resume-user-language-block h5,
.resume-container.resume-11 .resume-user-advanced-training-block h5
{
    color: #EABBB6;
    font-size: 24px;
    font-family: 'Rubik Medium', sans-serif;
    display: flex;
    gap: 10px;
    align-items: center;
}

.resume-container.resume-11 .resume-user-contacts-phone,
.resume-container.resume-11 .resume-user-contacts-email
{
    color: var(--white-color-80);
}

.resume-container.resume-11 .resume-user-contacts-socials-block .resume-user-contacts-social-item {
    color: var(--white-color-80);
}

.resume-container.resume-11 .resume-user-work-experience,
.resume-container.resume-11 .resume-user-business
{
    color: var(--white-color-80);
    margin-top: 15px;
}

.resume-container.resume-11 .resume-user-work-experience-block,
.resume-container.resume-11 .resume-user-business-block,
.resume-container.resume-11 .resume-user-skills-block,
.resume-container.resume-11 .resume-user-qualities-block,
.resume-container.resume-11 .resume-user-language-block,
.resume-container.resume-11 .resume-user-advanced-training-block {
    margin-top: 40px;
}

.resume-container.resume-11 .resume-user-about-item span:first-child,
.resume-container.resume-11 .resume-user-language-item span:first-child {
    color: var(--white-color-80);
}

.resume-container.resume-11 .resume-user-about-item span:last-child,
.resume-container.resume-11 .resume-user-language-item span:last-child {
    color: #fff;
}

.resume-container.resume-11 ul.point-list {
    margin: 0px;
}

.resume-container.resume-11 ul.point-list li {
    color: var(--white-color-80);
}

.resume-container.resume-11 .user-info-block-about,
.resume-container.resume-11 .resume-work-experience-block-item,
.resume-container.resume-11 .resume-education-item
{
    border-radius: 20px;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.resume-container.resume-11 .resume-work-experience-block-item
{
    margin-bottom: 20px;
}

.resume-container.resume-11 .resume-user-info-block {
    padding: 0px 0px 0px 40px;
}

.resume-container.resume-11 .user-info-block-about h3,
.resume-container.resume-11 .work-experience-title,
.resume-container.resume-11 .education-title
{
    color: #EABBB6;
    font-size: 24px;
}

.resume-container.resume-11 .text {
    color: var(--white-color-80);
}

.resume-container.resume-11 .resume-main-body-block a {
    color: #EABBB6;
}

.resume-container.resume-11 .resume-user-info-block .resume-work-experience-block {
    margin-top: 0px;
}

.resume-container.resume-11 .resume-user-info-block .resume-work-experience-block .title {
    margin-top: 0px;
    color: #D3AAC4;
}

.resume-container.resume-11 .resume-user-info-block .resume-work-experience-block .resume-work-experience-position {
    font-family: 'Rubik Italic', sans-serif;
    color: rgba(255, 255, 255, 0.6);
}

.resume-container.resume-11 .resume-user-info-block .resume-work-experience-block .resume-work-experience-time {
    color: rgba(255, 255, 255, 0.6);
}

.resume-container.resume-11 .resume-user-info-block .resume-work-experience-block .resume-work-experience-dates,
.resume-container.resume-11 .resume-user-info-block .tasks-title
{
    color: #fff;
}

.resume-container.resume-11 .resume-user-info-block .company-results-block
{
    background-color: #3B2432;
}

.resume-container.resume-11 .resume-user-info-block .company-results-block .company-results-title
{
    color: #fff;
}

.resume-container.resume-11 .resume-user-info-block .company-results-block .company-results-text,
.resume-container.resume-11 .resume-user-info-block ul.point-list
{
    color: var(--white-color-80);
}

.resume-container.resume-11 .resume-user-info-block .resume-education-block .resume-education-item .title,
.resume-container.resume-11 .resume-user-info-block .resume-education-block .resume-education-item .resume-education-date
{
    color: #D3AAC4;
}

.resume-container.resume-11 .resume-user-info-block .resume-education-block .resume-education-item .resume-education-position {
    color: var(--white-color-80);
}

.resume-container.resume-11 .resume-user-skills-item, .resume-container.resume-11 .resume-user-quality-item {
    color: var(--white-color-80);
    padding: 8px 12px;
    border: 1px solid var(--white-color-80);
    border-radius: 15px;
    background-color: unset;
    font-size: 15px;
}

.personal-cab-block .specialist-block.first-block img {
    max-width: 402px;
}

.personal-cab-2 {
    max-width: 355px;
}

.personal-cab-4 {
    max-width: 390px;
}

.personal-cab-3 {
    max-width: 250px;
}

.personal-cab-block .specialist-block.fourth-block {
    min-height: 200px;
}

.personal-cab-block .specialist-block .specialist-block-title {
    font-size: 20px;
    font-family: 'Rubik SemiBold', sans-serif;
    align-items: flex-start;
    display: flex;
    line-height: 24px;
}

.personal-cab-block .specialist-block.fourth-block .small-text {
    width: 235px;
}

.recomendators-specialists-block .specialist-block {
    border-radius: 20px;
    padding: 20px;
}

.recomendators-specialists-block .small-img {
    margin-right: 10px;
}

.personal-cab-block .recomendators-specialists-block {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    margin-top: 50px;
}

.recomendators-block .btn {
    margin-top: 30px;
}

.unites-companies-rec {
    padding-bottom: 30px;
}

.we-get-all-specialists-text {
    margin-top: 20px;
}

.span-gray-back {
    background-color: #FFFFFF1F;
    border-radius: 50px;
    padding: 0px 15px;
}

.who-can-recommend-main .resume-constructor-possibilities-block .text-block {
    margin-left: 40px;
}

.resume-constructor-online {
    border-radius: 50px;
    padding-bottom: 50px;
    overflow: hidden;
}

.vacancy-block .vacancy-additional-info img {
    width: 32px;
}

.lk-table-pagination .load-more-btn {
    display: none;
}

.ql-toolbar.ql-snow .ql-formats {
    margin-right: 0px;
}

.personal-page .header-search-input {
    background-color: var(--light-gray-color);
}

.header-profile-link {
    display: flex;
    gap: 10px;
    align-items: center;
    color: #90939C;
}

.header-profile-link img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.resume-container {
    max-width: 1125px;
    width: 1125px;
    display: flex;
}

.resume-container.resume-1 .resume-user-contacts {
    width: 360px;
    min-width: 360px;
}

.resume-container.resume-2 .resume-user-contacts {
    width: 400px;
    min-width: 400px;
}

.resume-container.resume-3 .left-side-block {
    width: 360px;
    min-width: 360px;
}

.resume-container.resume-1,
.resume-container.resume-2,
.resume-container.resume-3,
.resume-container.resume-4,
.resume-container.resume-5,
.resume-container.resume-6,
.resume-container.resume-7,
.resume-container.resume-8,
.resume-container.resume-9,
.resume-container.resume-10,
.resume-container.resume-11
{
    display: block;
}

.resume-3 .resume-main-body {
    border-radius: 0px;
}

.resume-3 .resume-user-business,
.resume-3 .resume-user-work-experience
{
    margin-top: 15px;
}

.resume-3 .resume-user-qualities-block
{
    gap: 0px;
}

.resume-4 .resume-user-work-experience,
.resume-4 .resume-user-business
{
    margin-top: 15px;
}

.resume-container.resume-4 .right-side-block .resume-user-about-block h5
{
    margin-bottom: 10px;
}

.resume-container.resume-5 .resume-user-contacts,
.resume-container.resume-5 .resume-main-body .user-photo-block {
    width: 380px;
    min-width: 380px;
}

.resume-container.resume-6 .resume-user-work-experience,
.resume-container.resume-6 .resume-user-business
{
    margin-top: 15px;
}

.resume-container.resume-6 .resume-user-business
{
    margin-top: 15px;
}

.resume-container.resume-8 .user-photo-block .user-photo,
.resume-container.resume-8 .resume-user-contacts
{
    width: 390px;
}

.resume-container.resume-9 .resume-user-contacts {
    width: 369px;
}

.resume-container.resume-9 .resume-side-background {
    width: 380px;
}

.resume-container.resume-9 .resume-main-body .user-photo-block {
    width: 875px;
}

.resume-container.resume-10 .contacts-union {
    width: 360px;
    min-width: 360px;
}

.resume-container.resume-11 .resume-user-contacts {
    width: 320px;
    min-width: 320px;
}



@media screen and (min-width: 1280px) {
    .small-container, .extra-small-container {
        margin: 0 auto;
    }

    .personal-container {
        margin-bottom: 50px;
    }
}

@media (max-width: 1800px) {
    .recomendators-footer {
        overflow: hidden;
    }

    .personal-cab-2 {
        max-width: 315px;
    }
}

@media (max-width: 1400px) {
    body {
        font-size: 14px;
    }

    .make-resume-block {
        overflow: hidden;
        padding: 30px;
        padding-bottom: 70px;
    }

    .resume-constructor-block-main .main-img {
        position: absolute;
        right: 0%;
        width: 100%;
        height: auto;
        transform: scale(1.1);
        bottom: 0px;
        top: 0px;
    }

    .main-img {
        height: 560px;
    }

    .big-text {
        font-size: 29px;
    }

    .f-s-15 {
        font-size: 13px;
    }

    header .logo, .header-mobile-menu-block-top .logo{
        max-width: 100px;
    }

    header .logo img {
        width: 100%;
    }

    .header-search-input {
        padding: 7px 12px 7px 40px;
    }

    .search-input-container::before {
        top: 45%;
    }

    .search-input-container {
        width: 170px;
    }

    .vacancies-list-search-container .search-input-container {
        width: 100%;
    }

    .arrow-down::after {
        width: 15px;
        height: 15px;
    }

    .arrow-right-circle img {
        margin-right: 3px;
    }

    .pd-8-16 {
        padding: 7px 16px;
    }

    header.desktop-header .blue-btn {
        padding: 7px 24px;

    }

    header.desktop-header {
        padding: 15px 18px;
    }

    .small-container, .extra-small-container {
        padding: 15px 15px;
    }

    hr {
        margin: 30px 0px;
    }

    .f-s-54 {
        font-size: 34px;
        line-height: 36px;
    }

    .vacancy-block .vacancy-rating {
        padding: 10px;
    }

    .vacancy-block {
        padding: 15px;
    }

    .vacancy-block .partner-block {
        gap: 10px;
    }

    .vacancy-block .partner-block .partner-icon {
        width: 120px;
    }

    .vacancy-block .award {
        font-size: 12px;
        text-align: center;
    }

    .f-s-20 {
        font-size: 14px;
    }

    .vacancy-block .vacancy-name {
        font-size: 18px;
    }

    .lk-vacancies-block .vacancy-block .vacancy-name {
        font-size: 20px;
    }

    .vacancy-block .vacancy-point {
        font-size: 14px;
    }

    .company-point {
        font-size: 14px;
    }

    .vacancy-block .vacancy-additional-info {
        font-size: 12px;
        line-height: 14px;
        padding: 10px 16px;
    }

    .vacancy-block .vacancy-buttons .btn, .vacancy-block .vacancy-buttons .blue-btn {
        font-size: 12px;
        padding: 10px 20px 10px 20px;
    }

    .lk-vacancies-block .vacancy-block .vacancy-buttons .btn, .lk-vacancies-block .vacancy-block .vacancy-buttons .blue-btn {
        font-size: 12px;
        padding: 10px 25px 10px 25px;
    }

    .vacancy-block .vacancy-recommend {
        padding: 10px;
    }

    .vacancy-block .vacancy-respond {
        padding: 10px 20px 10px 20px;
    }

    ul.arrow-bordered-list li {
        padding: 7px 10px 7px 40px;
        font-size: 13px;
    }

    .f-s-32 {
        font-size: 26px;
    }

    .how-works-block .first, .how-works-block .second {
        font-size: 20px;
        line-height: 22px;
        padding: 15px 30px;
    }

    .timeline-list {
        margin-top: 20px;
    }

    .we-get-candidates-steps .need-from-you , .we-get-candidates-steps .we-get{
        padding: 20px 15px;
        overflow: hidden;
    }

    .timeline-list li {
        font-size: 14px;
        padding-bottom: 15px;
    }

    .timeline-list li::before {
        top: 2px;
    }

    .timeline-list li::after {
        top: 18px;
    }

    .how-works .how-works-items {
        font-size: 32px;
    }

    h2 {
        font-size: 42px;
        line-height: 40px;
    }

    .l-h-26 {
        line-height: 18px;
    }

    .f-s-18 {
        font-size: 15px;
    }

    .row.mg-t-40 .who-finds-block {
        padding: 15px;
    }

    .who-finds-block-title {
        line-height: 22px;
    }

    .f-s-16 {
        font-size: 14px;
    }

    ul.checked-list li, ul.checked-list li span {
        font-size: 14px;
        line-height: 16px;
    }

    ul.checked-list {
        margin-top: 20px;
    }

    .who-finds {
        padding: 20px 10px;
    }

    .specialist-block .marketolog-block-image, .specialist-block .marketolog-block-image img {
        width: 100%;
    }

    .specialist-block {
        padding: 15px 10px;
        line-height: 14px;
    }

    .specialist-block .small-text {
        margin-top: 15px;
    }

    .best-candidates-block {
        margin: 15px 0px;
    }

    .best-candidates-block p {
        margin-top: 5px;
    }

    .best-candidates-block img {
        height: 90px;
        transform: scale(1.2);
        bottom: -5px;
        position: relative;
        margin-top: 10px;
    }

    .white-link {
        font-size: 16px;
    }

    /*.arrow-right-circle:after {
        width: 24px;
        height: 24px;
    }*/

    .our-site-description img {
        max-height: 36px;
    }

    .unites-companies .main-img {
        height: 480px;
        top: -23%;
    }

    .unites-companies {
        padding-bottom: 25px;
    }

    .vacancies-main-block {
        padding-bottom: 25px;
    }

    .handshake-img {
        max-height: 36px;
    }

    .mg-t-20 {
        margin-top: 15px;
    }

    .mg-t-40 {
        margin-top: 30px;
    }

    .blue-arrow:before {
        width: 16px;
        height: 16px;
        top: 0px;
    }

    .time-to-pay-block .company-logo {
        max-width: 90px;
    }

    .all-you-want-from-hire {
        padding: 30px 5px;
    }

    .all-you-want-block {
        padding: 15px 10px 15px 45px;
    }

    .all-you-want-block:before {
        top: 25px;
        left: 38px;
    }

    .recruters-title {
        font-size: 36px;
        line-height: 36px;
    }

    .how-its-work {
        padding: 30px 0px;
        padding-bottom: 0px;
    }

    .how-its-work-title {
        font-size: 46px;
        line-height: 40px;
    }

    .how-its-work-description {
        margin-top:20px
    }

    .how-its-work-step .how-its-work-step-title {
        font-size: 16px;
        line-height: 18px;
    }

    .how-its-work-step .how-its-work-step-description {
        font-size: 14px;
    }

    .economy-with-us {
        max-height: 150px;
        padding: 15px;
    }

    .economy-with-us::after {
        width: 350px;
        height: 260px;
    }

    .white-btn {
        padding: 10px 20px;
    }

    .f-s-24 {
        font-size: 22px;
    }

    .ready-to-hire-text-block-title {
        font-size: 46px;
        line-height: 42px;
    }

    .ready-to-hire-buttons .white-btn, .ready-to-hire-buttons .btn {
        font-size: 14px;
    }

    .ready-to-hire {
        padding:20px;
    }

    .gap-20 {
        gap: 10px;
    }

    .how-its-work-step.right-side-step.last-step::before {
        right: 0px;
    }

    .how-its-work-step.last-step-at-all::before {
        right: 0px;
    }

    .breadcrumbs-wrapper {
        padding: 20px 20px;
    }

    .recommend-block {
        padding: 10px;
    }

    .blog-item-img img {
        width: 100%;
    }

    .ready-to-hire.ready-to-hire-text-block-small .ready-to-hire-img img {
        left: -110px;
    }

    .recommend-vacancies .recommend-vacancy .recommend-vacancy-award {
        padding: 12px 10px;
    }

    .blog-detail-card-body h1 {
        font-size: 38px;
    }

    .need-from-you-wrapper:after {
        display: none;
    }

    .resume-construct-image img {
        width: 100%;
    }

    .personal-cab-block .specialist-block.first-block img, .personal-cab-block .specialist-block.fourth-block img, .personal-cab-block .specialist-block.fifth-block img {
        width: 100%;
    }

    .personal-cab-block .specialist-block.fourth-block img {
        height: 100px;
        width: 180px;
    }

    .one-result-block-main-img img {
        width: 100%;
    }

    .recomendators-footer .footer-bg {
        transform: scale(1);
    }

    .recomendators-footer-text {
        font-size: 40px;
        line-height: 44px;
        bottom: 33%;
    }

    .recomendators-footer-point.first-point {
        width: 275px;
        left: 10%;
    }

    .recomendators-footer-point.second-point {
        width: 260px;
        right: 41%;
    }

    .recomendators-footer-point.third-point {
        left: 61%;
        width: 180px;
    }

    .recomendators-footer-point {
        font-size: 20px;
    }

    .ref-recruting-transforms-text img {
        width: 35px;
    }

    .ref-recruting-transforms-text {
        line-height: 44px;
    }

    .personal-cab-block {
        padding: 40px 0px;
    }

    .personal-cab-block-title {
        font-size: 48px;
        line-height: 52px;
        width: 100%;
    }

    .personal-cab-block-text {
        margin-top: 30px;
    }

    .personal-cab-block .specialist-block.first-block, .personal-cab-block .specialist-block.fifth-block {
        min-height: 300px;
    }

    .tool-point img {
        width: 250px;
        height: 230px;
        bottom: -75px;
        right: -50px;
    }

    .vacancies-list-main-block .main-img {
        height: 280px;
        top: 8%;
    }

    .catalog-main-block .vacancies-list-main-block-title {
        font-size: 36px;
        line-height: 36px;
    }

    .catalog-main-block .ref-recrut {
        font-size: 18px;
    }

    .catalog-main-block .main-img {
        height: auto;
        bottom: -65px;
        top: unset;
        width: 780px;
        right: -190px;
    }

    .all-companies .main-img {
        position: absolute;
        top: -235px;
        width: 700px;
        height: auto;
        right: 40px;
    }

    .personal-container {
        margin: 0 auto;
        margin-bottom: 50px;
    }

    .lk-vacancies-block .vacancy-block .vacancy-recommend {
        padding: 10px 25px;
    }

    .lk-resume-btn {
        width: 40px;
        height: 40px;
    }

    .lk-resume-footer .lk-resume-footer-right {
        gap: 5px;
    }


    .search-input-container .search-result.active {
        width: 270px;
    }

    .all-you-want-from-hire .title {
        width: 600px;
    }

    .one-result-block-main-img img {
        transform: translate(-52%, -52%);
    }

    .personal-cab-block .specialist-block.first-block img {
        max-width: 320px;
    }

    .personal-cab-4 {
        max-width: 330px;
    }

    .time-to-pay-block.earn-block .white-half-opacity {
        font-size: 18px;
        line-height: 22px;
    }

}

@media (max-width: 1200px) {
    .catalog-footer-block .recommend-small-block {
        height: 600px;
    }

    .company-benefits .company-benefit {
        margin-bottom: 20px;
    }

    .catalog-main-block {
        padding: 0px 20px;
    }

    .user-socials-item img, .user-socials-items.owl-carousel .owl-item img{
        width: 28px;
        height: 28px;
    }

    .user-socials-items .col-sm-12 {
        padding: 0px;
    }

    .lk-profile-menu-block {
        padding: 30px 15px;
    }

    .lk-profile-menu-title {
        font-size: 21px;
    }

    .one-result-block-text-block {
        margin-top: 20px;
    }

}

@media (max-width: 992px) {

    .recommend-vacancies {
        margin-top: 40px;
        padding: 15px;
    }

    .catalog-footer-block .boxshadow-img {
        bottom: -110px;
    }

    .catalog-footer-block .recommend-small-block {
        padding: 22px;
        height: 555px;
    }

    .catalog-footer-block .recommend-small-title {
        font-size: 26px;
        line-height: 26px;
    }

    .catalog-footer-block .recommend-small-block .recommend-small-text {
        font-size: 16px;
        line-height: 18px;
    }

    .posting-offers-block {
        padding: 20px;
    }

    .posting-offers-block .title {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .posting-offers-block .text {
        font-size: 14px;
    }

    .resume-construct-title {
        font-size: 36px;
        line-height: 40px;
    }

    .recomendators-footer-text {
        font-size: 36px;
        line-height: 38px;
    }

    .resume-constructor-block-main .resume-constructor-tab {
        font-size: 16px;
    }

    .resume-constructor-block-main h1 {
        font-size: 30px;
        width: 100%;
    }

    .resume-constructor-possibilities-blocks-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 колонки на планшетах */
    }

    .resume-constructor-possibilities-blocks-grid .resume-constructor-possibilities-block.big-block {
        grid-row: span 1;
    }

    .vacancy-detail-card-body h1 {
        font-size: 24px;
        margin-top: 0px;
    }

    .vacancy-recommendations {
        flex-direction: column;
        gap: 10px;
    }

    .vacancy-detail-card-body {
        margin-bottom: 20px;
    }

    .vacancy-detail-card {
        gap: 20px;
        flex-direction: column-reverse;

    }

    .we-get:after {
        right: -13%;
    }

    .we-get:before {
        bottom: -5%;
        right: 0%;
    }

    .main-img {
        height: 410px;
        top: -7%;
    }

    .vacancy-recommend img {
        width: 18px;
    }

    .vacancies-list-filter-top .text {
        font-size: 16px;
    }

    .price-input {
        padding: 10px 7px;
        font-size: 11px;
    }

    .filter-group .title {
        font-size: 16px;
    }

    .filter-group .checkbox-text {
        font-size: 16px;
    }

    .filter-group .checkbox-container .count, .filter-group .radio-container .count {
        font-size: 16px;
    }

    .filter-result-block {
        flex-direction: column;
        gap: 15px;
    }

    .filter-tooltip {
        text-align: center;
    }

    .filter-tooltip::before {
        content: '';
        position: absolute;
        top: -20px; /* Выезжает за пределы блока сверху */
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 20px solid var(--semi-black-color); /* Цвет как у блока */
    }

    .vacancies-list-main-block-title {
        font-size: 46px;
        line-height: 48px;
    }

    .vacancies-list-main-block .main-img {
        height: 235px;
        top: 18%;
    }

    .catalog-main-block .main-img {
        top: unset;
        width: 460px;
        height: auto;
        bottom: -20px;
        position: relative;
        right: -215px;
    }

    .vacancies-list-main-block-text {
        width: 100%;
    }

    .company-card-main-block .ready-to-hire.ready-to-hire-text-block-small {
        padding: 15px;
        padding-bottom: 0px;
    }

    .company-card-main-block .ready-to-hire.ready-to-hire-text-block-small .ready-to-hire-buttons .white-btn {
        padding: 7px 12px;
        font-size: 12px;
        width: 100%;
    }

    .all-companies .main-img {
        position: absolute;
        top: -140px;
        width: 500px;
        height: auto;
        right: 40px;
    }

    .lk-resume-header {
        align-items: center;
        margin-top: 15px;
    }

    .lk-add-resume-mobile {
        width: 100%;
    }

    .lk-my-resume-block {
        gap: 20px;
    }

    .mobile-personal-header {
        display: flex;
        gap: 20px;
        align-items: center;
    }

    .mobile-personal-header .title {
        font-size: 36px;
        font-family: 'Rubik Medium', sans-serif;
        color: var(--semi-black-color);
    }

    .vacancy-edit {
        padding: 10px;
    }

    .about-img {
        margin-bottom: 30px;
    }

    .time-to-pay-block.earn-block .white-half-opacity {
        font-size: 16px;
        line-height: 20px;
    }

    .who-can-recommend-main .resume-constructor-possibilities-blocks-grid .resume-constructor-possibilities-block.violet:after {
        width: 120px;
        height: 100px;
    }

    .personal-cab-block .specialist-block .specialist-block-title {
        font-size: 18px;
        line-height: 20px;
    }

    .recomendators-specialists-block .specialist-block {
        padding: 12px;
    }

    .personal-cab-block .specialist-block {
        overflow: unset;
    }

    .personal-cab-block .specialist-block.fourth-block .small-text {
        width: auto;
    }

    .personal-cab-block .specialist-block.fourth-block img {
        width: 150px;
    }

    .recomendators-footer-text {
        font-size: 30px;
        line-height: 32px;
        text-align: left;
        padding: 0px;
        position: relative;
        z-index: 10;
        top: unset;
        bottom: unset;
        right: unset;
        left: unset;
        transform: unset;
        width: 380px;
    }


    .recomendators-footer-point span {
        line-height: 26px;
        font-size: 18px;
    }

    .recomendators-footer-point img {
        margin-top: 5px;
    }

    .recomendators-footer-point-image-1, .recomendators-footer-point-image-2, .recomendators-footer-point-image-3 {
        position: absolute;
        z-index: 10;
    }

    .recomendators-footer-point-image-1 {
        left: 0%;
        bottom: 10%;
    }

    .recomendators-footer-point-image-2 {
        top: 5%;
        right: 5%;
    }

    .recomendators-footer-point-image-3 {
        right: 0%;
        top: 16%;
    }

    .recomendators-footer-point.first-point,
    .recomendators-footer-point.second-point,
    .recomendators-footer-point.third-point
    {
        border-radius: 24px;
        border-top-left-radius: 0px;
        padding: 20px;
        padding-left: 30px;
        z-index: 10;
        position: relative;
        left: unset;
        right: unset;
        top: unset;
        bottom: unset;
        width: 380px;
        margin-bottom: 20px;
    }

    .recomendators-footer {
        overflow: hidden;
        position: relative;
        height: 750px;
        display: flex;
        flex-direction: column;
        padding-top: 130px;
        align-items: center;
    }

    .recomendators-footer .footer-bg {
        position: absolute;
        top: -22%;
        z-index: 1;
        height: 1000px;
    }

    .lk-profile-menu-block {
        padding: 30px 8px;
    }

    .lk-profile-menu-item {
        padding: 10px;
    }
}

@media (max-width: 768px) {

    .one-result-block .violet-back {
        line-height: 38px;
    }

    .how-its-work .small-container {
        padding: 40px 0px;
    }

    .how-its-work .how-its-work-description {
        width: 100%;
        font-size: 16px;
    }

    .specialist-block-main {
        display: grid;
        grid-template-columns: 1fr;
        gap: 15px;
        margin: 0px;
        margin-top: 20px;
    }

    /* Сбрасываем все кастомные позиции */
    .specialist-block-main .specialist-block {
        grid-row: auto !important;
        grid-column: auto !important;
    }

    .resume-constructor-possibilities-blocks-grid {
        grid-template-columns: 1fr; /* 1 колонка на мобильных */
        gap: 20px;
    }

    .resume-constructor-possibilities-blocks-grid .big-block {
        grid-row: span 1; /* На мобильных возвращаем к обычному размеру */
    }

    .recommend-vacancies-main h3 {
        font-size: 24px;
    }

    .recommend-vacancies-main .recommend-vacancies-main-block {
        margin-top: 20px;
        gap: 20px;
    }

    .recommend-block-outer {
        display: flex;
        flex-direction: column;
    }

    .recommend-block-img {
        margin-top: 20px;
    }

    .recommend-block-inner .sub-text {
        font-size: 16px;
    }

    .referal-recruting {
        padding: 5px;
    }

    .referal-recruting .small-star {
        width: 30px;
    }

    .breadcrumbs-wrapper {
        padding: 16px 10px;
    }

    .breadcrumb-home,
    .breadcrumb-link,
    .breadcrumb-current {
        font-size: 12px;
        margin-right: 5px;
    }

    .breadcrumb-separator {
        width: 14px;
        height: 14px;
        margin: 0 6px;
        margin-right: 15px;
    }

    .breadcrumb-separator::before {
        width: 10px;
        height: 10px;
    }

    .who-find-img, .who-find-img img {
        width: 100%;
    }

    .marketolog-block-image, .marketolog-block-image img {
        width: 100%;
    }

    .need-from-you-wrapper:before, .need-from-you-wrapper:after {
        width: 100vw;
        right: 0%;
    }

    .how-works-block .first:after {
        width: 160px;
    }

    .how-works-block .second:after {
        width: 130px;
    }

    .desktop-header {
        display: none;
    }

    .small-container {
        margin: 0px 15px;
    }

    .ref-recrut {
        font-size: 16px;
    }

    .big-text {
        font-size: 32px;
    }

    .mg-t-40 {
        margin-top: 30px;
    }

    .small-container, .extra-small-container {
        max-width: 720px;
        margin: 0px 20px;
        width: auto;
        padding: 0px;
    }

    .btns-vertical-container {
        display: flex;
        flex-direction: column;
    }

    .btns-vertical-container .blue-btn, .btns-vertical-container .casual-btn{
        width: 100%;
        padding: 12px 24px;
    }

    .site-container {
        margin: 0px;
        width: auto;
    }

    .main-img {
        max-width: 325px;
        margin: 0 auto;
        position: unset;
        height: auto;
        width: 100%;
        transform: scale(1.3);
        margin-top: 30px;
    }

    .p-b-50 {
        padding-bottom: 30px;
    }

    .main-container {
        border-radius: 20px;
        margin-top: 5px;
    }

    .header-container {
        border-radius: 20px;
        margin-top: 5px;
        margin-left: 5px;
        margin-right: 5px;
    }

    .small-features .recommend-block{
        margin-bottom: 20px;
    }

    .small-features {
        margin-top: 60px;
    }

    .recommend-block {
        padding: 25px;
    }

    .arrow-right-circle img {
        margin-right: 10px;
    }

    .f-s-20 {
        font-size: 18px;
    }

    .partners-slider {
        margin-top: 40px;
    }

    .candidates-image {
        height: 36px;
    }

    .recommends {
        padding: 0px 10px;
    }

    .f-s-54 {
        font-size: 32px;
    }

    .best-candidates-block {
        margin: 0px;
        margin-top: 40px;
        padding-top: 20px;
    }

    .best-candidates-block .img {
        display: flex;
        justify-content: flex-end;
    }

    .who-finds {
        padding: 40px 0px;
    }

    h2 {
        font-size: 40px;
    }

    .who-finds-block {
        padding-bottom: 0px;
        line-height: 30px;
    }

    .who-finds-block .who-finds-block-title {
        font-size: 24px;
        line-height: 26px;
    }

    .who-finds .row.mg-t-40 > .col-md-4 {
        display: block;
    }

    .who-finds .row.mg-t-40 {
        gap: 20px;
    }

    .darkblue-btn {
        justify-content: space-around;
        width: 100%;
        font-size: 14px;
    }

    .who-finds-block {
        padding: 0px;
        padding-top: 32px;
        line-height: 25px;
    }

    .who-finds-block ul {
        margin-top: 20px;
    }

    .who-finds-block div, .who-finds-block ul {
        padding-left: 10px;
        padding-right: 10px;
        line-height: 18px;
    }
    .who-finds-block ul.checked-list {
        margin-top: 20px;
    }

    .we-got-solution {
        font-size: 18px;
    }

    .how-works .how-works-items {
        font-size: 20px;
        padding: 2px 18px;
        line-height: 30px;
    }

    .how-works {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 15px;
    }

    .how-works-block .first, .how-works-block .second {
        font-size: 22px;
        overflow: hidden;
    }

    .how-works-block .first:after {
        background-image: url(../img/how_work1-mobile.png);
        right: -9%;
    }

    .how-works-block .second:after {
        background-image: url(../img/how_work2-mobile.png);
        right: -4%;
        top: 2%;
    }

    .how-works-blocks .with-image {
        flex-direction: column;
    }

    .how-works-blocks {
        gap: 20px;
    }

    .routine-block {
        line-height: 40px;
        margin: 0px 5px;
        margin-top: 40px;
    }

    .routine-block .mid-star {
        width: 40px;
    }

    .routine-block .row.align-items-stretch {
        flex-direction: column;
        gap: 20px;
    }

    .routine-block .block-1, .routine-block .block-2, .routine-block .block-3 {
        width: 100%;
    }

    ul.arrow-bordered-list li {
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: normal;
        line-height: 20px;
        width: fit-content;
        font-size: 15px;
    }

    .routine-block .we-get {
        padding-bottom: 215px;
    }

    .routine-block .we-get:after {
        right: 25%;
    }

    .routine-block .we-get:before {
        right: 15%;
    }

    .vacancy-block .partner-block {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 20px;
    }

    .vacancy-block .award {
        font-size: 12px;
        padding: 5px 10px;
        text-align: center;
        height: 32px;
    }

    .vacancy-block .award .f-s-20 {
        font-size: 16px;
    }

    .vacancy-block .partner-icon {
        width: 50%;
    }

    .vacancy-block .vacancy-name {
        line-height: 28px;
    }

    .vacancy-block .vacancy-additional-info {
        padding: 10px 12px;
        font-size: 14px;
        gap: 10px;
    }

    .vacancy-block .vacancy-additional-info img {
        width: 20px;
    }

    .hand-right {
        width: 20px;
    }

    .vacancy-block .vacancy-buttons {
        flex-direction: column;
    }

    .vacancy-block .vacancy-bottom {
        flex-direction: column;
    }

    .vacancy-block .vacancy-buttons .btn {
        width: 100%;
    }

    .vacancy-block .vacancy-recommend:before {
        left: 85px;
    }

    .vacancy-block .vacancy-rating {
        width: fit-content;
        margin-top: 10px;
    }

    .recommend-vacancies .all-vacancies-btn.d-md-none {
        margin-top: 20px;
    }

    footer .flex.justify-between, footer .flex.align-center {
        flex-direction: column;
    }

    .socials-footer {
        flex-direction: column;
        align-items: center;
        margin-top: 20px;
    }

    .footer-links {
        align-items: flex-start;
        margin-top: 20px;
    }

    .footer-link {
        text-align: left;
    }

    .who-finds-header {
        gap: 20px;
    }

    .header-main-mobile-block .blue-btn {
        padding: 5px 16px;
    }

    .header-main-mobile-block .logo img, .header-mobile-menu-block .logo img {
        max-width: 100px;
    }

    .header-main-mobile-block {
        display: flex;
        justify-content: space-between;
        margin-top: 30px;
        margin-bottom: 30px;
        padding: 0px 20px;
        align-items: center;
    }

    .header-main-mobile-block .right-side {
        display: flex;
        gap: 12px;
        align-items: center;
    }

    .mobile-menu-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
    }

    .mobile-menu-overlay.active {
        display: block;
    }

    .header-mobile-menu-block {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: #fff;
        z-index: 1000;
        flex-direction: column;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .header-mobile-menu-block.active {
        display: flex;
        padding: 0px 25px;
    }

    .header-mobile-menu-block-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 35px;
        margin-bottom: 30px;
        flex-shrink: 0;
    }

    .header-mobile-menu-block .right-side {
        display: flex;
        align-items: center;
    }

    .mobile-menu-content {
        flex: 1;
        overflow-y: auto;
        padding: 0px;
        margin-top: 30px;
    }

    .mobile-nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    body.menu-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
        height: 100%;
    }

    .header-mobile-menu-block,
    .mobile-menu-overlay {
        display: none ;
    }

    .mobile-menu {
        font-size: 15px;
    }

    .mobile-menu-link {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        color: #333;
        text-decoration: none;
        font-size: 16px;
        font-weight: 500;
        transition: all 0.3s ease;
    }

    /* Стили для подменю */
    .mobile-submenu {
        list-style: none;
        margin: 0;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        background-color: var(--light-grayv2-color);
        border-radius: 12px;
    }

    .mobile-submenu.active {
        max-height: 500px;
    }

    .mobile-submenu-link {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0px 12px 20px;
        text-decoration: none;
        transition: all 0.3s ease;
    }

    .submenu-toggle {
        transition: transform 0.3s ease;
    }

    .submenu-toggle.active img {
        transform: rotate(180deg);
    }

    /* Стили для иконки (опционально) */
    .submenu-toggle svg {
        width: 12px;
        height: 12px;
    }

    .header-mobile-menu-block .login-btn {
        padding: 12px 50px;
        margin-top: 40px;
        margin-bottom: 40px;
        width: fit-content;
    }

    .time-to-pay-block .company-block {
        flex-direction: row;
        padding: 24px;
        gap: 20px;
    }

    .time-to-pay-block .company-block .company-logo{
        max-width: 64px;
    }

    .time-to-pay-block {
        gap: 20px;
    }

    .time-to-pay-block-1 {
        padding-bottom: 50px;
    }

    .time-to-pay-block-1::before {
        border-radius: 20px;
        right: 0px;
    }

    .unites-companies .main-img {
        position: unset;
        height: auto;
        transform: scale(1.2);
        transform-origin: center center;
    }

    .ref-recrut-block .blue-btn {
        width: 100%;
    }

    .unites-companies {
        padding-bottom: 0px;
    }

    .vacancies-main-block {
        margin: 0px 5px;
    }

    .unites-companies .small-container {
        padding: 10px 0px;
    }

    .time-to-pay-block-2 {
        margin-left: 0px;
        margin-top: -50px;
        padding: 30px;
        padding-bottom: 80px;
    }

    .white-half-opacity {
        padding: 20px;
        padding-bottom: 50px;
    }

    .white-half-opacity::after {
        bottom: 0px;
        left: 30px;
    }

    .all-you-want-from-hire {
        padding: 20px 10px;
        z-index: 2;
        position: relative;
    }

    .all-you-want-from-hire .f-s-54 {
        font-size: 34px;
        line-height: 38px;
    }

    .all-you-want-blocks .row {
        gap: 15px;
    }

    .recruters-advantages {
        gap: 15px;
    }

    .recruters .recruters-title {
        font-size: 30px;
        text-align: left;
        line-height: 30px;
        align-items: flex-start;
        padding: 0px 15px;
    }

    .time-to-pay-block .company-block .company-block-text {
        width: 100%;
    }

    .recruters-subblock {
        padding: 70px 0px;
    }

    .recruters {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        background-position-y: -100px;
        justify-content: center;
        margin: 0 auto;
        text-align: center;
        margin-top: -20px;
    }

    .recruters-advantage .recruters-advantage-title {
        padding-right: 40px;
    }

    .how-its-work {
        padding: 30px 0px;
    }

    .how-its-work-steps {
        flex-direction: column;
        gap: 15px;
        margin-top: 15px;
    }

    .how-its-work-steps .how-its-work-step {
        width: 100%;
        padding: 20px;
    }

    .how-its-work-steps .how-its-work-step.first-step .blue-btn {
        margin-top: 30px;
    }

    .how-its-work-step.right-side-step::before {
        right: 0px;
        border-radius: 20px;
    }

    .how-its-work-step .blue-btn {
        width: 100%;
    }

    .how-its-work-title {
        font-size: 32px;
        line-height: 36px;
    }

    .how-its-work-description {
        margin-top: 20px;
    }

    .how-its-work-step .how-its-work-step-description {
        margin-bottom: 0px;
    }

    .how-its-work-step.last-step-at-all .how-its-work-step-description {
        width: 100%;
        padding-right: 40px;
    }
    .how-its-work-step.last-step-at-all::after {
        background-image: url(../img/hiw-last-step-mobile.png);
    }

    .how-its-work-step.last-step-at-all {
        padding-bottom: 150px;
    }

    .how-its-work-step.last-step-at-all::after {
        bottom: -14%;
        right: -22%;
        width: 100%;
        height: 220px;
    }

    .hiring-process-block-text {
        font-size: 32px;
    }

    .economy-with-us::after {
        bottom: -18%;
        right: 14%;
        width: 219px;
        height: 222px;
    }

    .economy-with-us {
        padding: 20px 10px;
        height: auto;
        max-height: unset;
        padding-bottom: 185px;
        margin: 10px 0px;
        margin-top: 15px;

    }

    .economy-with-us-text {
        font-size: 18px;
    }

    .economy-with-us .white-btn {
        margin-top: 20px;
        width: 100%;
        padding: 15px 60px;
    }

    .hiring-process-block .row {
        gap: 15px;
    }

    .flexible-bonus:after {
        right: 0%;
    }

    .security-and-safe {
        flex-direction: column-reverse;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .security-and-safe-text-block-text {
        font-size: 28px;
    }

    .security-and-safe-img {
        max-height: 450px;
    }

    .security-and-safe-img img.d-md-none {
        display: block;
        width: 100vw;
        position: relative;
        left: 0%;
        margin-left: -50vw;
        margin-right: -50vw;
        max-width: 100vw;
        height: auto;
        object-fit: cover;
    }

    .ready-to-hire {
        margin: 75px 0px;
        padding: 50px 10px;
    }

    .ready-to-hire-text-block-title {
        font-size: 32px;
        line-height: 36px;
    }

    .ready-to-hire-buttons {
        flex-direction: column;
    }

    .ready-to-hire-buttons a {
        width: 100%;
    }

    .ready-to-hire .ready-to-hire-img img {
        width: 100%;
        margin-top: 20px;
        position: relative;
        bottom: 0px;
    }

    .blog-header-block h1 {
        font-size: 32px;
    }

    .blog-header-block .blog-header-block-description {
        font-size: 16px;
        width: 100%;
    }

    .blog-sections .blog-section {
        padding: 8px 18px;
        font-size: 15px;
    }

    .blog-sections {
        justify-content: flex-start;
    }

    .blog-items .blog-item .blog-item-img img {
        width: 100%;
    }

    .mobile-navigation {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    .mobile-navigation .nav-item {
        border-radius: 12px;
        border: 1px solid var(--blue-color);
        padding: 12px 22px;
        color: var(--semi-black-color);
        display: flex;
        align-items: center;
        width: fit-content;
    }

    .pagination-container .load-more-btn {
        width: 100%;
    }

    .pagination-container {
        gap: 20px;
        flex-direction: column;
    }

    .ready-to-hire.ready-to-hire-text-block-small {
        padding: 20px;
        padding-bottom: 0px;
        margin: 40px 0px;
    }

    .ready-to-hire-text-block-small .ready-to-hire-text-block-title {
        font-size: 20px;
    }

    .ready-to-hire.ready-to-hire-text-block-small .ready-to-hire-text-block {
        width: 100%;
    }

    .ready-to-hire.ready-to-hire-text-block-small .ready-to-hire-buttons .white-btn {
        font-size: 15px;
    }

    .blog-detail-card-body h1 {
        font-size: 26px;
    }

    .blog-detail-card-body .author-block {
        flex-direction: column;
    }

    .blog-detail-card-body .share-btn {
        margin-top: 15px;
    }

    .advice {
        border-radius: 20px;
        padding: 20px;
    }

    .blog-detail-card-body h3 {
        font-size: 24px;
    }

    ol.numbered-list {
        padding-left: 25px;
    }

    .useful-info {
        padding: 20px;
    }

    .useful-info .useful-info-title {
        font-size: 18px;
    }

    .blog-detail-card-body .ready-to-hire-text-block-title {
        font-size: 20px;
    }

    .blog-detail-card-body .ready-to-hire-buttons .white-btn {
        font-size: 15px;
    }

    .blog-detail-card-body .ready-to-hire .ready-to-hire-img img {
        bottom: -6px;
        transform: scale(1.5);
    }

    .blog-detail-navigation .prev-nav {
        padding-left: 35px;
        padding-right: 15px;
    }

    .blog-detail-navigation .next-nav {
        padding-left: 15px;
        padding-right: 35px;
    }

    .form-input {
        height: 56px;
        font-size: 16px;
    }

    .floating-label {
        font-size: 16px;
    }

    .form-input:focus + .floating-label,
    .form-input:not(:placeholder-shown) + .floating-label {
        font-size: 12px;
    }

    .auth-block {
        width: 100%;
        max-width: unset;
        padding-top: 40px;
    }

    .auth-window {
        padding: 40px 20px;
    }

    .our-site {
        padding: 50px 0px;
        margin-top: 40px;
    }

    .our-site-description {
        text-align: left;
        font-size: 32px;
    }

    .best-hunter {
        text-align: left;
        font-size: 18px;
        margin-top: 30px;
    }

    .we-get-all-specialists {
        margin-top: 40px;
    }

    .we-get-all-specialists-title {
        line-height: 40px;
        width: 260px;
    }

    .specialist-block {
        padding: 20px 20px;
        line-height: 20px;
    }

    .you-get-block {
        gap: 10px;
        margin-top: 10px;
    }

    .row.mg-t-40 .who-finds-block {
        padding: 0px;
        padding-top: 15px;
    }

    .who-finds-block .who-find-img {
        position: relative;
    }

    .how-all-work {
        margin-top: 40px;
    }

    .how-all-work h2 {
        text-align: left;
        font-size: 32px;
    }

    .timeline-list {
        padding: 10px 5px;
    }

    .we-get-candidates-title {
        font-size: 32px;
    }

    .we-get-candidates-steps {
        flex-direction: column;
        gap: 20px;
    }

    .we-get {
        padding: 25px;
    }

    .routine-block {
        padding: 60px 0px;
    }

    .recommend-vacancies-main h2 {
        font-size: 32px;
        margin-top: 40px;
    }

    .recommend-vacancies-main .vacancy-block {
        padding: 25px 15px;
    }

    .recommend-vacancies-main {
        margin-bottom: 50px;
    }

    .recommend-vacancies-main .all-vacancies-btn{
        margin-top: 30px;
    }

    .valuations-text {
        font-family: 'Rubik Medium', sans-serif;
        font-size: 18px;
    }

    .vacancy-block .partner-block .partner-icon {
        width: 150px;
    }

    .hiring-process-block {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .security-and-safe-text-block {
        gap: 5px;
    }

    .ready-to-hire-buttons .white-btn, .ready-to-hire-buttons .btn {
        justify-content: space-around;
    }

    .about-us-block {
        padding-top: 40px;
    }

    .ready-to-hire.ready-to-hire-text-block-small .ready-to-hire-img img {
        left: -7%;
    }

    .blog-detail-card {
        padding-bottom: 40px;
    }

    .resume-constructor-block-main h1 {
        font-size: 32px;
    }

    .resume-constructor-block-main .resume-constructor-tab {
        font-size: 14px;
    }

    .resume-constructor-block-main .main-img {
        position: relative;
        transform: scale(1.05);
        padding-bottom: 20px;
        top: 0px;
        right: 0px;
        max-width: unset;
        margin-top: 0px;
    }

    .make-resume-block:before {
        transform: scale(1);
    }

    .resume-constructor-online {
        margin: 0px 5px;
        border-radius: 20px;
    }

    .resume-constructor-block-main-footer .resume-constructor-block-main-block span {
        text-align: center;
    }

    .resume-constructor-block-main-footer .resume-constructor-block-main-block.last-child {
        display: flex;
        margin-top: 20px;
    }

    .resume-constructor-block-main-footer .resume-constructor-block-main-block.last-child span {
        margin-top: 0px;
        text-align: left;
    }

    .resume-constructor-possibilities-blocks-grid .resume-constructor-possibilities-block .title {
        font-size: 18px;
    }

    .resume-constructor-possibilities-blocks-grid .resume-constructor-possibilities-block.big-block {
        grid-row: span 1;
    }

    .resume-constructor-possibilities-blocks-grid .resume-constructor-possibilities-block .img-footer {
        margin-top: 30px;
    }

    .integration-block .integration-block-text {
        padding: 30px 10px;
    }

    .integration-block .integration-block-text .title {
        font-size: 32px;
        line-height: 34px;
    }

    .integration-block .integration-block-text .btn {
        width: 100%;
    }

    .integration-block {
        margin-top: 30px;
        margin-left: 0px;
        margin-right: 0px;
    }

    .how-its-work-resume .how-its-work-step {
        height: auto;
        min-height: unset;
    }

    .how-its-work-resume .how-its-work-step.last-step, .how-its-work-resume .how-its-work-step.last-step-at-all {
        width: 100%;
    }

    .how-its-work-resume .how-its-work-step.last-step-at-all {
        height: 350px;
    }

    ul.checked-list {
        margin-top: 5px;
    }

    .how-its-work-resume .how-its-work-step.last-step-at-all::after {
        bottom: -32%;
        right: 5%;
        width: 300px;
    }

    .make-resume-block {
        padding-top: 30px;
        padding-bottom: 50px;
    }

    .make-resume-block .title {
        font-size: 32px;
        line-height: 34px;
    }

    .make-resume-block-text .green-btn {
        width: 100%;
    }

    .make-resume-block img {
        padding: 30px 0px;
    }

    footer {
        border-top-left-radius: 25px;
        border-top-right-radius: 25px;
    }

    ul.checked-list.white-check li {
        font-size: 16px;
    }

    .who-can-recommend h2 {
        font-size: 32px;
    }

    .who-can-recommend-main, .ref-recruting-transforms-main {
        padding: 40px 0px;
    }

    .who-can-recommend-text {
        width: 100%;
    }

    .who-can-recommend-main .resume-constructor-possibilities-blocks-grid .resume-constructor-possibilities-block .title {
        font-size: 16px;
    }

    .who-can-recommend-main .resume-constructor-possibilities-blocks-grid .resume-constructor-possibilities-block.violet {
        order: 10;
        height: 180px;
    }

    .one-result-block h2 {
        font-size: 32px;
        line-height: 36px;
    }

    .one-result-block .violet-back {
        padding: 0px 10px;
        margin-left: -10px;
    }

    .one-result-block-text-block {
        margin-top: 30px;
        z-index: 10;
        position: relative;
    }

    .one-result-block-main-img img {
        position: unset;
        transform: translate(9%, -12%);
        width: 100%;
    }

    .one-result-block.img-right .one-result-block-text-block {
        margin-top: -65px;
    }

    .one-result-block.img-right .one-result-block-main-img img {
        position: unset;
        transform: translate(-7%, -18%);
    }

    .one-result-block.img-right .one-result-block-main-img {
        order: 2;
    }

    .resume-construct-image img {
        width: 100%;
        bottom: -40px;
        position: relative;
    }

    .one-result-block.img-right {
        margin-top: 0px;
    }

    .one-result-block-text-block-text {
        font-size: 18px;
        line-height: 20px;
    }

    .ref-recruting-transforms-text {
        font-size: 24px;
        line-height: 28px;
    }

    .one-result-block {
        margin-bottom: 0px;
    }

    .ref-recruting-transforms-text img {
        width: 30px;
    }

    .ref-recruting-transforms-main .violet-back {
        padding: 5px 8px;
        margin-top: 0px;
        font-size: 22px;
    }

    .ref-recruting-transforms-container {
        margin: 0px;
    }

    .ref-recruting-transforms-main p {
        font-size: 18px;
    }

    .personal-cab-block-title {
        font-size: 32px;
        line-height: 36px;
    }

    .personal-cab-block {
        padding: 10px 0px;
    }

    .personal-cab-block-text {
        margin-top: 20px;
    }

    .personal-cab-block .specialist-block.first-block img, .personal-cab-block .specialist-block.fourth-block img, .personal-cab-block .specialist-block.fifth-block img {
        width: 305px;
    }

    .personal-cab-block .specialist-block.first-block, .personal-cab-block .specialist-block.fifth-block {
        min-height: 320px;
    }

    .personal-cab-block .specialist-block:not(.mg-t-20) {
        margin-top: 20px;
    }

    .personal-cab-block .specialist-block.fourth-block {
        min-height: 300px;
    }

    .you-have-tool h2 {
        font-size: 32px;
        line-height: 34px;
    }

    .you-have-tool h2 img {
        width: 34px;
    }

    .you-have-tool {
        padding: 60px 0px;
    }

    .you-have-tool-text {
        font-size: 16px;
    }

    .tool-point .number-block {
        flex-direction: column;
        gap: 0px;
    }

    .tool-point .number-block .title {
        font-size: 16px;
    }

    .tool-point .text {
        margin-top: 20px;
    }

    .tools-points {
        row-gap: 20px;
    }

    .tools-points .tool-point {
        height: 335px;
        padding: 32px 20px;
    }

    .tool-point img {
        position: absolute;
        bottom: -75px;
        right: 30px;
    }

    .tool-point .rounded-text {
        margin-top: 15px;
    }

    .resume-construct-title {
        font-size: 28px;
        line-height: 32px;
    }

    .resume-construct {
        padding: 40px 30px;
        height: auto;
    }

    .resume-construct-block .white-half-opacity {
        font-size: 16px;
        padding-bottom: 20px;
    }

    .time-to-pay-block.earn-block .white-half-opacity {
        font-size: 18px;
        line-height: 24px;
        padding-bottom: 20px;
    }

    .time-to-pay-block.earn-block .time-to-pay-block-2, .time-to-pay-block.earn-block .time-to-pay-block-1 {
        font-size: 15px;
    }

    .recomendators-block .small-advantages {
        flex-direction: column;
    }

    .recomendators-block .btn {
        width: 100%;
    }

    .recomendators-block .main-img {
        margin-top: -65px;
        margin-bottom: 20px;
    }

    .we-get-all-specialists-text {
        font-size: 16px;
        margin-top: 20px;
    }

    .who-can-recommend-main .resume-constructor-possibilities-blocks-grid .resume-constructor-possibilities-block.violet .title {
        font-size: 18px;
        width: 100%;
    }

    .who-can-recommend-main .resume-constructor-possibilities-blocks-grid .resume-constructor-possibilities-block.violet img {
        width: 32px;
        height: 32px;
    }

    .who-can-recommend-main .resume-constructor-possibilities-blocks-grid .resume-constructor-possibilities-block.violet:after {
        bottom: -50px;
    }

    .vacancies-list-main-block .main-img {
        position: relative;
        top: 0px;
        width: 80%;
        height: auto;
        transform: scale(1);
        max-width: unset;
    }

    .vacancies-list-main-block {
        padding-bottom: 40px;
    }

    .recommend-small-container {
        margin-top: 30px;
        gap: 20px;
    }

    .vacancies-list-search-container {
        justify-content: flex-start;
    }

    .price-field .price-input {
        padding: 16px 10px;
        font-size: 18px;
    }

    .vacancies-list-filter-top {
        margin-top: 20px;
    }

    .vacancies-list-filter-top-mobile .text {
        font-size: 20px;
        font-family: 'Rubik Medium', sans-serif;
        color: var(--semi-black-color);
    }

    .vacancies-list-filter-top-mobile {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 25px;
    }

    .vacancies-list-filter-top-mobile .mobile-filter-close {
        width: 32px;
        height: 32px;
        background: #fff;

    }

    /* Контейнер фильтра */
    .vacancies-list-filter {
        position: fixed;
        top: 0;
        left: -100%; /* Скрыт за левым краем */
        width: 100%;
        height: 100vh;
        background: white;
        z-index: 1000;
        overflow-y: auto; /* Вертикальный скролл */
        -webkit-overflow-scrolling: touch; /* Плавный скролл на iOS */
        transition: left 0.3s ease;
        padding: 20px;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
        border-radius: 0px;
    }

    /* Открытое состояние */
    .vacancies-list-filter.active {
        left: 0;
    }

    /* Кнопка сброса и тултип внизу */
    .filter-result-block {
        position: sticky;
        bottom: 0;
        background: white;
        padding: 15px 0;
        margin-top: 20px;
        border-top: 1px solid #eee;
    }

    .filter-result-block .btn {
        width: 100%;
        font-size: 14px;
    }

    /* Стили для скролла */
    .vacancies-list-filter::-webkit-scrollbar {
        width: 4px;
    }

    .vacancies-list-filter::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    .vacancies-list-filter::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 2px;
    }

    .vacancies-list-filter::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

    .vacancies-list-search-container-mobile {
        display: flex;
        align-items: center;
        gap: 20px;  /* Расстояние между инпутом и кнопкой */
        width: 100%;
        box-sizing: border-box;
        margin-top: 30px;
    }

    .vacancies-list-search-container-mobile .search-input-container {
        flex: 1;  /* Растягивается на всё доступное пространство */
        min-width: 0;  /* Предотвращает переполнение */
    }

    .vacancies-list-search-container-mobile .search-input-container .search-input {
        padding: 11px 12px 11px 40px;
    }

    .vacancies-list-main-block-title {
        font-size: 32px;
        line-height: 36px;
    }

    .vacancies-list-block {
        margin-top: 15px;
    }

    .company-card-main-info .top-block {
        flex-direction: column;
    }

    .company-card-main-info {
        flex-direction: column;
        gap: 20px;
        padding-top: 75px;
        padding-bottom: 50px;
    }

    .company-card-main-img {
        height: 230px;
        max-height: 230px;
    }

    .company-card-main-info .company-card-logo {
        width: 215px;
    }

    .company-card-main-info .top-block .title-block .title {
        font-size: 24px;
    }

    .company-card-main-info .top-block .rating {
        font-size: 14px;
        padding: 5px 12px;
    }

    .company-card-main-info .right-block {
        width: 100%;
        max-width: unset;
    }

    .how-to-recommend-block {
        height: 350px;
    }

    .catalog-main-block {
        border-radius: 24px;
        margin: 0px 5px;
        height: 645px;
    }

    .catalog-main-block .vacancies-list-main-block-text {
        width: 100%;
    }

    .catalog-main-block .vacancies-list-main-block-title {
        line-height: 36px;
        width: 100%;
    }

    .catalog-main-block {
        padding: 0px;
    }

    .catalog-main-block .main-img {
        width: 90%;
        margin-top: 0px;
        bottom: -32px;
        top: unset;
        right: -50px;
    }

    .all-companies {
        height: 480px;
        margin: 0px 5px;
    }

    .all-companies-main-block-title {
        font-size: 32px;
        margin-top: 0px;
        width: 100%;
    }

    .all-companies-main-block-text {
        width: 100%;
    }

    .all-companies .main-img {
        max-width: unset;
        left: 47%;
        width: 640px;
        transform: translate(-50%, -30%);
        top: 50%;
    }

    .lk-personal-photo-block {
        flex-direction: row;
        padding: 16px 0px;
        padding-bottom: 5px;
        padding-top: 30px;
    }

    .personal-img {
        width: 56px;
        height: 56px;
    }

    .profile-photo {
        width: 56px;
        height: 56px;
    }

    .user-short-data .user-name, .user-short-data .user-email {
        text-align: left;
    }

    .lk-personal-photo-block .user-name {
        margin-bottom: 7px;
    }

    .personal-container {
        margin: 20px 10px 50px;
    }

    .mobile-tag-filter-btn {
        margin-right: 15px;
    }

    .mobile-personal-header .title {
        font-size: 20px;
        font-family: 'Rubik Medium', sans-serif;
        color: var(--semi-black-color);
    }

    .lk-main-block {
        margin-bottom: 60px;
    }

    .lk-vacancies-block .vacancy-block .partner-block {
        flex-direction: row;
    }

    .lk-vacancies-block .vacancy-block .vacancy-buttons {
        flex-wrap: wrap;
        display: flex;
        flex-direction: row;
    }

    .lk-vacancies-block .vacancy-block .vacancy-buttons a {
        width: fit-content;
    }

    .lk-vacancy-points .lk-vacancy-point.lk-vacancy-status-edit-block {
        flex-direction: column;
        gap: 15px;
    }

    .lk-vacancy-points .lk-vacancy-point.lk-vacancy-status-edit-block .lk-vacancy-status {
        text-align: center;
    }

    .candidates-header-block {
        display: flex;
        gap: 20px;
    }

    .lk-vacancy-creation-buttons {
        flex-direction: column;
    }
    .template-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    .template-image {
        height: 150px;
    }

    .template-radio {
        width: calc(50% - 10px);
    }

    .who-finds h2 {
        font-size: 32px;
    }

    .who-finds-block .valuations-text {
        width: 100%;
    }

    .ref-recrut-block-title {
        font-size: 32px;
        line-height: 34px;
    }

    .all-you-want-from-hire .title {
        width: 100%;
    }

    .specialist-block .small-text {
        font-size: 16px;
    }

    .marketolog-block-image.success-img {
        height: auto;
    }

    .posting-offers-block {
        height: auto;
    }

    .posting-offers-block .posting-offers-block-img {
        left: 50%;
        transform: translate(-50%, 0%);
        bottom: -20px;
        position: relative;
        margin-top: 20px;
        width: 100%;
    }

    .catalog-footer-block .recommend-small-block {
        height: auto;
    }

    .personal-cab-block .specialist-block.fourth-block img {
        max-width: 280px;
        width: 280px;
        height: auto;
    }

    .personal-cab-block .small-container {
        padding: 40px 10px;
    }

    .tool-point img {
        width: 200px;
        height: 200px;
    }

    .recomendators-footer-text {
        width: 327px;
    }

    .recomendators-footer-point.first-point, .recomendators-footer-point.second-point, .recomendators-footer-point.third-point {
        width: 327px;
    }

    .recomendators-footer {
        overflow: unset;
        margin-top: -200px;
    }

    .personal-cab-block-title .span-gray-back {
        background-color: unset;
        border-radius:0px;
        padding: 0px;
    }

    .recomendators-specialists-block .specialist-block {
        padding: 20px;
    }

    .integration-block img {
        position: unset;
    }

    .lk-table-pagination .page-size {
        display: none;
    }

    .lk-table-pagination .load-more-btn {
        display: block;
    }

    .vacancy-edit-block.active .blue-btn {
        width: 100%;
    }

    .lk-profile-menu-block {
        border-radius: 0px;
    }

    /* Скрываем меню на десктопе и делаем его выезжающим */
    .personal-mobile-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1000;
        visibility: hidden;
        transition: visibility 0.3s ease;
        padding: 0px;
    }

    .personal-mobile-menu-overlay.active {
        visibility: visible;
    }

    /* Само меню */
    .mobile-slide-menu {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #fff;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        overflow-y: auto;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    }

    .personal-mobile-menu-overlay.active .mobile-slide-menu {
        transform: translateX(0);
    }

    /* Кнопка закрытия */
    .personal-mobile-menu-close-btn {
        position: absolute;
        top: 15px;
        right: 15px;
        width: 30px;
        height: 30px;
        border: none;
        background: transparent;
        cursor: pointer;
        z-index: 10;
    }

    .personal-mobile-menu-close-btn::before,
    .personal-mobile-menu-close-btn::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 20px;
        height: 2px;
        background-color: #333;
        transform: translate(-50%, -50%) rotate(45deg);
    }

    .personal-mobile-menu-close-btn::after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    .back-arrow {
        display: flex;
        align-items: center;
        font-size: 18px;
        font-family: 'Rubik Medium', sans-serif;
        gap: 10px;
    }

    .candidates-replies-mobile {
        margin-top: 20px;
    }

    .candidates-replies-mobile-item {
        border: 1px solid var(--gray-color);
        padding: 15px;
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-top: 20px;
    }

    .candidates-replies-mobile-item .half-width-items {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    .candidates-replies-mobile-item .half-width-items .replies-mobile-item {
        width: 42%;
    }

    .candidates-replies-mobile-item .replies-mobile-item {
        display: flex;
        flex-direction: column;
        margin-bottom: 20px;
        width: 100%;
    }

    .candidates-replies-mobile-item .replies-mobile-item a {
        color: var(--blue-color);
    }

    .candidates-replies-mobile-item .replies-mobile-item span:first-child {
        color: var(--semi-black-color-60);
        font-size: 13px;
    }

    .candidates-replies-mobile-item .replies-mobile-item span:last-child {
        color: var(--semi-black-color);
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
        width: 100%;
    }

    .candidates-replies-mobile-item .replies-mobile-item .ellipsis-wrapper {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
    }

    .candidates-replies-mobile-item .replies-mobile-item span.blue-bold {
        color: var(--blue-color);
    }

    .candidates-replies-mobile-item .replies-mobile-item .ellipsis-wrapper a,
    .candidates-replies-mobile-item .replies-mobile-item .ellipsis-wrapper span {
        color: inherit;
    }

    .candidates-replies-mobile-item .replies-mobile-item .status {
        max-width: unset;
    }

    .candidates-replies-mobile-item .replies-mobile-item span.purple-status {
        color: var(--violet-color);
        background-color: var(--light-violet-color);
    }

    .candidates-replies-mobile-item .replies-mobile-item span.blue-status {
        color: var(--blue-color);
        background-color: var(--light-blue-color);
    }

    .candidates-replies-mobile-item .replies-mobile-item span.green-status {
        color: var(--green-color);
        background-color: var(--light-green-color);
    }

    .candidates-replies-mobile-item .replies-mobile-item span.orange-status {
        color: var(--orange-color);
        background-color: var(--light-orange-color);
    }

    .chose-all-replies-mobile {
        color: var(--blue-color);
        font-family: 'Rubik Medium', sans-serif;
        font-size: 15px;
        background-color: unset;
        padding: 0px;
    }

    .resume-container {
        max-width: 1125px;
        width: 1125px;
        display: flex;
    }

    footer.resume-footer .flex.justify-between, footer.resume-footer .flex.align-center {
        flex-direction: unset;
    }
}

@media (max-width: 575px) {
    .vacancy-block .award {
        font-size: 11px;
        width: 100%;
        justify-content: space-around;
    }

    .catalog-main-block {
        height: 590px;
    }

    .catalog-main-block .main-img {
        position: absolute;
        width: 102%;
        height: auto;
        transform: scale(1);
        max-width: unset;
        right: -5px;
        bottom: -5px;
        top: 0px;
        margin-top: 30px;
    }

    .company-footer {
        flex-direction: column;
        gap: 20px;
    }

    .company-footer .btn {
        width: 100%;
    }

    .social-change-modal, .vacancy-close-modal {
        position: absolute;
        width: 100%;
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
        bottom: 0px;
    }

    .user-socials-items {
        margin: 0 auto;
        margin-top: 20px;
    }

    .lk-vacancies-block .vacancy-block .partner-block {
        flex-direction: column;
    }

    .lk-vacancies-block .vacancy-block .award {
        font-size: 12px;
        width: fit-content;
    }

    .lk-vacancy-file {
        display: inline-block;
        max-width: 190px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
    }


    .mobile-tag-filter-btn {
        border-radius: 50%;
        padding: 5px;
    }

    .lk-vacancy-candidates-block .lk-vacancy-candidate .header-block {
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
    }

    .company-vacancies-title {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .lk-vacancy-name {
        font-size: 16px;
        margin-top: 5px;
    }

    .lk-vacancy-email {
        display: inline-block;
        max-width: 190px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
    }

    .lk-vacancies-block {
        margin-top: 30px;
    }

    .template-radio {
        width: 100%;
    }

    .template-radio-image {
        height: 120px;
    }

    .resume-photo-block {
        flex-direction: column;
    }

    .resume-photo {
        width: 100%;
    }

    .share-buttons {
        flex-direction: column;
    }

    .lk-vacancy-creation-body .share-buttons {
        gap: 0px;
    }

    .lk-vacancy-creation-body .share-buttons .share-resume, .lk-vacancy-creation-body .share-buttons .send-resume-email, .lk-vacancy-creation-body .share-buttons .download-resume {
        margin-top: 20px;
        justify-content: center;
    }

    .save-resume {
        width: 100%;
    }

    .courses-info {
        flex-direction: column;
        gap: 0px;
    }

    .work-experience-block, .study-block, .courses-block, .languages-block {
        padding: 10px 16px;
    }

    .study-info {
        flex-direction: column;
        gap: 0px;
    }

    .study-block .study-info, .languages-info {
        gap: 0px;
    }

    .lk-resume-creation-container .col-lg-9 {
        padding-left: 5px;
        padding-right: 5px;
    }

    .lk-resume-creation-container .lk-main-block {
        padding: 24px 12px;
    }

    .lk-vacancy-creation-block .title {
        font-size: 20px;
        font-family: 'Rubik Medium', sans-serif;
        color: var(--semi-black-color);
    }

    .lk-vacancy-creation-block-mobile-title {
        align-items: center;
    }

    .lk-vacancy-creation-block .mg-t-0 {
        margin-top: 20px;
    }

    .company-calendar-inputs {
        flex-direction: column;
        width: 100%;
    }

    .company-calendar {
        flex-direction: column;
        align-items: flex-start;
    }

    .company-calendar-inputs .floating-input:first-child input, .company-calendar-inputs .floating-input:last-child input {
        border-radius: 12px;
    }

    .toggle-checkbox-container {
        margin-top: 20px;
    }

    .editor-container .ql-toolbar {
        left: 10px;
    }

    .finish-year {
        flex-direction: column;
        gap: 0px;
    }

    .add-more-work-experience, .add-more-study, .add-more-course, .add-more-language {
        width: 100%;
        justify-content: center;
    }

    .study-block .supposed-text, .courses-block .supposed-text {
        margin-top: 0px;
    }

    .languages-info {
        flex-direction: column;
    }

    .two-items-row {
        flex-direction: column;
    }

    .recruters .recruters-image {
        justify-content: flex-start;
        margin-left: 15px;

    }

    .recruters .recruters-image img {
        max-height: 112px;
        width: auto;
    }

    .recommend-vacancies .recommend-vacancy .recommend-vacancy-head {
        flex-direction: column;
        gap: 20px;
    }

    .recommend-vacancies .recommend-vacancy .recommend-vacancy-btn {

    }

    .recommend-vacancies .recommend-vacancy .recommend-vacancy-award {
        width: 100%;
        justify-content: center;
    }

    .company-benefits .company-benefit {
        padding: 20px 20px;
        word-wrap: break-word;
    }

    .company-benefits .col-6 {
        padding-right: 10px;
        padding-left: 10px;
    }

    .company-card-main-info {
        padding: 75px 20px 50px;
    }

    .vacancy-detail-card-body .useful-info, .vacancy-detail-card-body .vacancy-additional-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .lk-vacancy-creation-recomend-award {
        flex-direction: column;
        gap: 20px;
    }

    .lk-vacancy-creation-recomend-award .left, .lk-vacancy-creation-recomend-award .right {
        width: 100%;
    }

    .lk-vacancy-creation-recomend-award .right {
        justify-content: flex-start;
    }

}

@media (prefers-color-scheme: dark) and (max-width: 500px) {

    body {
        color: var(--semi-black-color-80) !important;
        background-color: var(--light-gray-color) !important;
    }
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

.mobile-only-break {
    display: none;
}

@media (max-width: 767px) {
    .mobile-only-break {
        display: block;
    }
}