@charset "utf-8";
@import "bootstrap.css";
@import "normalize.css";
@import "callback-btn.css";
@import "callback-modal.css";
@import "typography.css";

/* Класс для увеличения картинки */

.zoom-img {}


/* Класс для галлереи */

.gallery {}


/* Класс для формы */

.form-submit-toggle {}


/* Класс для кнопки заказать звонок */

.callback-toggle {}


/******** Magnific-Popup *********/

.mfp-fade.mfp-bg {
    opacity: 0;
    transition: all 0.15s ease-out;
}

.mfp-fade.mfp-bg.mfp-ready {
    opacity: 0.8;
}

.mfp-fade.mfp-bg.mfp-removing {
    opacity: 0;
}

.mfp-fade.mfp-wrap .mfp-content {
    opacity: 0;
    transition: all 0.15s ease-out;
}

.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
    opacity: 1;
}

.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
    opacity: 0;
}


/* Модалка */

html.lock {
    overflow: hidden;
}


/*  */

@font-face {
    font-family: 'Navigo';
    src: url(../fonts/Navigo-Light.otf) format('opentype');
    font-weight: 300;
}

@font-face {
    font-family: 'Navigo';
    src: url(../fonts/Navigo-Regular.otf) format('opentype');
    font-weight: 400;
}

@font-face {
    font-family: 'Navigo';
    src: url(../fonts/Navigo-Medium.otf) format('opentype');
    font-weight: 500;
}

@font-face {
    font-family: 'Navigo';
    src: url(../fonts/Navigo-Bold.otf) format('opentype');
    font-weight: 700;
}

:root {
    --colorMain: #26A3DA;
    --colorTxt: #062D24;
}

.imgF {
    display: flex;
    justify-content: center;
    align-items: center;
}

body {
    color: var(--colorTxt);
    font-size: 16px;
    font-family: Navigo;
    line-height: 1.2;
    font-weight: 300;
    background: url(../images/bgBody.svg) repeat-y center top;
}

body p {
    margin-top: 0;
    margin-bottom: 10px;
}

.h1,
h1 {
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.1;
    margin: 0 0 40px;
}

.wrapper {
    max-width: 1920px;
    margin: 0 auto;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.wrapLabel {
    position: relative;
    margin-bottom: 0;
    display: flex;
    align-items: center;
}

.wrapLabel span {
    padding-left: 25px;
    color: #C3E9FA;
    font-size: 12px;
    font-weight: 300;
    display: block;
    position: relative;
}

.wrapLabel span a {
    color: #C3E9FA;
}

.wrapLabel span:before {
    position: absolute;
    left: 0;
    width: 16px;
    height: 16px;
    top: calc(50% - 8px);
    content: '';
    border: 1px solid #C3E9FA;
    border-radius: 3px;
}

.wrapLabel span:after {
    position: absolute;
    width: 8px;
    height: 8px;
    left: 4px;
    top: calc(50% - 4px);
    content: '';
    background: #C3E9FA;
    border-radius: 2px;
    opacity: 0;
}

.wrapLabel input:checked+span:after {
    opacity: 1;
}

.wrapLabel input {
    width: 10px !important;
    height: 10px !important;
    left: 0 !important;
    top: 0 !important;
    position: absolute !important;
    opacity: 0 !important;
}

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

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

.flexCenter {
    display: flex;
    justify-content: center;
}

svg {
    height: auto;
    line-height: 0;
}

svg,
svg * {
    transition: all 0.4s;
}

.flexAI {
    display: flex;
    align-items: center;
}

.flexW {
    display: flex;
    flex-wrap: wrap;
}

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

.flexStart {
    display: flex;
    justify-content: flex-start;
}

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

.btnStyle1,
.btnStyle2,
.btnStyle3 {
    display: flex;
    justify-content: center;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.4s;
    background: none;
    border: none;
    text-decoration: none;
}

.btnStyle1 .txtBtn,
.btnStyle2 .txtBtn,
.btnStyle3 .txtBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 50px;
    transition: all 0.4s;
    flex: auto;
    height: 100%;
}

.btnStyle1 svg,
.btnStyle2 svg,
.btnStyle3 svg {
    width: 14.5px;
}

.btnStyle2 svg * {
    stroke: #fff;
}

.imgBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: 1px solid;
    line-height: 0;
    transition: all 0.4s;
}

.btnStyle1 {
    color: var(--colorMain);
    font-size: 12px;
}

.btnStyle1 .txtBtn {
    padding: 0 14px;
    border: 1px solid var(--colorMain);
}

.btnStyle1 .imgBtn {
    width: 29px;
    height: 29px;
    border-color: var(--colorMain);
    flex: none;
}

.btnStyle1:hover .txtBtn {
    color: #fff;
    background: var(--colorMain);
}

.btnStyle1:hover .imgBtn {
    background: var(--colorMain);
    transform: rotate(45deg);
}

.btnStyle1:hover svg * {
    stroke: #fff;
}

.btnStyle2 {
    color: #FFF;
}

.btnStyle2 .txtBtn {
    padding: 0 36px;
    background: var(--colorMain);
    border: 1px solid var(--colorMain);
}

.btnStyle2 .imgBtn {
    width: 52px;
    height: 52px;
    background: var(--colorMain);
    border-color: var(--colorMain);
    flex: none;
}

.btnStyle2:hover .txtBtn {
    color: var(--colorMain);
    background: #fff;
}

.btnStyle2:hover .imgBtn {
    background: #fff;
    transform: rotate(45deg);
}

.btnStyle2:hover svg * {
    stroke: var(--colorMain);
}

.btnStyle3 {
    color: var(--colorMain);
}

.btnStyle3 .txtBtn {
    padding: 0 36px;
    background: #fff;
    border: 1px solid #fff;
}

.btnStyle3 .imgBtn {
    width: 39px;
    height: 39px;
    border-color: #fff;
    background: #fff;
    flex: none;
}

.btnStyle3:hover .txtBtn {
    color: #fff;
    background: var(--colorMain);
}

.btnStyle3:hover .imgBtn {
    background: var(--colorMain);
    transform: rotate(45deg);
}

.btnStyle3:hover svg * {
    stroke: #fff;
}


/*header*/

.wrapHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    padding: 30px 0 6px;
    position: relative;
}

.wrapHeader:before {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    content: '';
    height: 2px;
    width: 1200px;
    background: linear-gradient(to right, rgba(36, 168, 224, 0), rgba(36, 168, 224, 1), rgba(36, 168, 224, 0));
}

.wrapHeader ul {
    display: flex;
    justify-content: center;
    gap: 20px;
    align-items: center;
    text-align: center;
}

.wrapHeader ul a {
    color: var(--colorTxt);
    font-weight: 400;
}

.wrapHeader .infoBlock {
    display: flex;
    justify-content: center;
    gap: 10px;
    align-items: center;
}

.wrapHeader .phones {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 30px;
    background: url(../images/iconPhone.svg) no-repeat left center;
}

.wrapHeader .phones a {
    font-size: 12px;
    color: var(--colorTxt);
}

.wrapHeader .navBlock {
    font-size: 12px;
    color: var(--colorTxt);
    padding-left: 30px;
    background: url(../images/iconNav.svg) no-repeat left center;
}


/*End header*/


/*topBannerBlock*/

.topBannerBlock {
    padding: 30px 0 10px;
}

.wrapTB {
    display: flex;
    justify-content: space-between;
    padding-right: 290px;
    background: url(../images/wrapTBBg.svg) no-repeat right bottom;
    padding-block: 10px;
    border-radius: 20px;
}

.wrapTB .txtBlock {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

.wrapTB .name {
    font-size: 30px;
    font-weight: 500;
    line-height: 44px;
    margin-bottom: 15px;
}

.wrapTB .name .decLine {
    display: inline-block;
    position: relative;
}

.wrapTB .name .decLine:before {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 330px;
    height: 11px;
    content: '';
    bottom: -11px;
    background: url(../images/decLineTN.svg) no-repeat center/contain;
}

.wrapTB .txtBlock .txt {
    line-height: 1.3;
    letter-spacing: -0.16px;
}

.wrapTB .btnStyle2 {
    margin-top: 60px;
}

.wrapTB .rightInfo {
    display: flex;
    flex-direction: column;
    gap: 9px;
    width: 375px;
    flex: none;
    position: relative;
}

.wrapTB .rightInfo:before {
    position: absolute;
    content: url(../images/tbDec.svg);
    left: -46px;
    bottom: -47px;
}

.wrapTB .topInfoTB {
    display: inline-flex;
    padding: 21px 20px;
    align-items: center;
    gap: 10px;
    border-radius: 12px;
    background: #FFF;
    box-shadow: 0px 10px 3px 0px rgba(0, 0, 0, 0.00), 0px 6px 2px 0px rgba(0, 0, 0, 0.01), 0px 3px 2px 0px rgba(0, 0, 0, 0.05), 0px 2px 2px 0px rgba(0, 0, 0, 0.09), 0px 0px 1px 0px rgba(0, 0, 0, 0.10);
}

.wrapTB .num {
    font-size: 25px;
    font-weight: 500;
    white-space: nowrap;
}

.wrapTB .topInfoTB .txt {
    font-size: 18px;
    letter-spacing: -0.36px;
    line-height: 1.1;
}

.wrapTB .lastCondBlock {
    border-radius: 12px;
    background: #FFF;
    box-shadow: 0px 10px 3px 0px rgba(0, 0, 0, 0.00), 0px 6px 2px 0px rgba(0, 0, 0, 0.01), 0px 3px 2px 0px rgba(0, 0, 0, 0.05), 0px 2px 2px 0px rgba(0, 0, 0, 0.09), 0px 0px 1px 0px rgba(0, 0, 0, 0.10);
    padding: 20px;
}

.wrapTB .topLine {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    align-items: center;
    margin-bottom: 15px;
}

.wrapTB .topLine .txt {
    color: #8F8F8F;
    leading-trim: both;
    text-edge: cap;
    font-size: 12px;
}

.wrapTB .topLine .callback-toggle {
    leading-trim: both;
    cursor: pointer;
    text-edge: cap;
    font-size: 13px;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    padding: 10px;
    line-height: 1;
    border: 1px solid var(--colorTxt);
    transition: all 0.4s;
}

.wrapTB .topLine .callback-toggle:hover {
    background: #000;
    color: #fff;
}

.wrapTB .tableInfo {
    display: grid;
    grid-template-columns: auto 150px;
    grid-gap: 10px;
    font-size: 12px;
}

.wrapTB .thNuc {
    padding-block: 5px;
    border-bottom: 1px solid var(--colorTxt);
    margin-bottom: 5px;
    font-weight: 500;
}

.wrapTB .thNuc:nth-child(even) {
    text-align: right;
}

.wrapTB .tdNuc {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.wrapTB .tdNuc:nth-child(even) {
    text-align: right;
    justify-content: flex-end;
}

.wrapTB .color1:before {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #C3E9FA;
    content: '';
    display: inline-block;
    margin-right: 4px;
    flex: none;
}

.wrapTB .color2:before {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #8FE6B6;
    content: '';
    display: inline-block;
    margin-right: 4px;
}

.wrapTB .color3:before {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #F2DAED;
    content: '';
    display: inline-block;
    margin-right: 4px;
}


/*End topBannerBlock*/


/*preBlock*/

.preBlock {
    padding-bottom: 50px;
}

.wrapPreBlock {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.wrapPre {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.nucPre {
    display: flex;
}

.nucPre:nth-child(even) {
    flex-direction: row-reverse;
}

.nucPre .txt {
    flex: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 100px;
    border: 1px solid #E0DCDC;
    background: #FFF;
    box-shadow: 0px 10px 3px 0px rgba(0, 0, 0, 0.00), 0px 6px 2px 0px rgba(0, 0, 0, 0.01), 0px 3px 2px 0px rgba(0, 0, 0, 0.05), 0px 2px 2px 0px rgba(0, 0, 0, 0.09), 0px 0px 1px 0px rgba(0, 0, 0, 0.10);
    font-size: 18px;
    font-weight: 400;
    padding: 10px;
}

.nucPre .imgF {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    border: 1px solid #E0DCDC;
    background: #FFF;
    box-shadow: 0px 10px 3px 0px rgba(0, 0, 0, 0.00), 0px 6px 2px 0px rgba(0, 0, 0, 0.01), 0px 3px 2px 0px rgba(0, 0, 0, 0.05), 0px 2px 2px 0px rgba(0, 0, 0, 0.09), 0px 0px 1px 0px rgba(0, 0, 0, 0.10);
}

.wrapPreBlock .imgW img {
    max-width: 100%;
    border-radius: 20px;
    height: 100%;
    object-fit: cover;
}

.wrapPreBlock .formBlockTB {
    padding: 20px 24px;
    border-radius: 20px;
    background: var(--colorMain);
    max-width: 670px;
    color: #fff;
}

.wrapPreBlock form {
    display: grid;
    grid-template-columns: auto 370px;
    grid-gap: 10px 20px;
}

.wrapPreBlock .txtBlock {
    grid-row-start: span 3;
}

.wrapBtn {
    display: flex;
}

.wrapPreBlock .formBlockTB .name {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.36px;
    margin-bottom: 13px;
}

.wrapPreBlock .formBlockTB .txt {
    font-size: 12px;
    letter-spacing: -0.24px;
}

.wrapPreBlock input {
    padding: 10px 16px;
    background: none;
    border-radius: 50px;
    border: 1px solid #fff;
    letter-spacing: -0.32px;
}

.wrapPreBlock textarea {
    padding: 10px 16px;
    background: none;
    border-radius: 19px;
    border: 1px solid #fff;
    letter-spacing: -0.32px;
    width: 100%;
    height: 82px;
    resize: none;
}

.wrapPreBlock input::-webkit-input-placeholder {
    color: #fff;
}

.wrapPreBlock input:-ms-input-placeholder {
    color: #fff;
}

.wrapPreBlock input::-ms-input-placeholder {
    color: #fff;
}

.wrapPreBlock input::placeholder {
    color: #fff;
}

.wrapPreBlock textarea::-webkit-input-placeholder {
    color: #fff;
}

.wrapPreBlock textarea:-ms-input-placeholder {
    color: #fff;
}

.wrapPreBlock textarea::-ms-input-placeholder {
    color: #fff;
}

.wrapPreBlock textarea::placeholder {
    color: #fff;
}


/*End preBlock*/


/*makeTeamBlock*/

.makeTeamBlock {
    padding: 50px 0;
}

.makeTeamBlock .txtTitleBlock {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    max-width: 100%;
    width: 600px;
}

.makeTeamBlock .txtTitleBlock .h1 {
    margin-bottom: 35px;
}

.makeTeamBlock .txtTitleBlock .txt {
    letter-spacing: -0.16px;
    max-width: 340px;
}

.makeTeamBlock .txtTitleBlock .btnStyle2 {
    margin-top: 35px;
}

.wrapTeam {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-end;
    margin-top: -52px;
}

.nucTeam {
    border-radius: 20px;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
    gap: 10px;
    flex: 1;
    transition: all 0.4s;
    z-index: 1;
    position: relative;
    overflow: hidden;
}

.nucTeam .num {
    leading-trim: both;
    text-edge: cap;
    font-size: 40px;
    display: block;
    font-weight: 500;
}

.nucTeam .txtBlock {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: -0.18px;
    line-height: 1.1;
}

.nucTeam:before {
    position: absolute;
    inset: 0;
    content: '';
    z-index: -1;
    transition: all 0.4s;
}

.nucTeam:nth-child(1) {
    height: 370px;
    background: #062D24;
}

.nucTeam:nth-child(2) {
    height: 250px;
    background: #24A8E0;
}

.nucTeam:nth-child(2):before {
    background: url(../images/nucTeam2.jpg) no-repeat center/cover;
}

.nucTeam:nth-child(3) {
    height: 170px;
    background: #24A8E0;
}

.nucTeam:nth-child(4) {
    height: 250px;
    background: #24A8E0;
}

.nucTeam:nth-child(4):before {
    background: url(../images/nucTeam4.jpg) no-repeat center/cover;
}

.nucTeam:nth-child(5) {
    height: 370px;
    background: #24A8E0;
}

.nucTeam:nth-child(5):before {
    background: url(../images/nucTeam5.jpg) no-repeat center/cover;
}

.nucTeam:nth-child(5) {
    color: var(--colorTxt);
}

.nucTeam:hover {
    box-shadow: 9px 80px 23px 0px rgba(0, 0, 0, 0.00), 6px 51px 21px 0px rgba(0, 0, 0, 0.01), 3px 29px 17px 0px rgba(0, 0, 0, 0.05), 1px 13px 13px 0px rgba(0, 0, 0, 0.09), 0px 3px 7px 0px rgba(0, 0, 0, 0.10);
    background: #24A8E0;
    color: #fff;
}

.nucTeam:hover:before {
    opacity: 0;
}


/*End makeTeamBlock*/


/*whyWeBlock*/

.whyWeBlock {
    padding: 50px 0;
}

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

.wrapWhyWe {
    margin-bottom: 15px;
    position: relative;
}

.wrapWhyWe:after {
    clear: both;
    display: table;
    content: '';
}


/*sly*/


/* Frame */

.frame {
    overflow: hidden;
}

.frame ul {
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
    font-size: 50px;
}

.frame ul li {
    float: left;
    width: 227px;
    height: 100%;
    margin: 0 1px 0 0;
    padding: 0;
    background: #333;
    color: #ddd;
    text-align: center;
    cursor: pointer;
}

.frame ul li.active {
    color: #fff;
    background: #a03232;
}


/* Scrollbar */

#basic {}

.scrollbar {
    height: 4px;
    background: #fff;
    line-height: 0;
    border-radius: 10px;
}

.scrollbar .handle {
    width: 100px;
    height: 200%;
    background: #808080;
    cursor: pointer;
    border-radius: 10px;
    position: relative;
    top: -2px;
}

.scrollbar .handle .mousearea {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 100%;
    height: 20px;
}

.nucWW {
    width: 280px;
    height: 150px;
    padding: 20px;
    border-radius: 20px;
    background: #FDFDFD;
    overflow: hidden;
    position: relative;
    float: left;
    margin-right: 20px;
}

.nucWW .name {
    letter-spacing: -0.16px;
    position: relative;
    z-index: 5;
}

.nucWW .num {
    color: #3AB1E4;
    leading-trim: both;
    text-edge: cap;
    font-size: 120px;
    font-weight: 500;
    position: absolute;
    right: 6px;
    bottom: -24px;
    z-index: 2;
    line-height: 1;
}

.nucWW .imgDec {
    position: absolute;
    left: 0;
    bottom: 0;
    line-height: 0;
}


/*End whyWeBlock*/


/*recruitmentBlock*/

.recruitmentBlock {
    padding: 50px 0;
}

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

.recruitmentBlock .tabsLine {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
    border-radius: 20px;
    background: #F3FFFF;
    padding: 4px;
    margin-bottom: 20px;
}

.tabsLine li {
    border-radius: 31px;
    border: 1px solid #FFF;
    background: #FFF;
    box-shadow: 0px 2px 2.1px 0px rgba(0, 0, 0, 0.10) inset;
    padding: 5px 20px;
    text-align: center;
    flex: auto;
}

.tabsLine li:not(.active):hover {
    background: #fff;
    box-shadow: none;
}

.tabsLine li:not(.active) {
    cursor: pointer;
}

.tabsLine li.active {
    background: #FDFDFD;
    box-shadow: 0px 10px 3px 0px rgba(0, 0, 0, 0.00), 0px 6px 2px 0px rgba(0, 0, 0, 0.01), 0px 3px 2px 0px rgba(0, 0, 0, 0.05), 0px 2px 2px 0px rgba(0, 0, 0, 0.09), 0px 0px 1px 0px rgba(0, 0, 0, 0.10);
}

.contentTab {
    display: none;
}

.contentTab.active {
    display: block;
}

.nucIndustry {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-decoration: none;
    padding: 20px;
    height: 130px;
    border-radius: 20px;
    border: 1px solid #E0DCDC;
    background: #FDFDFD;
    transition: all 0.4s;
}

.wrapIndustry {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 20px;
}

.nucIndustry .name {
    display: block;
    font-size: 18px;
    font-weight: 500;
    color: #062D24;
    letter-spacing: -0.18px;
    transition: all 0.4s;
}

.nucIndustry .wrapDecIcon {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.nucIndustry .wrapDecIcon:before {
    content: 'Оставить заявку';
    color: #7F7F7F;
    display: block;
    opacity: 0;
    transition: all 0.4s;
    margin-top: -4px;
}

.nucIndustry:hover .wrapDecIcon:before {
    color: #fff;
    opacity: 1;
}

.nucIndustry svg * {
    stroke: #7F7F7F;
}

.nucIndustry:hover {
    text-decoration: none;
    background: var(--colorMain);
    box-shadow: 9px 80px 23px 0px rgba(0, 0, 0, 0.00), 6px 51px 21px 0px rgba(0, 0, 0, 0.01), 3px 29px 17px 0px rgba(0, 0, 0, 0.05), 1px 13px 13px 0px rgba(0, 0, 0, 0.09), 0px 3px 7px 0px rgba(0, 0, 0, 0.10);
}

.nucIndustry:hover svg {
    transform: rotate(45deg);
}

.nucIndustry:hover svg * {
    stroke: #fff;
}

.nucIndustry:hover .name {
    color: #fff;
}


/*End recruitmentBlock*/


/*selectPersonalBlock*/

.selectPersonalBlock {
    padding: 50px 0;
}

.wrapSelectPers {
    border-radius: 20px;
    background: linear-gradient(0deg, #F3FFFF 0%, #F3FFFF 100%), #D9D9D9;
    padding: 40px 30px 0;
    position: relative;
    overflow: hidden;
}


/* .wrapSelectPers:before {
    position: absolute;
    right: 45px;
    top: 30px;
    content: '';
    width: 700px;
    height: 340px;
    background: url(../images/selectPersonalLogo.svg) no-repeat center/contain;
} */

.selectPersonalBlock .txtBlock {
    margin-top: -20px;
    position: relative;
    z-index: 5;
    font-size: 18px;
    max-width: 100%;
    width: 775px;
}

.selectPersonalBlock .txtBlock:before {
    position: absolute;
    content: url(../images/selectPersonalTxt.svg);
    left: calc(100% + 15px);
    top: -15px;
}

.selectPersonalBlock .txt {
    margin-bottom: 20px;
}

.selectPersonalBlock .txt400 {
    font-weight: 400;
}

.scheduleWrap {
    display: flex;
    justify-content: space-between;
    gap: 29px;
    align-items: flex-end;
    margin-top: -50px;
}

.scheduleWrap .nucSchedule {
    flex: 1;
    border-radius: 20px 20px 0px 0px;
    background: linear-gradient(180deg, #D5F0FD 0%, #9BDDF9 100%);
    box-shadow: 0px 2px 2.1px 0px rgba(0, 0, 0, 0.10) inset, 0px 2px 2.1px 0px rgba(0, 0, 0, 0.10) inset;
    transition: all 0.4s;
    padding: 35px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    cursor: pointer;
}

.scheduleWrap .nucSchedule:hover {
    background: linear-gradient(180deg, #8FD3F1 0%, #4CB8E7 100%);
}

.nucSchedule .num {
    color: #FDFDFD;
    leading-trim: both;
    text-edge: cap;
    font-size: 80px;
    font-weight: 500;
}

.nucSchedule .infoWrap {
    position: absolute;
    left: 20px;
    top: -16px;
    z-index: 2;
}

.nucSchedule .name {
    display: flex;
    padding: 5px 10px;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    border-radius: 31px;
    border: 1px solid #FDFDFD;
    background: #EEE;
    position: relative;
    z-index: 2;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.4s;
    box-shadow: 0px 2px 2.1px 0px rgba(0, 0, 0, 0.10) inset, 0px 2px 2.1px 0px rgba(0, 0, 0, 0.10) inset;
}

.nucSchedule .name:before {
    display: inline-block;
    content: '';
    background: linear-gradient(180deg, #8FD3F1 0%, #4CB8E7 100%);
    width: 15px;
    height: 15px;
    border-radius: 50%;
    transition: all 0.4s;
}

.nucSchedule .txtInfo {
    position: absolute;
    left: 0;
    top: 0;
    width: 280px;
    border-radius: 15px;
    background: #FFF;
    box-shadow: 0px 10px 3px 0px rgba(0, 0, 0, 0.00), 0px 6px 2px 0px rgba(0, 0, 0, 0.01), 0px 3px 2px 0px rgba(0, 0, 0, 0.05), 0px 2px 2px 0px rgba(0, 0, 0, 0.09), 0px 0px 1px 0px rgba(0, 0, 0, 0.10);
    padding: 40px 10px 10px;
    font-size: 14px;
    opacity: 0;
    display: none;
    transition: all 0.4s;
}

.nucSchedule:last-child .txtInfo {
    left: auto;
    right: 0;
}

.nucSchedule:hover .infoWrap .txtInfo {
    display: block;
    opacity: 1;
}

.nucSchedule:hover .infoWrap .name {
    background: #C3E9FA;
    color: #24A8E0;
}

.nucSchedule:hover .infoWrap .name:before {
    background: linear-gradient(180deg, #8FD3F1 0%, #4CB8E7 100%);
}

.nucSchedule:nth-child(1) {
    height: 190px;
}

.nucSchedule:nth-child(2) {
    height: 245px;
}

.nucSchedule:nth-child(3) {
    height: 290px;
}

.nucSchedule:nth-child(4) {
    height: 340px;
}

.nucSchedule:nth-child(5) {
    height: 390px;
}

.nucSchedule:nth-child(6) {
    height: 450px;
}

.nucSchedule:nth-child(7) {
    height: 520px;
}


/*End selectPersonalBlock*/


/*formBlock*/

.formBlock {
    padding: 135px 0 50px;
}

.formBlock .wrapForm {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-radius: 20px;
    background: #C3E9FA;
    box-shadow: 0px 2px 2.1px 0px rgba(0, 0, 0, 0.10) inset, 0px 2px 2.1px 0px rgba(0, 0, 0, 0.10) inset;
    padding: 30px;
    gap: 30px;
}

.formBlock form {
    flex: none;
    width: 610px;
    border-radius: 50px;
    border: 1px solid #E0DCDC;
    background: #FDFDFD;
    box-shadow: 0px 10px 3px 0px rgba(0, 0, 0, 0.00), 0px 6px 2px 0px rgba(0, 0, 0, 0.01), 0px 3px 2px 0px rgba(0, 0, 0, 0.05), 0px 2px 2px 0px rgba(0, 0, 0, 0.09), 0px 0px 1px 0px rgba(0, 0, 0, 0.10);
    padding: 30px;
    display: grid;
    grid-template-columns: 267px auto;
    grid-gap: 10px 15px;
    margin-top: -120px;
}

.formBlock form input {
    padding: 20px;
    border-radius: 50px;
    letter-spacing: -0.32px;
    border: 1px solid #FDFDFD;
    background: #EEE;
    box-shadow: 0px 2px 2.1px 0px rgba(0, 0, 0, 0.10) inset;
}

.formBlock form textarea {
    padding: 20px 16px;
    ;
    letter-spacing: -0.32px;
    width: 100%;
    height: 206px;
    resize: none;
    border: 1px solid #FDFDFD;
    background: #EEE;
    box-shadow: 0px 2px 2.1px 0px rgba(0, 0, 0, 0.10) inset;
    border-radius: 31px;
    grid-row-start: 1;
    grid-row-end: 4;
    grid-column-start: 2;
}

.formBlock form .wrapLabel span,
.formBlock form .wrapLabel span a {
    color: var(--colorTxt);
}

.formBlock form .wrapLabel span:before {
    border-color: var(--colorTxt);
}

.formBlock form .wrapLabel span:after {
    background: var(--colorTxt);
}

.formBlock .txtBlock {
    color: #24A8E0;
}

.formBlock .txtBlock .h1 {
    margin-bottom: 20px;
}

.formBlock .txtBlock .txt {
    line-height: 1.35;
}


/*End formBlock*/


/*footer*/

footer {
    margin-top: 100px;
    border-radius: 30px 30px 0px 0px;
    background: #24A8E0;
    box-shadow: 0px -56px 16px 0px rgba(0, 0, 0, 0.00), 0px -36px 14px 0px rgba(0, 0, 0, 0.01), 0px -20px 12px 0px rgba(0, 0, 0, 0.05), 0px -9px 9px 0px rgba(0, 0, 0, 0.09), 0px -2px 5px 0px rgba(0, 0, 0, 0.10);
    color: #fff;
}

.wrapFooter {
    padding: 40px 0;
}

.topLineFooter {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.topLineFooter .leftCol {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.topLineFooter .logo {
    display: inline-block;
}

.topLineFooter .slog {
    letter-spacing: -0.16px;
    line-height: 1.35;
}

.topLineFooter .btnStyle3 {
    margin-top: 50px;
}

.topLineFooter .socBlock {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.topLineFooter ul {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.topLineFooter ul a {
    font-size: 18px;
    font-weight: 400;
    color: #fff;
}

.topLineFooter .infoCol {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    font-size: 18px;
    font-weight: 400;
}

.topLineFooter .phones {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.topLineFooter .phones a {
    color: #fff;
}

.topLineFooter .toTopBtn {
    display: flex;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid #C3E9FA;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.botLineFooter {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding-top: 32px;
    margin-top: 30px;
    position: relative;
    color: #fff;
    align-items: center;
    font-size: 14px;
    letter-spacing: -0.14px;
    line-height: 1.5;
}

.botLineFooter:before {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 1200px;
    content: '';
    top: 0;
    height: 2px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

.botLineFooter .links {
    display: flex;
    justify-content: center;
    gap: 20px;
    align-items: center;
}

.botLineFooter .links a {
    color: #fff;
}

.botLineFooter .copyright {
    opacity: 0.5;
}

.botLineFooter .copyright a {
    color: #fff;
}


/*End footer*/


/*modalF*/

.modalF.callback-modal {
    max-width: 750px;
    width: 90%;
    padding: 30px;
    background: url(../images/bgModal.svg) no-repeat center bottom, #24A8E0;
}

.modalF .nameModal {
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: 44px;
    color: #fff;
    margin-bottom: 30px;
}

.modalF form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
}

.modalF form textarea {
    grid-row-start: 1;
    grid-row-end: 3;
    grid-column-start: 2;
    padding: 10px 16px;
    background: none;
    border-radius: 19px;
    border: 1px solid #fff;
    letter-spacing: -0.32px;
    width: 100%;
    resize: none;
    color: #fff;
}

.mfp-close-btn-in .modalF .mfp-close {
    color: #fff;
    font-size: 30px;
}

.modalF form input {
    padding: 10px 16px;
    background: none;
    border-radius: 50px;
    border: 1px solid #fff;
    letter-spacing: -0.32px;
    color: #fff;
}


/*End modalF*/


/*insidepage*/

.insidepage header {
    margin-bottom: 25px;
}

.insidepage .component {
    padding-bottom: 40px;
}

.breadcrumbs {
    padding: 20px 0;
}

.breadcrumbs ol {
    list-style-type: none;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding-left: 0;
}

.breadcrumbs .float-start {
    display: none;
}

.breadcrumbs .breadcrumb-item:not(.active)::after {
    content: ">";
    padding: 0 5px;
    color: #000;
}

.breadcrumbs .breadcrumb-item:not(.active) a {
    color: #000;
    font-size: 16px;
}

.breadcrumbs .breadcrumb-item {
    color: #24A8E0;
    font-size: 16px;
}

.insidepage .component ul {
    list-style-type: disc;
    padding-left: 35px;
}

.nucPrice {
    border-radius: 30px;
    border: 5px solid #24A8E0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    gap: 20px;
}

.wrapPrice {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 84px;
}

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

.nucPrice .imgW {
    border-radius: 10px;
    overflow: hidden;
}

.nucPrice .topPrice .title {
    color: #000;
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    margin-top: 10px;
}

.nucPrice .rPrice .title {
    color: #8F8F8F;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
}

.nucPrice .botPrice {
    display: flex;
    gap: 25px;
    justify-content: space-between;
}

.nucPrice .price {
    color: #21A8E0;
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    margin-top: 10px;
}

.nucPrice .btnStyle2 .txtBtn {
    padding: 0 20px;
    height: 100%;
}

.wrapPriceBlock {
    margin: 35px 0;
}


/*End insidepage*/


/* --- Media styles --- */

@media screen and (min-width:992px) {
    .wrapper {
        padding-top: 90px;
    }
    header {
        position: fixed;
        top: 0;
        width: 100%;
        left: 0;
        transition: all 0.4s;
        z-index: 50;
    }
    header.fix {
        background: #fff;
    }
}

@media screen and (min-width:1250px) {
    .wrapper .container {
        width: 1240px;
    }
}

@media screen and (min-width:1400px) {
    .wrapper .container {
        width: 1390px;
    }
}

@media screen and (max-width:1399px) {
    .wrapTB {
        padding-right: 220px;
        background-position: calc(100% + 70px) center;
    }
    .wrapPreBlock .formBlockTB {
        max-width: 600px;
    }
    .wrapPreBlock form {
        grid-template-columns: auto 315px;
    }
    .scheduleWrap {
        padding-right: 30px;
    }
    .wrapPrice {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }
}

@media screen and (max-width:1249px) {
    .nucSchedule .infoWrap {
        left: 10px;
    }
    .formBlock .wrapForm {
        padding: 15px;
    }
    .formBlock form {
        width: 605px;
    }
    .formBlock {
        padding: 60px 0 50px;
    }
    .formBlock .txtBlock .txt {
        line-height: 1.15;
    }
    .wrapHeader ul {
        gap: 10px;
    }
    .wrapHeader {
        gap: 10px;
    }
    .wrapHeader .infoBlock {
        gap: 10px;
    }
    .wrapHeader .phones,
    .wrapHeader .navBlock {
        padding-left: 25px;
    }
    .logo svg,
    .logo img {
        max-width: 100%;
    }
    header .logo {
        width: 220px;
    }
}

@media screen and (max-width:1199px) {
    .wrapYp {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    .wrapYp iframe {
        max-width: 100%;
    }
    .wrapTB {
        padding-right: 40px;
        background-position: calc(100% + 240px) center;
    }
    .wrapTB .rightInfo::before {
        display: none;
    }
    .wrapPreBlock>.imgW {
        display: none;
    }
    .wrapHeader .infoBlock {
        flex-direction: column;
        gap: 5px;
        align-items: flex-start;
    }
    .wrapHeader {
        padding: 15px 0 6px;
    }
    .wrapHeader::before {
        width: 800px;
    }
    .makeTeamBlock,
    .whyWeBlock,
    .recruitmentBlock,
    .selectPersonalBlock,
    .formBlock {
        padding: 30px 0;
    }
    footer {
        margin-top: 50px;
    }
    .nucTeam {
        padding: 20px 10px;
    }
    .wrapTeam {
        gap: 10px;
    }
    .nucTeam .num {
        font-size: 30px;
    }
    .nucTeam .txtBlock {
        font-size: 16px;
    }
    .tabsLine li {
        flex: none;
    }
    .wrapIndustry {
        grid-template-columns: repeat(4, 1fr);
    }
    .scheduleWrap {
        gap: 10px;
        margin-top: -20px;
        padding-right: 40px;
    }
    .scheduleWrap .nucSchedule {
        padding: 15px;
    }
    .nucSchedule:nth-child(1) {
        height: 110px;
    }
    .nucSchedule:nth-child(2) {
        height: 165px;
    }
    .nucSchedule:nth-child(3) {
        height: 210px;
    }
    .nucSchedule:nth-child(4) {
        height: 260px;
    }
    .nucSchedule:nth-child(5) {
        height: 310px;
    }
    .nucSchedule:nth-child(6) {
        height: 370px;
    }
    .nucSchedule:nth-child(7) {
        height: 440px;
    }
    .formBlock form {
        margin-top: 0;
    }
    .formBlock .wrapForm {
        padding: 25px;
        flex-direction: column;
        align-items: center;
    }
    .topLineFooter .socBlock {
        gap: 10px;
    }
    .topLineFooter ul {
        gap: 10px;
    }
    .topLineFooter {
        gap: 10px;
    }
    .topLineFooter ul a,
    .topLineFooter .infoCol {
        font-size: 16px;
    }
    .topLineFooter .toTopBtn {
        width: 44px;
        height: 44px;
    }
}

.btnMain {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    height: 20px;
    width: 30px;
}

.btnMain .line {
    width: 100%;
    height: 2px;
    background: var(--colorMain);
}

.closeMain {
    display: none;
    position: absolute;
    right: 10px;
    top: 0;
    line-height: 1;
    font-size: 40px;
    color: #fff;
}

@media screen and (max-width:991px) {
    .wrapPrice {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .btnMain {
        display: flex;
    }
    .closeMain {
        display: block;
    }
    .wrapHeader ul {
        display: block;
        height: 100%;
        overflow: auto;
    }
    .wrapHeader ul li {
        margin-bottom: 15px;
    }
    .wrapHeader ul a {
        color: #fff;
    }
    .mainBlock {
        display: none;
        position: fixed;
        inset: 0;
        background: var(--colorMain);
        z-index: 500;
        padding: 50px 0 70px;
    }
    .activeMain .mainBlock {
        display: block;
    }
    .activeMain {
        overflow: hidden;
    }
    .wrapHeader>.infoBlock {
        display: none;
    }
    .wrapTB .rightInfo {
        width: 330px;
    }
    .wrapTB {
        padding-right: 0;
        background-position: calc(100% + 330px) center;
        gap: 15px;
    }
    .wrapPreBlock {
        flex-direction: column;
    }
    .wrapPreBlock .formBlockTB {
        max-width: 100%;
    }
    .wrapPre {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 5px 10px;
    }
    .makeTeamBlock,
    .whyWeBlock,
    .recruitmentBlock,
    .selectPersonalBlock,
    .formBlock {
        padding: 20px 0;
    }
    footer {
        margin-top: 40px;
    }
    .h1,
    h1 {
        font-size: 30px;
        margin: 0 0 30px;
    }
    .nucTeam:nth-child(n) {
        height: auto;
        min-width: 250px;
        min-height: 150px;
    }
    .wrapTeam {
        flex-wrap: wrap;
        align-items: normal;
        margin-top: 30px;
    }
    .wrapIndustry {
        grid-template-columns: repeat(3, 1fr);
    }
    .scheduleWrap {
        flex-direction: column;
        gap: 15px;
        align-items: normal;
        padding-right: 0;
        margin-top: 35px;
    }
    .scheduleWrap .nucSchedule {
        display: flex;
        justify-content: flex-start;
        gap: 15px;
        flex-direction: row;
        border-radius: 20px;
    }
    .nucSchedule .txtInfo {
        display: block;
        opacity: 1;
        position: static;
        width: auto;
    }
    .nucSchedule .name {
        position: absolute;
        left: 0;
        top: 0;
    }
    .nucSchedule .infoWrap {
        position: relative;
        inset: 0;
    }
    .nucSchedule:nth-child(n) {
        height: auto;
    }
    footer .mainCol {
        display: none;
    }
    .botLineFooter .links {
        flex-direction: column;
        align-items: center;
        gap: 0px;
    }
    .botLineFooter {
        gap: 10px;
        padding-top: 22px;
        margin-top: 20px;
    }
    .btnStyle3 .txtBtn,
    .btnStyle2 .txtBtn,
    .btnStyle1 .txtBtn {
        padding: 0 15px;
    }
    .topLineFooter .leftCol {
        width: 225px;
    }
    .topLineFooter .leftCol svg {
        max-width: 100%;
    }
    .nucTeam:nth-child(5) {
        color: #fff;
    }
    .nucTeam:nth-child(5) {
        background: #062d24;
    }
    .nucTeam:nth-child(5)::before {
        display: none;
    }
    .wrapSelectPers {
        padding: 20px;
    }
    .wrapTB {
        background: none;
        flex-direction: column;
        gap: 30px;
        align-items: center;
    }
    .wrapTB .btnStyle2 {
        margin-top: 20px;
    }
}

@media screen and (max-width:767px) {
    .modalF form {
        grid-template-columns: repeat(1, 1fr);
    }
    .modalF .nameModal {
        font-size: 22px;
        line-height: 1;
    }
    .modalF.callback-modal {
        padding: 15px;
    }
    .modalF form textarea {
        grid-row-start: 3;
        grid-row-end: 3;
        grid-column-start: 1;
        height: 100px;
    }
    .wrapIndustry {
        grid-template-columns: repeat(2, 1fr);
    }
    .formBlock form {
        max-width: 100%;
        border-radius: 20px;
        padding: 15px;
        grid-template-columns: 235px auto;
    }
    .formBlock form textarea {
        border-radius: 15px;
    }
    .topLineFooter .infoCol {
        display: none;
    }
    .botLineFooter {
        flex-direction: column;
    }
    .formBlock form input {
        padding: 15px;
    }
    .formBlock form textarea {
        height: 108px;
    }
    .selectPersonalBlock .txt,
    .selectPersonalBlock .txtBlock {
        font-size: 16px;
    }
    .makeTeamBlock .txtTitleBlock .btnStyle2 {
        margin-top: 20px;
    }
    .topBannerBlock {
        padding: 0;
    }
}

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

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

@media screen and (max-width:600px) {
    header .logo {
        width: 110px;
    }
    .wrapTB .rightInfo {
        max-width: 100%;
    }
    .wrapPre {
        grid-template-columns: repeat(1, 1fr);
    }
    .wrapPreBlock form {
        grid-template-columns: 1fr;
    }
    .h1,
    h1 {
        font-size: 24px;
        margin: 0 0 25px;
    }
    .makeTeamBlock .txtTitleBlock .h1 {
        margin-bottom: 25px;
    }
    .nucIndustry {
        padding: 15px;
    }
    .nucIndustry .name {
        font-size: 14px;
    }
    .nucSchedule .num {
        font-size: 45px;
    }
    .nucSchedule .name {
        white-space: normal;
    }
    .nucSchedule .name::before {
        flex: none;
    }
    .nucSchedule .txtInfo {
        padding-top: 45px;
    }
    .scheduleWrap .nucSchedule {
        padding: 10px;
    }
    .formBlock form {
        grid-template-columns: 1fr;
    }
    .formBlock form textarea {
        grid-row-start: 4;
        grid-row-end: 4;
        grid-column-start: 1;
    }
    .formBlock .wrapForm {
        padding: 10px;
    }
    .topLineFooter {
        flex-direction: column;
    }
    .colToTop {
        display: none;
    }
    .topLineFooter .btnStyle3 {
        margin-top: 15px;
        margin-bottom: 15px;
    }
    .botLineFooter {
        width: 100%;
    }
    .topLineFooter .socBlock {
        justify-content: flex-start;
    }
    .wrapTB .tableInfo {
        grid-template-columns: auto 95px;
    }
    .wrapIndustry {
        grid-gap: 10px;
    }
}

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

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

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

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