/*! Common
---------------------
 */
.main:has(.hr-page) {
    position:relative;
}

.hr-page {
    max-width:1024px;
    padding:0 20px;
    margin:0 auto;
}

.hr-page h1,
.hr-page h2,
.hr-page h3 {
    font-weight:bold;
    margin:0 0 24px;
    line-height:1.1;
    padding:0;
}

h1.hr-page__title {
    color:#000;
    font-size:42px;
}

h2.hr-page__title {
    font-size:32px;
}

h3.hr-page__title {
    font-size:26px;
}

.hr-page__section {
    display:flex;
    justify-content:space-between;
    margin:0 0 48px;
}

.hr-page__content {
    width:calc(100% - 368px);
}

.hr-page__sidebar {
    flex:none;
    width:320px;
    padding:48px 0 0;
}

.hr-page__desc {
    font-size:16px;
    line-height:1.35;
}

.hr-page__desc:not(:last-child) {
    margin:0 0 32px;
}

.hr-page__desc p {
    margin:0;
}

.hr-page__desc p:not(:last-child) {
    margin:0 0 16px;
}

.hr-page__desc ul {
    margin-top:10px;
}

.hr-page__button {
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    text-transform:uppercase;
    background:#428bca;
    height:46px;
    text-decoration:none !important;
    transition:.3s ease-out;
    border-radius:5px;
}

.hr-page__button_secondary {
    border:1px solid #428bca;
    background:#94d45b;
}

.hr-page__button:hover {
    opacity:.7;
}




/*! Hero
---------------------
 */
.hr-page__hero {
    margin:0 0 64px;
    padding:64px 0;
}

.hr-page__hero-block {
    position:relative;
    z-index:2;
}

.hr-page__hero-bg {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:linear-gradient(to right, #d2eaff, #b7ecfe);
    pointer-events:none;
}

.hr-page__hero-bg:before {
    position:absolute;
    left:0;
    bottom:0;
    width:242px;
    height:344px;
    content:'';
    background:url('../../assets/imgs/hero-bg-l.jpg') no-repeat;
}

.hr-page__hero-bg:after {
    position:absolute;
    top:0;
    right:0;
    width:319px;
    height:95px;
    content:'';
    background:url('../../assets/imgs/hero-bg-r.jpg') no-repeat;
}

.hr-page__hero .hr-page__desc {
    font-size:19px;
    line-height:1.5;
}



/*! Fiches
---------------------
 */
.hr-page__fiches {
    display:flex;
    gap:20px;
    margin:32px 0 0;
}

.hr-page__fiches-item {
    flex:1;
    padding:15px;
    background:rgba(255,255,255,.8);
    border-radius:10px;
}

.hr-page__fiches-title {
    display:flex;
    gap:12px;
    align-items:center;
    margin:0 0 12px;
    font-size:16px;
}

.hr-page__fiches-title svg {
    flex:none;
}

.hr-page__fiches-desc {
    font-size:14px;
    font-weight:bold;
}




/*! Alarm
---------------------
 */
.hr-page__alarm {
    background:#e1f0fd;
    border:1px solid #8392b4;
    margin:24px 0 0;
    color:#000;
    font-size:16px;
    line-height:1.35;
    border-radius:15px;
    padding:24px;
}

.hr-page__alarm strong {
    display:table;
    padding:6px 34px;
    background:rgba(255,255,255,.6);
    border-radius:35px;
    color:rgb(66, 91, 145);
    margin:0 0 14px;
    font-size:15px;
}

.hr-page__alarm ul li {
    color:#000;
}




/*! Sale Block
---------------------
 */
.hr-page__sale {
    position:sticky;
    top:20px;
    border:1px solid rgb(206, 233, 251);
    padding:15px;
    border-radius:15px;
    background:#fff;
    display:flex;
    gap:24px;
    flex-direction:column;
}

.hr-page__sale-head {
    flex:none;
    background:#1078db;
    padding:5px 10px 10px;
    border-radius:10px;
}

.hr-page__sale-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.hr-page__sale-value {
    background:rgba(255,255,255,.5);
    border-radius:35px;
    height:34px;
    font-size:16px;
    display:flex;
    align-items:center;
    padding:0 12px;
    font-weight:bold;
    justify-content:center;
}

.hr-page__sale-title {
    font-size:18px;
    color:#fff;
}

.hr-page__sale-timer {
    background:#fff;
    border-radius:35px;
    height:24px;
    font-size:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#000;
    margin:2px 0 0;
}

.hr-page__sale-content {
    flex:auto;
    min-height:170px;
}

.hr-page__sale-buttons {
    flex:none;
    margin:auto 0 0;
    display:flex;
    flex-direction:column;
    gap:12px;
}




/*! Programm
---------------------
 */
.hr-page__programm {
    margin:0 -24px 48px;
}

.hr-page__programm-block {
    padding:24px 48px;
    border-radius:15px;
    background:#d3eafc;
}

.hr-page__programm-block:not(:last-child) {
    margin:0 0 32px;
}

.hr-page__programm-block:nth-child(2n) {
    background:#eeeeee;
}

.hr-page__programm-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin:0 0 32px;
    gap:48px;
    text-align:center;
}

.hr-page__programm-date {
    font-weight:bold;
    color:#000;
    font-size:16px;
}

.hr-page__programm-title {
    font-size:24px;
    font-weight:bold;
}

.hr-page__programm-tag {
    height:46px;
    padding:0 18px;
    border-radius:35px;
    background:#fff;
    font-size:16px;
    text-transform:uppercase;
    font-weight:bold;
    display:flex;
    align-items:center;
}

.hr-page__programm-desc {
    margin:0 0 32px;
    font-size:16px;
    max-width:550px;
}

.hr-page__programm-quote {
    margin:0 -16px 32px;
    font-size:16px;
    padding:15px;
    border-radius:15px;
    border:1px solid #425b91;
}

.hr-page__programm-quote strong {
    color:#000;
    display:block;
}

.hr-page__programm-list {
    margin:0 -48px;
}

.hr-page__programm-item {
    border-bottom:1px solid #fff;
    padding:0 48px 16px;
    margin:0 0 16px;
}

.hr-page__programm-value {
    display:flex;
    align-items:center;
    font-size:16px;
    cursor:pointer;
    user-select:none;
    transition:.3s ease-out;
    font-weight:bold;
    color:#000;
    gap:16px;
    justify-content:space-between;
}

.hr-page__programm-value:hover {
    color:#425b91;
}

.hr-page__programm-value span {
    flex:none;
    margin:-10px 0 0;
    line-height:1;
    font-size:48px;
    transition:.3s ease-out;
    color:#425b91;
    font-weight:300;
}

.hr-page__programm-item_active .hr-page__programm-value span {
    transform:rotate(45deg);
}

.hr-page__programm-toggle {
    max-height:0;
    overflow:hidden;
    transition:max-height .3s ease-out;
}

.hr-page__programm-item_active .hr-page__programm-toggle {
    max-height:1000px;
    padding-top:16px;
}


/*! Important
---------------------
 */
.hr-page__important {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:32px;
}

.hr-page__important-item {
    border-radius:10px;
    background:#fafafa;
    aspect-ratio: 1;
	padding: 15px;
}



/*! Gallery
---------------------
 */
.hr-page__gallery {
    margin:0 -24px 48px;
    position:relative;
    padding:0 70px;
}

.hr-page__gallery-arrow {
    top:50%;
    position:absolute;
    transform:translateY(-50%);
    z-index:3;
    cursor:pointer;
    user-select:none;
}

.hr-page__gallery-arrow_prev {
    left:0;
}

.hr-page__gallery-arrow_prev svg {
    transform:rotate(90deg);
    transform-origin:center center;
}

.hr-page__gallery-arrow_next {
    right:0;
}

.hr-page__gallery .swiper {
    border-radius:15px;
    box-shadow:0 5px 15px rgba(0,0,0,.15);
    overflow:hidden;
}

.hr-page__gallery .swiper img {
    height:auto;
    display:block;
    width:100%;
}


/*! Steps
---------------------
 */
.hr-page__steps {
    margin:120px -120px 84px -64px;
    display:flex;
    grid-row-gap:48px;
    flex-wrap:wrap;
}

.hr-page__steps-item {
    width:25%;
}

.hr-page__steps-head {
    display:flex;
    gap:12px;
    align-items:center;
}

.hr-page__steps-head strong {
    flex:none;
    font-size:64px;
    text-shadow:0 3px 5px rgba(0,0,0,.4);
    font-weight:bold;
    line-height:1;
}

.hr-page__steps-title {
    color:#000;
    font-weight:bold;
    font-size:16px;
    padding:0 0 10px;
    border-bottom:2px solid currentColor;
}

.hr-page__steps-desc {
    margin:10px 0 0;
    font-size:17px;
    text-align:center;
}

.hr-page__steps-desc p {
    margin:0;
}

.hr-page__steps-desc p:not(:last-child) {
    margin:0 0 16px;
}

.hr-page__steps-separator {
    flex:none;
    margin:auto 5px;
}

.hr-page__steps-separator_3,
.hr-page__steps-separator_6 {
    display:none;
}



/*! Bonus
---------------------
 */
.hr-page__bonus {
    text-align:center;
    padding:20px;
    border-radius:15px;
    background:#cee9fb;
    border:1px solid #425b91;
    margin-top:-64px;
}

.hr-page__bonus-head {
    display:flex;
    gap:12px;
    align-items:center;
    margin:0 0 16px;
    font-size:16px;
    font-weight:bold;
    justify-content:center;
}

.hr-page__bonus-head svg {
    flex:none;
    width:80px;
    height:auto;
}

.hr-page__bonus-desc {
    font-size:16px;
    line-height:1.35;
}

.hr-page__bonus-arrow {
    display:flex;
    justify-content:flex-end;
    margin:5px 0;
}

.hr-page__bonus-arrow svg {
    transform:rotate(90deg);
    transform-origin:center center;
}


/*! Banner
---------------------
 */
.hr-page__banner {
    margin:48px -24px;
    border-radius:15px;
    min-height:300px;
    display:flex;
    align-items:center;
    justify-content:center;
}


/*! Courses
---------------------
 */
.hr-page__courses {
    display:flex;
    flex-direction:column;
    gap:12px;
}

.hr-page__courses-item {
    display:block;
    padding:12px 18px;
    font-size:16px;
    background:#f5f5f5;
    color:#000;
    text-decoration:none !important;
    transition:.3s ease-out;
}

.hr-page__courses-item:hover {
    opacity:.7;
}

.hr-page__courses-item:nth-child(2n) {
    background:#cee9fb;
}



/*! Recruit
---------------------
 */
.hr-page__recruit {
    display:flex;
    gap:24px;
    margin:0 0 48px;
    flex-direction:column;
}

.hr-page__recruit-item {
    padding:15px;
    width:100%;
    background:#f5f5f5;
    font-size:16px;
    border-radius:10px;
}

.hr-page__recruit-item strong {
    font-size:32px;
    line-height:1.1;
    display:block;
    margin:0 0 5px;
    font-weight:bold;
}




/*! Reviews
---------------------
 */
.hr-page__reviews {
    margin:0 0 48px;
}

.hr-page__reviews-top {
    display:flex;
    justify-content:space-between;
    gap:24px;
}

.hr-page__reviews-column {
    flex:1;
    font-size:16px;
}

.hr-page__reviews-column strong {
    font-size:40px;
    line-height:1.1;
    display:block;
    margin:0 0 10px;
    font-weight:bold;
}

.hr-page__reviews small {
    display:block;
    margin:24px 0 0;
    font-size:11px;
}

.hr-page__reviews-slider {
    margin:24px 0 0;
    background:rgb(236, 239, 241);
    padding:15px 15px 20px;
    border-radius:15px;
}

.hr-page__reviews-slider .swiper {
    margin:-15px;
    padding:15px;
}

.hr-page__reviews-head {
    background:#fff;
    padding:0 14px;
    box-shadow:0 5px 8px rgba(0,0,0,.2);
    margin:0 0 20px;
    border-radius:15px;
    display:flex;
    gap:32px;
    align-items:center;
    justify-content:space-between;
}

.hr-page__reviews-caption {
    padding:0 20px;
    height:30px;
    display:flex;
    align-items:center;
    gap:6px;
    font-size:16px;
    line-height:1;
    background:rgb(236, 239, 241);
    border-radius:30px;
}

.hr-page__reviews-arrows {
    display:flex;
    gap:10px;
    align-items:center;
}

.hr-page__reviews-arrow {
    cursor:pointer;
    user-select:none;
}

.hr-page__reviews-arrow_prev svg {
    transform:rotate(180deg);
    transform-origin:center center;
}

.hr-page__reviews-item {
    background:#fff;
    border-radius:15px;
    padding:20px;
    box-shadow:0 5px 8px rgba(0,0,0,.2);
}

.hr-page__reviews-user {
    min-height:30px;
    padding-left:42px;
    position:relative;
    color:#bbb;
    font-size:11px;
}

.hr-page__reviews-user img {
    position:absolute;
    left:0;
    top:0;
    width:30px;
    height:30px;
    object-fit:cover;
    display:block;
    border-radius:50%;
}

.hr-page__reviews-user strong {
    color:#000;
    font-size:14px;
    display:block;
}

.hr-page__reviews-rate {
    margin:5px 0 5px;
}

.hr-page__reviews-text {
    font-size:11px;
    margin:0 0 15px;
}



/*! Doc
---------------------
 */
.hr-page__doc {
    margin:0 0 32px;
}



/*! Tariffs
---------------------
 */
.hr-page__tariffs {
    margin:64px 0;
}

.hr-page__tariffs-head {
    margin:0 0 32px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:32px;
}

.hr-page__tariffs-text {
    font-size:16px;
    max-width:600px;
}

.hr-page__tariffs-label {
    font-size:18px;
    position:relative;
    padding:25px 25px 25px 85px;
    border-radius:15px;
    background:rgb(148, 212, 91);
    text-align:center;
    width:max-content;
    flex:none;
}

.hr-page__tariffs-label strong {
    font-size:24px;
    display:block;
}

.hr-page__tariffs-label svg  {
    left:15px;
    top:25px;
    position:absolute;
}

.hr-page__tariffs-grid {
    display:flex;
    align-items:flex-end;
    gap:24px;
}

.hr-page__tariffs-column {
    flex:1;
}

.hr-page__tariffs-title {
    margin:0 0 16px;
    color:#fff;
    text-transform:uppercase;
    font-size:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:4px;
    background:rgb(66, 91, 145);;
    box-shadow:0 2px 5px rgba(0,0,0,.3);
    height:42px;
}

.hr-page__tariffs-column_pro .hr-page__tariffs-title {
    background:rgb(66, 139, 202);
}

.hr-page__tariffs-content {
    padding:25px;
    border-radius:15px;
    background:rgb(245, 245, 245);
    display:flex;
    flex-direction:column;
}

.hr-page__tariffs-column_pro .hr-page__tariffs-content {
    min-height:570px;
}

.hr-page__tariffs-desc {
    font-size:16px;
}

.hr-page__tariffs-desc li:not(:last-child) {
    margin:0 0 16px;
}

.hr-page__tariffs-sale {
    display:flex;
    align-items:center;
    gap:12px;
    font-size:12px;
    margin:auto -32px 24px 0;
}

.hr-page__tariffs-sale span {
    display:flex;
    align-items:center;
    font-weight:bold;
    padding:0 16px;
    background:rgb(148, 212, 91);
    border-radius:4px;
    font-size:18px;
    height:40px;
}

.hr-page__tariffs-price {
    display:flex;
    gap:12px;
    justify-content:space-between;
}

.hr-page__tariffs-price s {
    font-weight:bold;
    font-size:17px;
    color:#616161;
    flex:none;
    padding-top:2px;
}

.hr-page__tariffs-value {
    font-size:11px;
}

.hr-page__tariffs-value strong {
    display:block;
    color:rgb(16, 120, 219);
    font-size:24px;
    line-height:1;
}

.hr-page__tariffs-buttons {
    margin:24px 0 0;
    display:flex;
    flex-direction:column;
    gap:12px;
}



/*! Pluses
---------------------
 */
.hr-page__pluses {
    display:flex;
    gap:32px;
}

.hr-page__pluses-item {
    flex:1;
    text-align:center;
    font-size:16px;
}

.hr-page__pluses-icon {
    margin:0 0 10px;

    svg {
        height:100px;
        width:auto;
        stroke-width:.5px;
        stroke:#1078db;
        fill:none;
    }
}


/*! Teacher
---------------------
 */
.hr-page__teacher {
    display:flex;
    gap:24px;
    margin:0 0 48px;
}

.hr-page__teacher-photo {
    flex:none;
    width:45%;
}

.hr-page__teacher-photo img {
    border-radius:15px;
    display:block;
    max-width:100%;
    height:auto;
    width:100%;
}

.hr-page__teacher-about {
    flex:auto;
    display:flex;
    flex-direction:column;
}

.hr-page__teacher-name {
    font-weight:bold;
    font-size:24px;
    padding:0 0 16px;
    margin:0 0 24px;
    border-bottom:1px solid currentColor;
}

.hr-page__teacher-desc {
    font-size:16px;
    line-height:1.35;
}

.hr-page__teacher-ask {
    margin:auto 0 0;
    padding-top:24px;
}

.hr-page__teacher-ask p {
    margin:0 0 16px;
    padding:0;
    font-size:16px;
    line-height:1.35;
}


/*! Help
---------------------
 */
.hr-page__help {
    display:flex;
    gap:32px;
    flex-direction:column;
    margin:0 0 64px;
}

.hr-page__help-item {
    border-radius:15px;
    border:1px solid #425b91;
}

.hr-page__help-inner {
    padding:20px;
    border-radius:10px;
    box-shadow:0 5px 15px rgba(0,0,0,.15);
    display:flex;
    align-items:center;
    font-size:16px;
    gap:24px;
    margin:10px 10px -10px -10px;
    background:#fff;
}


.proc-section{
    margin-top: 100px;
}

.proc-section .hr-page__steps{
    margin: 60px -120px 84px -64px;
}

.hr-page__tariffs-grid-2 {
    align-items: flex-start;
}

.b9{
    margin-top: 90px;
}

.b9 img{
    max-width: 100%;
}

.b9-img-descr{
    text-align: center;
    font-weight: bold;
    margin-top: 10px;
}

.b9-img{
    margin-bottom: 30px;
}

.hr-page__programm-block-com{
    text-align: center;
}
.hr-page__programm-block-com a{
    font-size: 18px;
    font-weight: 600;
}


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

    .hr-page__steps {
        margin:120px 0 84px 0;
    }

    .hr-page__bonus-head svg {
        width:45px;
    }

    .hr-page__bonus-head {
        font-size:14px;
    }

    .hr-page__banner,
    .hr-page__programm {
        margin-left:-12px;
        margin-right:-12px;
    }
}


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

    .hr-page__section {
        flex-direction:column;
        gap:48px;
    }

    .hr-page__content {
        width:100%;
    }

    .hr-page__sidebar {
        padding:0;
        width:100%;
    }

    .hr-page__sale-content {
        min-height:initial;
    }

    .hr-page__programm-head {
        gap:24px;
    }

    .hr-page__steps-item {
        width:40%;
    }

    .hr-page__steps-item:last-child {
        width:100%;
    }

    .hr-page__bonus {
        margin:0;
    }

    .hr-page__steps-separator_2,
    .hr-page__steps-separator_4,
    .hr-page__steps-separator_8,
    .hr-page__steps-separator_6 {
        display:none;
    }

    .hr-page__steps-separator_3,
    .hr-page__steps-separator_5 {
        display:block;
    }

    .hr-page__tariffs-grid {
        display:grid;
        grid-template-columns:repeat(2,1fr);
    }

    .hr-page__tariffs-column_pro {
        order:-1;
        grid-column:1/-1;
    }

    .hr-page__tariffs-column_pro .hr-page__tariffs-content {
        min-height:initial;
    }
}


@media screen and (max-width:650px) {
    .hr-page {
        overflow:hidden;
    }

    h1.hr-page__title {
        font-size:34px;
    }

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

    .hr-page__programm-block {
        padding:20px 24px;
    }

    .hr-page__programm-quote {
        margin:0 0 24px;
    }

    .hr-page__programm-head {
        flex-wrap:wrap;
        grid-row-gap:8px;
        justify-content:center;
        text-align:center;
    }

    .hr-page__steps {
        gap:24px;
        margin:100px 0;
    }

    .hr-page__steps-item {
        width:100%;
    }

    .hr-page__steps-head {
        justify-content:center;
    }

    .hr-page__steps-separator {
        justify-content:center;
        display:flex;
        width:100%;
    }

    .hr-page__steps-separator svg {
        transform:rotate(45deg);
        transform-origin:center center;
    }

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

    .hr-page__teacher-photo {
        width:100%;
    }

    .hr-page__pluses {
        flex-direction:column;
        gap:24px;
    }

    .hr-page__tariffs-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .hr-page__tariffs-grid {
        grid-template-columns: repeat(1, 1fr);
    }

    .hr-page__reviews-column strong {
        font-size:24px;
    }

    .hr-page__reviews-head {
        flex-direction:column;
        gap:12px;
        padding:14px 14px 0
    }

    .hr-page__important {
        grid-template-columns: repeat(1, 1fr);
        gap: 14px;
    }
}