:root {
    --sticky-header-h: 126px;
    --vacancy-primary: #453F9B;
    --vacancy-text-muted: #525B7C;
    --vacancy-surface: #FFF;
    --vacancy-border-soft: #F3F4F6;
    --vacancy-shadow-card: 0 4px 24px 0 rgba(0, 0, 0, 0.06);
}

.vacancies .banner {
    padding: 56px 0 112px;
    position: relative;
    /*overflow: hidden;*/
}
.vacancies .banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(86, 80, 222, 0.45) 0%, rgba(255, 207, 27, 0.2) 50%);
    /*filter: blur(100px);*/
    z-index: 0;
}
.vacancies .banner > * {
    position: relative;
    z-index: 2;
}
.vacancies .banner h1 {
    color: #333;
    font-size: 42px;
    font-weight: 700;
    line-height: 60px;
    letter-spacing: 0.264px;
    margin-bottom: 6px;
}
.vacancies .banner .description {
    color: #333;
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: -0.449px;
}
.vacancies .banner .description span {
    font-weight: 700;
}
.vacancies .banner form {
    border-radius: 16px;
    border: 1px solid #F3F4F6;
    background: #FFF;
    box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 20px 18px;
    margin-top: 36px;
}
.vacancies .banner form .searchWrapper {
    width: 40%;
}
.vacancies .banner form .searchable-select-input {
    border-radius: 10px;
    border: 1px solid #DEE3F4;
    background-color: #F9FBFE;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M3.88225 6.45727C4.1289 6.21607 4.52879 6.21607 4.77544 6.45727L10.2236 11.7852L15.6717 6.45727C15.9184 6.21607 16.3183 6.21607 16.5649 6.45727C16.8116 6.69848 16.8116 7.08955 16.5649 7.33076L10.6702 13.0955C10.4235 13.3367 10.0236 13.3367 9.77699 13.0955L3.88225 7.33076C3.6356 7.08955 3.6356 6.69848 3.88225 6.45727Z" fill="%23151826"/><path fill-rule="evenodd" clip-rule="evenodd" d="M3.70746 6.27853C4.05126 5.94231 4.60643 5.94231 4.95023 6.27853L10.2236 11.4356L15.4969 6.27854C15.8407 5.94231 16.3959 5.94231 16.7397 6.27854C17.0866 6.6178 17.0866 7.17023 16.7397 7.50949L10.845 13.2742C10.5012 13.6104 9.946 13.6104 9.60219 13.2742L3.70746 7.50949C3.36054 7.17023 3.36054 6.6178 3.70746 6.27853ZM4.60064 6.63601C4.45116 6.48982 4.20653 6.48982 4.05705 6.63601C3.91067 6.77915 3.91067 7.00888 4.05705 7.15202L9.95178 12.9167C10.1013 13.0629 10.3459 13.0629 10.4954 12.9167L16.3901 7.15202C16.5365 7.00888 16.5365 6.77915 16.3901 6.63601C16.2406 6.48982 15.996 6.48982 15.8465 6.63601L10.3984 11.964C10.3012 12.059 10.1459 12.059 10.0488 11.964L4.60064 6.63601Z" fill="%23151826"/></svg>');
    padding: 12px;
    color: #525B7C;
}
.vacancies-list .open-vacancies {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
}
.vacancies-list .update-more {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 35px;
}
.vacancies-list .btn {
    display: inline-flex;
    height: 56px;
    padding: 16px 32px;
    justify-content: center;
    align-items: center;
    gap: 12px;
    border-radius: 62px;
    background: var(--vacancy-primary);
    box-shadow: 0 2px 12px 0 rgba(197, 218, 239, 0.40);

}
.vacancies .banner form .searchable-select-dropdown li {
    padding: 5px 12px;
    color: #525B7C;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
}
.vacancies .banner form .searchable-select-dropdown li[data-value=disabled] {
    background-color: #bfbfbf;
    cursor: none;
}
.vacancies .banner form .search-btn {
    border-radius: 48px;
    background: #453F9B;
    padding: 9px 23px;
    color: #FFF;
    font-size: 18px;
    font-weight: 700;
    width: 18%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.vacancies .vacancies-list {
    padding: 80px 0 125px;
    border-radius: 24px 32px 0 0;
    background: #FFF;
    margin-top: -56px;
    z-index: 1;
    position: relative;
}
.vacancies .vacancies-list .section-title {
    color: #333;
    font-size: 30px;
    font-weight: 700;
    line-height: 36px;
    width: fit-content;
}
.vacancies .vacancies-list .vacancies-counter {
    color: #525B7C;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.312px;
    width: fit-content;
}
.vacancies .vacancies-list .vacancies-box {
    margin-top: 36px;
}
.vacancies .vacancy-card {
    border-radius: 16px;
    border: 1px solid var(--vacancy-border-soft);
    background: var(--vacancy-surface);
    box-shadow: var(--vacancy-shadow-card);
    padding: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.vacancies .vacancy-card:not(:last-of-type) {
    margin-bottom: 12px;
}
@media (min-width: 992px) {
    .vacancies .vacancy-card {
        cursor: pointer;
    }
}
.vacancies .vacancy-card__title {
    color: #101828;
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    margin-bottom: 16px;
    width: 100%;
}
.vacancy-info__row {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-top: 16px;
}
.vacancy-info__row .department,
.vacancy-info__row .city {
    display: flex;
    align-items: center;
    color: var(--vacancy-text-muted);
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.15px;
}
.vacancy-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    max-width: 80%;
    width: fit-content;
}
.vacancy-tags .badge {
    border-radius: 16777200px;
    padding: 0 12px;
    height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #3383C0;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: -0.15px;
}
.vacancy-tags .badge.badge--blue {
    background: #C9ECF9;
    color: #3383C0;
}
.vacancy-tags .badge.badge--purple {
    background: #DFDCFA;
    color: var(--vacancy-primary);
}
.vacancy-tags .badge.badge--green {
    background: #CAFBD1;
    color: #02A16A;
}
.vacancies .about {
    border-radius: 24px;
    background: #161323;
    padding-bottom: 104px;
}
.vacancies .about .vuso-block {
    position: relative;
}
.vacancies .about .vuso-block .vuso-block__inner {
    height: calc(100dvh - var(--sticky-header-h));
    display: flex;
    justify-content: space-between;
    align-items: start;
    padding-top: var(--sticky-header-h);
}
.vacancies .about .vuso-block .vuso-block__inner .vuso-block__left {
    width: 35%;
    padding-left: 106px;
    position: relative;
}
.vacancies .about .vuso-block .vuso-block__inner .vuso-block__left::before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="38" height="38" viewBox="0 0 38 38" fill="none"><rect width="38" height="38" rx="12" fill="%23453F9B"/><path fill-rule="evenodd" clip-rule="evenodd" d="M25.8199 22.6514C25.9518 22.8099 26.0155 23.0143 25.9968 23.2196C25.9781 23.425 25.8787 23.6145 25.7203 23.7466L19.4978 28.9315C19.4197 28.9998 19.3288 29.0518 19.2304 29.0844C19.1319 29.117 19.0279 29.1296 18.9245 29.1215C18.8211 29.1133 18.7204 29.0846 18.6283 29.037C18.5362 28.9893 18.4545 28.9237 18.3881 28.844C18.3217 28.7644 18.2719 28.6722 18.2417 28.573C18.2114 28.4738 18.2013 28.3695 18.2119 28.2664C18.2226 28.1632 18.2537 28.0632 18.3036 27.9723C18.3534 27.8813 18.421 27.8012 18.5022 27.7368L24.7247 22.5519C24.8832 22.4199 25.0875 22.3563 25.2929 22.3749C25.4983 22.3936 25.6878 22.4931 25.8199 22.6514Z" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M12.1802 22.6514C12.3122 22.4931 12.5018 22.3936 12.7071 22.3749C12.9125 22.3563 13.1169 22.4199 13.2753 22.5519L19.4978 27.7368C19.5791 27.8012 19.6466 27.8813 19.6964 27.9723C19.7463 28.0632 19.7775 28.1632 19.7881 28.2664C19.7987 28.3695 19.7886 28.4738 19.7583 28.573C19.7281 28.6722 19.6783 28.7644 19.6119 28.844C19.5455 28.9237 19.4638 28.9893 19.3717 29.037C19.2796 29.0846 19.1789 29.1133 19.0755 29.1215C18.9721 29.1296 18.8681 29.117 18.7697 29.0844C18.6712 29.0518 18.5803 28.9998 18.5022 28.9315L12.2797 23.7466C12.1213 23.6145 12.0219 23.425 12.0032 23.2196C11.9845 23.0143 12.0482 22.8099 12.1802 22.6514Z" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M19 28.3342C18.7937 28.3342 18.5959 28.2522 18.45 28.1064C18.3042 27.9605 18.2222 27.7626 18.2222 27.5564V12.7779C18.2222 12.5716 18.3042 12.3738 18.45 12.2279C18.5959 12.082 18.7937 12.0001 19 12.0001C19.2063 12.0001 19.4041 12.082 19.55 12.2279C19.6959 12.3738 19.7778 12.5716 19.7778 12.7779V27.5564C19.7778 27.7626 19.6959 27.9605 19.55 28.1064C19.4041 28.2522 19.2063 28.3342 19 28.3342Z" fill="white"/></svg>');
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #453F9B;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
}
.vacancies .about .vuso-block .vuso-block__inner .vuso-block__left .vuso-block__title {
    color: #FFF;
    font-size: 30px;
    font-weight: 700;
    line-height: 32px;
    letter-spacing: 0.07px;
    margin-bottom: 32px;
}
.vacancies .about .vuso-block .vuso-block__inner .vuso-block__left .vuso-description {
    color: #DEE3F4;
    font-size: 18px;
    font-weight: 500;
    line-height: 22.75px;
    letter-spacing: -0.15px;
}
.vacancies .about .vuso-block .vuso-block__inner .vuso-block__right {
    overflow: hidden;
    height: calc(100dvh - var(--sticky-header-h));
    width: 60%;
    padding-bottom: 170px;
}
.vacancies .about .vuso-block .vuso-block__inner .vuso-block__right .cards {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: flex-start;
    margin-bottom: 0;
    will-change: transform;
}
.vacancies .about .vuso-block .vuso-block__inner .vuso-block__right .cards .card {
    border-radius: 20px;
    border: 1px solid #525B7C;
    background: rgba(255, 255, 255, 0.1);
    padding: 28px;
    width: calc(50% - 12px);
    transform: translateY(40px);
    opacity: 0;
}
@media (max-height: 801px) {
    .vacancies .about {
        padding-bottom: 350px;
    }
    .vacancies .about .vuso-block .vuso-block__inner .vuso-block__right .cards .card {
        max-height: 208px;
    }
    .vacancies .team-info .container {
        padding-top: 80px;
    }
    }
@media (max-width: 1198px) {
    .vacancies .about .vuso-block .vuso-block__inner .vuso-block__right .cards .card {
        opacity: 1 !important;
        transform: none !important;
    }
}
.vacancies .about .vuso-block .vuso-block__inner .vuso-block__right .cards .card:nth-child(2n) {
    top: 40px;
}
.vacancies .about .vuso-block .vuso-block__inner .vuso-block__right .cards .card:nth-child(5) {
    margin: 0;
}
.vacancies .about .vuso-block .vuso-block__inner .vuso-block__right .cards .card .card-img {
    border-radius: 14px;
    background: linear-gradient(180deg, #FFDE90 0%, #FFCE6B 100%);
    padding: 12px;
    width: fit-content;
}
.vacancies .about .vuso-block .vuso-block__inner .vuso-block__right .cards .card .card-title {
    color: #FFF;
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    margin-top: 18px;
    padding: 0;
}
.vacancies .about .vuso-block .vuso-block__inner .vuso-block__right .cards .card .card-title.yellow {
    color: #FFCE6B;
    font-size: 30px;
    line-height: 36px;
}
.vacancies .about .vuso-block .vuso-block__inner .vuso-block__right .cards .card .card-description {
    color: #DEE3F4;
    font-size: 18px;
    font-weight: 400;
    line-height: 22.75px;
    letter-spacing: -0.15px;
    margin-top: 18px;
    padding: 0;
}
.vacancies .team-info .container {
    padding: 124px 0;
}
.vacancies .team-info .container .title {
    color: #000;
    font-size: 44px;
    font-weight: 800;
    line-height: 56px;
    margin-bottom: 35px;
}
.vacancies .team-info .container .team-info-box {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 32px;
    grid-row-gap: 32px;
}
.vacancies .team-info .container .team-info-box [data-element="1"] {
    grid-area: 1/1/3/2;
    padding: 39px 33px;
}
.vacancies .team-info .container .team-info-box [data-element="2"] {
    grid-area: 1/2/2/4;
}
.vacancies .team-info .container .team-info-box [data-element="3"] {
    grid-area: 2/2/3/4;
    padding: 25px 37px;
}
.vacancies .team-info .container .team-info-box [data-element="4"] {
    grid-area: 1/4/2/5;
}
.vacancies .team-info .container .team-info-box [data-element="5"] {
    grid-area: 2/4/3/5;
}
.vacancies .team-info .container .team-info-box .team-card {
    border-radius: 20px;
    background: #FFF;
    box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.06);
}
.vacancies .team-info .container .team-info-box .team-card .card-title {
    color: #000;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    margin-bottom: 16px;
}
.vacancies .team-info .container .team-info-box .team-card .card-description {
    color: #525B7C;
    font-size: 18px;
    font-weight: 400;
    line-height: 140%;
}
.vacancies .team-info .container .team-info-box .team-card .card-description:not(:last-of-type) {
    margin-bottom: 16px;
}
.vacancies .team-info .container .team-info-box .team-card img {
    width: 100%;
    border-radius: 20px;
    height: 100%;
    object-fit: cover;
}

.vertical-line {
    position: absolute;
    left: 17px;  /* 38px(ширина іконки)/2 - 2 */
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, rgba(82, 91, 124, 0.00) 0%, #525B7C 48.56%, rgba(82, 91, 124, 0.00) 100%);
}
.about .container {
    position: relative;
    padding: 0;
}
#info-card-1 {
    background-image: url(../img/vacancies/Mask.svg);
    background-repeat: no-repeat;
    background-position: -30% 132%;
    background-size: auto;
}
#info-card-3 {
    background-image: url(../img/vacancies/Mask2.svg);
    background-repeat: no-repeat;
    background-position: -30% 175%;
    background-size: auto;
}
@media (max-width: 991.98px) {
    .vacancy-info__row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .cta .swiper-pagination {
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .vacancies .banner::before {
        background: linear-gradient(317deg,rgba(86, 80, 222, 0.45) 0%, rgba(255, 207, 27, 0.2) 50%);
    }
    .vacancy-tags {
        flex-wrap: nowrap;
    }
    .vacancies .banner h1 {
        font-size: 30px;
        line-height: 40px;
    }
    .vacancies .banner .description{
        font-size: 18px;
    }
    .vacancies .banner form {
        flex-direction: column;
        padding: 20px 18px 18px 20px;
        gap: 14px;
    }
    .vacancies .banner form .search-btn {
        width: 100%;
    }
    .vacancies .banner form .searchWrapper {
        width: 100%;
    }
    .vacancies-list .open-vacancies {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
    }
    .swiper-container {
        border-radius: 20px;
        background: #161323;
        padding-bottom: 25px;
    }
    .animate__fadeIn .card {
        display: flex;
        gap: 12px;
        border-radius: 20px;
        border: 1px solid  #525B7C;
        background: rgba(255, 255, 255, 0.10);
        padding: 18px 18px 28px 18px;
        width: 100%;
        min-height: 180px;
        margin: 0;
    }
    .card-img svg {
        padding: 7px;
        background: #FFCE6B;
        border-radius: 8px;
        width: 38px;
        height: 38px;
    }
    .card-title {
        color:  #FFF;
        font-feature-settings: 'liga' off, 'clig' off;
        font-size: 30px;
        font-style: normal;
        font-weight: 700;
        line-height: 36px; /* 120% */
    }
    .card-description{
        color: #DEE3F4;
        font-size: 18px;
        font-weight: 400;
        line-height: 22.75px; /* 126.389% */
        letter-spacing: -0.15px;
        margin: 0;
    }
    .vuso-block__title {
        color: white;
        font-size: 30px;
    }
    .vuso-description {
        color:  #DEE3F4;
        font-family: "Nunito Sans";
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 22.75px; /* 142.188% */
        letter-spacing: -0.15px;
        max-width: 60%;
    }
    .vuso-block__left {
        display: flex;
        padding-left: 27px;
        gap: 18px;
        flex-direction: column;
        padding-top: 59px;
        align-items: flex-start;
    }
    .swiper-pagination-bullet {
        background:#8A95BD;
    }
    .swiper-pagination {
        padding-bottom: 20px;
    }
    .team-card .card-description {
        color: #525B7C;
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 140%; /* 25.2px */
    }
    .team-info .container {
        display: flex;
        gap: 15px;
        flex-direction: column;
        padding-left: 30px;
    }
    .team-card .card-title {
        color: #000000;
    }
    .team-info .team-card {
        display: flex;
        flex-direction: column;
        gap: 15px;
        padding-left: 30px;
    }
    .vacancies .team-info .container .title {
        font-size: 30px;
        padding-left: 30px;
        margin-bottom: auto;
    }
    .team-info .swiper-container {
        background: none;
    }
    .team-info .card img {
        height: 270px;
    }
    .vacancies .vacancies-list {
        padding-bottom: 0px;
    }
    .team-info .cta__slide__inner {
        padding: 28px 20px;
    }
    .cta__slide__inner {
        height: auto;
    }
    article p{
        padding: 0px;
    }
    .vacancies-list .update-more{
        margin-top: 24px;
    }
    .swiper-container .card-title {
        color: #FFF;
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: 24px;
        margin: 0;
    }
    .team-info  .swiper-pagination-bullet {
        background: #151826;;
    }
}

.share-toast {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 9999;
    padding: 10px 14px;
    border-radius: 8px;
    background: #111827;
    color: #fff;
    font-size: 14px;
}
@media (max-width: 1100px) {
    .team-info .team-info-box {
        padding-left: 10px;
        padding-right: 10px;
        border-radius: 20px;
    }
    .text-info .container {
        width: 90%;
    }
    .cta__slide__inner {
        width: 100%;
        padding: 42px 12px;
    }
    .cta .swiper-pagination {
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .card-title-uni {
        font-size: 24px;
        font-style: normal;
        font-weight: 700;
        line-height: 32px;
        background:  linear-gradient(180deg, #FFDE90 0%, #FFCE6B 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .vacancies .team-info .container .team-info-box {
        display: flex;
    }
}