/* Start:/local/templates/geograft/components/bitrix/news.list/home-banner/style.css?17919207725577*/
.banner-section {
    position: relative;
    padding-bottom: 0;
    padding-top: 0;
    margin-top: 84px;
    background: linear-gradient(120deg, rgb(255, 255, 255) 0%, rgb(246, 249, 252) 55%, rgb(233, 240, 247) 100%);
}

.home-banner {
    min-height: 0;
    display: flex;
    flex-direction: column;
}

@media (min-width: 1180px) {
    .home-banner {
        display: block;
        min-height: 880px;
    }
}

.home-banner > .preview {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    order: 2;
    z-index: 3;
    height: 380px;
}

@media (min-width: 760px) {
    .home-banner > .preview {
        height: 460px;
    }
}

@media (min-width: 1180px) {
    .home-banner > .preview {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 46%;
        height: auto;
        z-index: 3;
    }
}

.home-banner > .preview > .images {
    overflow: hidden;
    position: relative;
    height: 100%;
    inset: 0;
}

@media (min-width: 1180px) {
    .home-banner > .preview > .images {
        position: absolute;
        height: auto;
    }
}

.home-banner > .preview > .images > .img {
    position: absolute;
    inset: 0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 12%;
    transform: scale(1.2);
    transform-origin: 50% 100%;
    pointer-events: none;
    user-select: none;
}

.home-banner > .preview > .images > .img.-el2 {
    clip-path: inset(0px 0px 0px 52%);
}

.home-banner > .info {
    padding-bottom: 0;
    padding-top: 32px;
    width: 100%;
    order: 1;
}

@media (min-width: 760px) {
    .home-banner > .info {
        padding-bottom: 0;
        padding-top: 46px;
        width: auto;
    }
}

@media (min-width: 1180px) {
    .home-banner > .info {
        padding-bottom: 96px;
        padding-top: 116px;
        order: unset;
    }
}

@media (max-width: 1180px) {
    .home-banner > .preview {
        aspect-ratio: 1122 / 700 !important;
        max-height: none !important;
    }
}

@media (max-width: 1180px) {
    .home-banner > .preview > .images > .img {
        object-position: 50% 40% !important;
        transform: none !important;
    }
}

.home-banner > .info > .content {
    width: 100%;
    max-width: 640px;
}

@media (min-width: 1180px) {
    .home-banner > .info > .content {
        width: 620px;
        max-width: 52%;
    }
}

.home-banner > .info .pre-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.22em;
    color: rgb(92, 99, 109);
}

.home-banner > .info .title {
    font-size: 34px;
    line-height: 1.12;
    font-weight: 200;
    margin: 0;
    letter-spacing: -0.012em;
    color: rgb(18, 20, 23);
    text-transform: uppercase;
}
.home-banner > .info .post-title {
    font-size: 26px;
    line-height: 1.1;
    font-weight: 200;
    margin: 16px 0 0;
    letter-spacing: -0.01em;
    color: rgb(18, 20, 23);
}

@media (min-width: 760px) {
    .home-banner > .info .title {
        font-size: 48px;
        line-height: 1.08;
    }
}

@media (min-width: 1180px) {
    .home-banner > .info .title {
        font-size: 60px;
    }
}

.home-banner > .info .description {
    margin: 30px 0 0;
    max-width: 460px;
    font-size: 16px;
    line-height: 1.7;
    color: rgb(92, 99, 109);
    text-wrap: pretty;
}

.home-banner > .info .btns {
    display: flex;
    gap: 16px;
    margin-top: 44px;
    flex-wrap: wrap;
}

.home-banner > .info .btns > .btn {
    font-size: 14px;
    padding: 20px 30px;
}

.home-banner > .info .note {
    margin: 40px 0 0;
    font-size: 11px;
    line-height: 1.6;
    color: rgb(142, 150, 160);
    max-width: 440px;
}

.home-banner .change-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
    appearance: none;
    background: transparent;
}

.home-banner .hero-edge {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 52%;
    width: 1px;
    background: rgb(255, 255, 255);
    box-shadow: rgba(43, 108, 232, 0.35) 0px 0px 0px 1px;
    pointer-events: none;
}

.home-banner .images .hero-knob {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: rgb(255, 255, 255);
    box-shadow: rgba(18, 20, 23, 0.2) 0 10px 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font: 500 13px / 1 Manrope, sans-serif;
    color: rgb(43, 108, 232);
    animation: 2.6s ease-in-out 0s infinite normal none running om-nudge;
}


.home-banner .images .title-before {
    position: absolute;
    top: 28px;
    left: 28px;
    font: 500 11px / 1 Manrope, sans-serif;
    letter-spacing: 0.16em;
    color: rgb(92, 99, 109);
    background: rgba(255, 255, 255, 0.9);
    padding: 9px 13px;
    pointer-events: none;
}

.home-banner .images .title-after {
    position: absolute;
    top: 28px;
    right: 28px;
    font: 500 11px / 1 Manrope, sans-serif;
    letter-spacing: 0.16em;
    color: rgb(255, 255, 255);
    background: rgb(43, 108, 232);
    padding: 9px 13px;
    pointer-events: none;
}

.home-banner .images .note-block {
    position: absolute;
    bottom: 28px;
    right: 28px;
    font: 400 11px / 1 Manrope, sans-serif;
    color: rgb(92, 99, 109);
    background: rgba(255, 255, 255, 0.9);
    padding: 10px 14px;
    border-radius: 999px;
    pointer-events: none;
}
/* End */


/* Start:/local/templates/geograft/components/bitrix/news.list/features/style.css?17919207711152*/
.features-section {
    background: rgb(244, 246, 248);
    padding-top: 72px;
    padding-bottom: 72px;
}

@media (min-width: 760px) {
    .features-section {
        padding-top: 104px;
        padding-bottom: 104px;
    }
}

.features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    counter-reset: item;
}
@media (min-width: 760px) {
    .features {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }
}

@media (min-width: 1180px) {
    .features {
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }
}

.features > .elem {
    border-top: 1px solid rgb(201, 213, 225);
    padding-top: 22px;
    counter-increment: item;
}

.features > .elem::before {
    content: counter(item, decimal-leading-zero);
    font: 300 36px / 1 Onest, sans-serif;
    color: rgb(43, 108, 232);
}
.features > .elem  > .title {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 20px 0 10px;
}

.features > .elem  > .info {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.65;
    color: rgb(92, 99, 109);
}
/* End */


/* Start:/local/templates/geograft/components/bitrix/news.list/directions/style.css?17919207705260*/
.directions-section {
    background: rgb(255, 255, 255);
    padding-top: 72px;
    padding-bottom: 72px;
}

.directions-section > .vessel > .bottom-block {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 48px;
    flex-wrap: wrap;
}

@media (min-width: 760px) {
    .directions-section {
        padding-top: 120px;
        padding-bottom: 120px;
    }
}

.directions-section .head-block {
    display: flex;
    justify-content: space-between;
    margin-bottom: 56px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}
@media (min-width: 1180px) {
    .directions-section .head-block {
        gap: 48px;
        align-items: flex-end;
        flex-direction: row;
    }
}

.directions-section .head-block .pre-title {
    display: block;
    font: 500 11px / 1 Manrope, sans-serif;
    letter-spacing: 0.22em;
    color: rgb(142, 150, 160);
}

.directions-section .head-block .title {
    margin: 18px 0 0;
    font-weight: 200;
    text-transform: uppercase;
    font-size: 27px;
    line-height: 1.16;
}

@media (min-width: 760px) {
    .directions-section .head-block .title {
        font-size: 36px;
    }
}

@media (min-width: 1180px) {
    .directions-section .head-block .title {
        font-size: 42px;
        line-height: 1.12;
    }
}

.directions-section .head-block .post-title {
    font-size: 14px;
    line-height: 1.65;
    color: rgb(92, 99, 109);
    max-width: 380px;
    margin: 0;
    text-wrap: pretty;
}

.directions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    counter-reset: item;
}

@media (min-width: 760px) {
    .directions {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1180px) {
    .directions {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }
}

.directions > .elem {
    display: flex;
    flex-direction: column;
    color: inherit;
    counter-increment: item;
    border: 1px solid rgb(221, 227, 233);
    border-radius: 6px;
    padding: 24px 24px 28px;
    gap: 14px;
}

.directions > .elem > .preview::before {
    content: counter(item, decimal-leading-zero);
    position: absolute;
    top: 18px;
    left: 18px;
    font: 400 12px / 1 Onest, sans-serif;
    color: rgb(43, 108, 232);
    background: rgb(255, 255, 255);
    padding: 9px 12px;
    border-radius: 999px;
    z-index: 2;
}

.directions > .elem:hover {
    text-decoration: unset;
    border-color: #2B6CE8;
    box-shadow: 0 16px 40px rgba(18, 20, 23, .08);
}

.directions > .elem .title {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0;
}

.directions > .elem .info {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.65;
    color: rgb(92, 99, 109);
}

.directions > .elem .preview {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 4px;
    overflow: hidden;
    margin: -8px -8px 4px;
    background: repeating-linear-gradient(135deg, rgb(228, 235, 243) 0px, rgb(228, 235, 243) 14px, rgb(218, 228, 238) 14px, rgb(218, 228, 238) 28px);
}

.directions > .elem .preview > .label {
    position: absolute;
    top: 18px;
    right: 18px;
    font: 500 10px / 1 Manrope, sans-serif;
    letter-spacing: 0.14em;
    color: rgb(92, 99, 109);
    background: rgba(255, 255, 255, 0.92);
    padding: 8px 11px;
    border-radius: 999px;
    transition: background 0.3s, color 0.3s, opacity 0.3s;
    opacity: 1;
}

/*.directions > .elem .preview > .label.-after {*/
/*    opacity: 0;*/
/*}*/

/*.directions > .elem:hover .preview > .label.-after {*/
/*    color: rgb(255, 255, 255);*/
/*    background: rgb(43, 108, 232);*/
/*    opacity: 1;*/
/*}*/

.directions > .elem .preview .img-block {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(135deg, rgb(228, 235, 243) 0px, rgb(228, 235, 243) 14px, rgb(218, 228, 238) 14px, rgb(218, 228, 238) 28px);
    opacity: 1;
    transition: opacity 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/*.directions > .elem .preview .img-block.-after {*/
/*    opacity: 0;*/
/*}*/

/*.directions > .elem:hover .preview .img-block.-after {*/
/*    opacity: 1;*/
/*}*/

/*.directions > .elem:hover .preview .img-block.-before {*/
/*    opacity: 0;*/
/*}*/

.directions > .elem .preview .img-block > .img {
    position: absolute;
    inset: 0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 45%;
    aspect-ratio: 4/3;
    transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.directions > .elem:hover .preview .img-block > .img {
    transform: scale(1.04);
}

.directions > .elem .more {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: auto;
    font: 500 13px / 1 Manrope, sans-serif;
    letter-spacing: 0.02em;
    color: rgb(43, 108, 232);
    padding-bottom: 4px;
    transition: color 0.25s;
    min-height: 44px;
}

.directions > .elem:hover .more {
    color: rgb(27, 79, 176);
    border-color: rgba(27, 79, 176, 0.6);
}
.directions > .elem .more > .arrow {
    display: inline-block;
    transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
    transform: none;
}
.directions > .elem:hover .more > .arrow {
    transform: translateX(5px);
}
/* End */


/* Start:/local/templates/geograft/components/bitrix/news.list/methods/style.css?17919207724925*/
.methods-section {
    position: relative;
    background: rgb(231, 237, 242);
    padding: 0;
}

.methods {
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (min-width: 1180px) {
    .methods {
        min-height: 660px;
        align-items: stretch;
        flex-direction: row;
    }
}

.methods > .preview {
    position: relative;
    width: 100%;
    min-height: 320px;
    order: 2;
}

@media (min-width: 760px) {
    .methods > .preview {
        min-height: 420px;
    }
}

@media (min-width: 1180px) {
    .methods > .preview {
        width: 46%;
        order: unset;
    }
}

.methods > .preview > .img {
    position: absolute;
    inset: 0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 40%;
}

.methods > .preview > .label {
    position: absolute;
    top: calc(50% + 76px);
    left: 50%;
    transform: translateX(-50%);
    font: 500 11px / 1 Manrope, sans-serif;
    letter-spacing: 0.16em;
    color: rgb(92, 99, 109);
    background: rgba(255, 255, 255, 0.9);
    padding: 9px 14px;
    border-radius: 999px;
    white-space: nowrap;
    pointer-events: none;
}

.methods > .info {
    box-sizing: border-box;
    padding: 56px 20px;
}

@media (min-width: 760px) {
    .methods > .info {
        box-sizing: border-box;
        width: auto;
        padding: 72px 36px;
        max-width: none;
        order: 1;
    }
}

@media (min-width: 1180px) {
    .methods > .info {
        width: 54%;
        padding: 112px 56px 112px 80px;
        max-width: 740px;
        box-sizing: content-box;
    }
}

.methods > .info .pre-title {
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.22em;
    color: rgb(92, 99, 109);
}

.methods > .info .title {
    font-size: 27px;
    line-height: 1.16;
    font-weight: 200;
    letter-spacing: -0.012em;
    color: rgb(18, 20, 23);
    text-transform: uppercase;
    margin: 20px 0 0;
}

@media (min-width: 760px) {
    .methods > .info .title {
        font-size: 42px;
        line-height: 1.12;
    }
}

.methods > .info .description {
    font-size: 15px;
    line-height: 1.7;
    color: rgb(92, 99, 109);
    text-wrap: pretty;
    margin: 26px 0 0;
    max-width: 470px;
}
.methods > .info .issues {
    margin-top: 44px;
    display: flex;
    flex-direction: column;
    counter-reset: item;
}

.methods > .info .issues > .line {
    display: flex;
    gap: 26px;
    padding: 22px 0;
    border-top: 1px solid rgb(207, 218, 229);
    counter-increment: item;
}

.methods > .info .issues > .line::before {
    content: counter(item, decimal-leading-zero);
    font: 300 26px / 1 Onest, sans-serif;
    color: rgb(43, 108, 232);
    min-width: 44px;
}

.methods > .info .issues > .line > .item {
    font: 400 14px / 1.65 Manrope, sans-serif;
    color: rgb(18, 20, 23);
    max-width: 420px;
}

.methods > .info .btns {
    display: flex;
    gap: 16px;
    margin-top: 44px;
    flex-wrap: wrap;
}

.methods > .info .note {
    margin: 28px 0 0;
    font-size: 11px;
    line-height: 1.6;
    color: rgb(142, 150, 160);
    max-width: 470px;
}

.methods .change-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
    appearance: none;
    background: transparent;
}

.methods .hero-edge {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 52%;
    width: 1px;
    background: rgb(255, 255, 255);
    box-shadow: rgba(43, 108, 232, 0.35) 0px 0px 0px 1px;
    pointer-events: none;
}

.methods .images .hero-knob {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: rgb(255, 255, 255);
    box-shadow: rgba(18, 20, 23, 0.2) 0 10px 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font: 500 13px / 1 Manrope, sans-serif;
    color: rgb(43, 108, 232);
    animation: 2.6s ease-in-out 0s infinite normal none running om-nudge;
}


.methods .images .title-before {
    position: absolute;
    top: 28px;
    left: 28px;
    font: 500 11px / 1 Manrope, sans-serif;
    letter-spacing: 0.16em;
    color: rgb(92, 99, 109);
    background: rgba(255, 255, 255, 0.9);
    padding: 9px 13px;
    pointer-events: none;
}

.methods .images .title-after {
    position: absolute;
    top: 28px;
    right: 28px;
    font: 500 11px / 1 Manrope, sans-serif;
    letter-spacing: 0.16em;
    color: rgb(255, 255, 255);
    background: rgb(43, 108, 232);
    padding: 9px 13px;
    pointer-events: none;
}

.methods .images .note-block {
    position: absolute;
    bottom: 28px;
    right: 28px;
    font: 400 11px / 1 Manrope, sans-serif;
    color: rgb(92, 99, 109);
    background: rgba(255, 255, 255, 0.9);
    padding: 10px 14px;
    border-radius: 999px;
    pointer-events: none;
}
/* End */


/* Start:/local/templates/geograft/components/bitrix/news.list/results/style.css?17919207744909*/
.results-section {
    background: rgb(255, 255, 255);
    padding-top: 72px;
    padding-bottom: 72px;
}

@media (min-width: 760px) {
    .results-section {
        padding-top: 120px;
        padding-bottom: 120px;
    }
}

.results-section .head-block {
    display: flex;
    justify-content: space-between;
    margin-bottom: 56px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}
@media (min-width: 1180px) {
    .results-section .head-block {
        gap: 48px;
        align-items: flex-end;
        flex-direction: row;
    }
}

.results-section .head-block .pre-title {
    display: block;
    font: 500 11px / 1 Manrope, sans-serif;
    letter-spacing: 0.22em;
    color: rgb(142, 150, 160);
}

.results-section .head-block .title {
    margin: 18px 0 0;
    font-weight: 200;
    text-transform: uppercase;
    font-size: 27px;
    line-height: 1.16;
}

@media (min-width: 760px) {
    .results-section .head-block .title {
        font-size: 36px;
    }
}

@media (min-width: 1180px) {
    .results-section .head-block .title {
        font-size: 42px;
        line-height: 1.12;
    }
}

.results-section .head-block .post-title {
    font-size: 14px;
    line-height: 1.65;
    color: rgb(92, 99, 109);
    max-width: 380px;
    margin: 0;
    text-wrap: pretty;
}

.results-section .bottom-block {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 48px;
    flex-wrap: wrap;
}
.results-section .bottom-block.-center {
    justify-content: center;
}
.results-section .bottom-block > .note {
    font-size: 12px;
    line-height: 1.6;
    color: rgb(142, 150, 160);
    max-width: 460px;
}

.results-section .load-more {
    display: flex;
    justify-content: center;
    margin-top: 44px;
}

.results {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
}

@media (min-width: 760px) {
    .results {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

@media (min-width: 1180px) {
    .results {
        grid-template-columns: repeat(3, 1fr);
    }
}

.results > .elem {
    display: block;
    color: inherit;
}

.results > .elem:hover {
    text-decoration: unset;
}

.results > .elem .title {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.45;
    margin: 18px 0 8px;
}

.results > .elem .info {
    font-size: 12px;
    font-weight: 400;
    color: rgb(142, 150, 160);
}

.results > .elem .preview {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 4px;
    overflow: hidden;
    background: repeating-linear-gradient(135deg, rgb(228, 235, 243) 0px, rgb(228, 235, 243) 14px, rgb(218, 228, 238) 14px, rgb(218, 228, 238) 28px);
}

.results > .elem .preview > .label {
    position: absolute;
    top: 18px;
    right: 18px;
    font: 500 10px / 1 Manrope, sans-serif;
    letter-spacing: 0.14em;
    color: rgb(92, 99, 109);
    background: rgba(255, 255, 255, 0.92);
    padding: 8px 11px;
    border-radius: 999px;
    transition: background 0.3s, color 0.3s, opacity 0.3s;
    opacity: 1;
}

.results > .elem .preview > .label.-after {
    opacity: 0;
}

.results > .elem:hover .preview > .label.-after {
    color: rgb(255, 255, 255);
    background: rgb(43, 108, 232);
    opacity: 1;
}

.results > .elem .preview .img-block {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(135deg, rgb(228, 235, 243) 0px, rgb(228, 235, 243) 14px, rgb(218, 228, 238) 14px, rgb(218, 228, 238) 28px);
    opacity: 1;
    transition: opacity 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.results > .elem .preview .video-frame {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: unset;
    max-height: unset;
    width: 100%;
    height: 100%;
}

.results > .elem .preview .img-block.-after {
    opacity: 0;
}

.results > .elem:hover .preview .img-block.-after {
    opacity: 1;
}

.results > .elem:hover .preview .img-block.-before {
    opacity: 0;
}

.results > .elem:hover .preview .img-block > .img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 45%;
}

.results > .elem .more {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 18px;
    font: 500 13px / 1 Manrope, sans-serif;
    letter-spacing: 0.02em;
    color: rgb(43, 108, 232);
    border-bottom: 1px solid rgba(43, 108, 232, 0.3);
    padding-bottom: 4px;
    transition: color 0.25s, border-color 0.25s;
    border-top-color: rgba(43, 108, 232, 0.3);
    border-right-color: rgba(43, 108, 232, 0.3);
    border-left-color: rgba(43, 108, 232, 0.3);
}

.results > .elem:hover .more {
    color: rgb(27, 79, 176);
    border-color: rgba(27, 79, 176, 0.6);
}
.results > .elem .more > .arrow {
    display: inline-block;
    transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
    transform: none;
}
.results > .elem:hover .more > .arrow {
    transform: translateX(5px);
}
/* End */


/* Start:/local/templates/geograft/components/bitrix/news.list/prices/style.css?17919207735217*/
.prices-section {
    padding: 72px 0;
    background: rgb(14, 15, 17);
    color: rgb(255, 255, 255);
}

@media (min-width: 760px) {
    .prices-section {
        padding: 120px 0;
    }
}

.prices-section .head-block {
    display: flex;
    justify-content: space-between;
    margin-bottom: 56px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

@media (min-width: 1180px) {
    .prices-section .head-block {
        flex-direction: row;
        align-items: flex-end;
        gap: 48px;
    }
}

.prices-section .head-block .post-title {
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.62);
    max-width: 400px;
    margin: 0;
    text-wrap: pretty;
}

.prices-section .head-block .pre-title {
    display: block;
    font-weight: 500;
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.22em;
    color: rgb(143, 182, 243);
}

.prices-section .head-block .title {
    margin: 20px 0 0;
    text-transform: uppercase;
    color: rgb(255, 255, 255);
    font-size: 27px;
    line-height: 1.16;
}

@media (min-width: 760px) {
    .prices-section .head-block .title {
        font-size: 42px;
        line-height: 1.12;
    }
}

.prices-section .bottom-block {
    margin-top: 32px;
    display: flex;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.prices-section .bottom-block > .note {
    font-size: 11px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.45);
    max-width: 780px;
}

.prices {
    display: grid;
    align-items: stretch;
    padding-top: 22px;
    grid-template-columns: 1fr;
    gap: 28px;
}

@media (min-width: 760px) {
    .prices {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }
}

@media (min-width: 1180px) {
    .prices {
        grid-template-columns: repeat(3, 1fr);
    }
}

.prices > .elem {
    position: relative;
    background: rgb(21, 24, 28);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    padding: 34px 24px;
    display: flex;
    flex-direction: column;
    opacity: 1;
    transform: translateY(0px);
    transition: background 0.35s, border-color 0.35s, height 0.35s, transform 0.35s, box-shadow 0.35s;
    will-change: background, border-color, height, box-shadow, transform;
}

.prices > .elem:hover {
    background: rgb(26, 30, 35);
    border-color: rgba(143, 182, 243, 0.42);
    transform: translateY(-8px);
    box-shadow: rgba(0, 0, 0, 0.45) 0 22px 50px, rgba(43, 108, 232, 0.14) 0 0 34px;
}

.prices > .elem.-pop {
    border: 1px solid rgba(43, 108, 232, 0.85);
    box-shadow: rgba(43, 108, 232, 0.18) 0 0 0 1px, rgba(43, 108, 232, 0.3) 0 0 44px, rgba(43, 108, 232, 0.06) 0 0 60px inset;
}


.prices > .elem.-pop:hover {
    background: rgb(24, 28, 34);
    border: 1px solid rgb(43, 108, 232);
    box-shadow: rgba(43, 108, 232, 0.3) 0 0 0 1px, rgba(43, 108, 232, 0.45) 0 0 70px, rgba(43, 108, 232, 0.1) 0 0 70px inset;
}

.prices > .elem.-pop > .title {
    color: rgb(143, 182, 243);
}

@media (min-width: 760px) {
    .prices > .elem {
        padding: 44px 38px;
    }
}

.prices > .elem > .label {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgb(255, 255, 255);
    background: rgb(43, 108, 232);
    padding: 11px 20px;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: rgba(43, 108, 232, 0.4) 0px 8px 22px;
}

.prices > .elem > .title {
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.prices > .elem > .price {
    font-weight: 200;
    font-family: Onest, sans-serif;
    line-height: 1;
    letter-spacing: -0.01em;
    margin: 20px 0 34px;
    color: rgb(255, 255, 255);
    font-size: 34px;
}

@media (min-width: 760px) {
    .prices > .elem > .price {
        font-size: 44px;
    }
}

.prices > .elem > .info {
    flex-grow: 1;
}

.prices > .elem > .info > .list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1 1 0%;
}

.prices > .elem > .info > .list > .elem {
    display: flex;
    gap: 12px;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.66);
}

.prices > .elem > .info > .list > .elem > .dot {
    flex: 0 0 auto;
    color: rgb(143, 182, 243);
}

.prices > .elem > .note {
    margin: 22px 0 0;
    font: 400 12px / 1.6 Manrope, sans-serif;
    color: rgba(255, 255, 255, 0.42);
}

.prices > .elem > .btn {
    margin-top: 40px;
}

.prices > .elem > .info > .note {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px 18px;
    padding: 18px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.prices > .elem > .info > .note > .title {
    line-height: 1.6;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
}
.prices > .elem > .info > .note > .value {
    line-height: 1.6;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.78);
}
/* End */


/* Start:/local/templates/geograft/css/blocks/installment_section.css?17919240842578*/
.installment-section {
    background: rgb(255, 255, 255);
    padding: 72px 0;
}
@media (min-width: 760px) {
    .installment-section {
        padding: 120px 0;
    }
}
.installment-section > .grid {
    padding: 0 20px;
    display: grid;
    align-items: start;
    grid-template-columns: 1fr;
    gap: 28px;
}
@media (max-width: 760px) {
    .installment-section > .grid {
        max-width: 100% !important;
        width: auto;
    }
}
@media (min-width: 760px) {
    .installment-section > .grid {
        grid-template-columns: 1fr;
        gap: 48px;
        padding: 0 36px;
    }
}
@media (min-width: 1180px) {
    .installment-section > .grid {
        grid-template-columns: 0.95fr 1.05fr;
        gap: 72px;
        padding: 0 56px;
    }
}
.installment-section .head-block .pre-title {
    font: 500 11px / 1 Manrope, sans-serif;
    letter-spacing: 0.22em;
    color: rgb(142, 150, 160);
}
.installment-section .head-block .title {
    margin: 18px 0 26px;
    font-size: 27px;
    line-height: 1.16;
    text-transform: uppercase;
}
@media (min-width: 760px) {
    .installment-section .head-block .title {
        font-size: 36px;
        line-height: 1.12;
    }
}
@media (min-width: 1180px) {
    .installment-section .head-block .title {
        font-size: 42px;
    }
}
.installment-section .head-block .post-title {
    margin: 0 0 34px;
    font-size: 15px;
    line-height: 1.7;
    color: rgb(92, 99, 109);
    max-width: 440px;
    text-wrap: pretty;
}

.installment-section > .grid .content.grid {
    display: grid;
    border-top: 1px solid rgb(221, 227, 233);
    padding-top: 26px;
    max-width: none;
    grid-template-columns: 1fr;
    gap: 28px;

}

@media (min-width: 760px) {
    .installment-section > .grid .content.grid {
        grid-template-columns: 1fr;
        gap: 48px;
        max-width: 460px;
    }
}
@media (min-width: 1180px) {
    .installment-section > .grid .content.grid {
        grid-template-columns: 1fr 1fr;
        gap: 26px 32px;
    }
}
.installment-section > .grid .content.grid .title {
    font: 300 30px / 1 Onest, sans-serif;
    color: rgb(43, 108, 232);
}
.installment-section > .grid .content.grid .info {
    line-height: 1.5;
    font-size: 12px;
    color: rgb(142, 150, 160);
    margin-top: 10px;
}
.installment-section > .grid .bottom-block {
    margin: 32px 0 0;
    max-width: 460px;
}
.installment-section > .grid .bottom-block > .note {
    line-height: 1.7;
    font-size: 11px;
    color: rgb(142, 150, 160);
}
.installment-section > .grid > .col {
    max-width: 100%;
    overflow: auto;
}
/* End */


/* Start:/local/templates/geograft/css/forms/installment-form.css?17919240844444*/
.installment-form {
    background: rgb(244, 246, 248);
    border-radius: 4px;
    box-sizing: border-box;
    padding: 28px 20px;
}
@media (min-width: 760px) {
    .installment-form {
        padding: 44px;
    }
}
.installment-form > .top {
    line-height: 1;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    color: rgb(142, 150, 160);
    margin-bottom: 22px;
    text-transform: uppercase;
}
.installment-form > .content {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.installment-form .inputtext {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: rgb(255, 255, 255);
    font: 400 15px / 1 Manrope, sans-serif;
    padding: 19px 20px;
    outline: none;
}

.installment-form .inputtextarea {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: rgb(255, 255, 255);
    font: 400 15px / 1.6 Manrope, sans-serif;
    padding: 19px 20px;
    outline: none;
    resize: vertical;
}

.installment-form > .content.-v2 {
    margin-top: 16px;
    border: 1px dashed rgba(255, 255, 255, 0.24);
    padding: 20px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    flex-direction: row;
}

.installment-form > .content.-v2 > .title {
    color: var(--color-8);
}

.installment-form .label.-file {
    font: 500 12px / 1 Manrope, sans-serif;
    color: rgb(255, 255, 255);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 12px 18px;
    border-radius: 999px;
    transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.18s, box-shadow 0.25s;
    cursor: pointer;
}

.installment-form .checkbox-label > .note {
    color: rgb(142, 150, 160) !important;
}

.installment-form > .note {
    color: rgb(142, 150, 160) !important;
}

.installment-form > .btn {
    padding: 20px 30px;
    margin-top: 30px;
    font-size: 14px;
    line-height: 1;
}

.installment-form-wrap {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    min-height: 0;
}

@media (min-width: 1180px) {
    .installment-form-wrap {
        flex-direction: row;
        min-height: 680px;
    }
}

.installment-form-wrap > .form-block {
    box-sizing: border-box;
    width: auto;
    padding: 72px 36px;
    max-width: none;
    order: 1;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 1180px) {
    .installment-form-wrap > .form-block {
        width: 52%;
        padding: 112px 64px 112px 56px;
        max-width: 760px;
        order: 0;
        box-sizing: content-box;
        margin-right: unset;
    }
}

.installment-form-wrap > .form-block > .title {
    margin: 20px 0 0;
    text-transform: uppercase;
}

.installment-form-wrap > .form-block > .pre-title {
    display: block;
    font-weight: 500;
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.22em;
    color: var(--color-7);
}

.installment-form-wrap > .form-block > .after-title {
    margin: 24px 0 0;
    max-width: 430px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-9);
}

.installment-form-wrap > .presnt-block {
    width: 100%;
    min-height: 420px;
    order: 2;
    position: relative;
    opacity: 1;
    transform: none;
    transition: none;
}

@media (min-width: 1180px) {
    .installment-form-wrap > .presnt-block {
        width: 48%;
        min-height: initial;
    }
}

.installment-form-wrap > .presnt-block > .img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 40%;
}

.installment-form-wrap > .presnt-block > .grad {
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(14, 15, 17, 0.35) 0%, rgba(14, 15, 17, 0) 32%, rgba(14, 15, 17, 0.75) 100%);
}

.installment-form-wrap > .presnt-block > .info {
    position: absolute;
    left: 40px;
    bottom: 40px;
    right: 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.installment-form-wrap > .presnt-block > .info > .line {
    font-size: 12px;
    line-height: 1.5;
    color: var(--color-10);
}

.installment-form-section {
    background: var(--color-1);
    color: var(--color-100);
    padding-top: 72px;
    padding-bottom: 72px;
}

@media (min-width: 760px) {
    .installment-form-section {
        padding-top: initial;
        padding-bottom: initial;
    }
}

.installment-form > .content > .period {
    font-size: 16px;
}
/* End */


/* Start:/local/templates/geograft/components/bitrix/news.list/specialist/style.css?17919207752829*/
.specialists-section > .list {

}


.specialist > .elem {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    min-height: 0;
}

@media (min-width: 1180px) {
    .specialist > .elem {
        min-height: 700px;
        flex-direction: row;
    }
}

.specialist > .elem > .image {
    width: 100%;
    position: relative;
    opacity: 1;
    transform: none;
    transition: none;
    min-height: 320px;
    order: 2;
}

@media (min-width: 760px) {
    .specialist > .elem > .image {
        min-height: 420px;
        width: 46%;
        align-self: center;
    }
}

@media (min-width: 1180px) {
    .specialist > .elem > .image {
        min-height: auto;
        order: unset;
        align-self: unset;
    }
}
.specialist > .elem > .image > .img {
    position: absolute;
    inset: 0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 22%;
}

.specialist > .elem > .content {
    width: auto;
    padding: 56px 20px;
    order: 1;
}

@media (min-width: 760px) {
    .specialist > .elem > .content {
        padding: 72px 36px;
        max-width: none;
        order: unset;
    }
}

@media (min-width: 1180px) {
    .specialist > .elem > .content {
        width: 54%;
        max-width: 740px;
        padding: 112px 56px 112px 80px;
        order: unset;
    }
}

.specialist > .elem > .content .pre-title {
    font: 500 11px / 1 Manrope, sans-serif;
    letter-spacing: 0.22em;
    color: rgb(142, 150, 160);
}

.specialist > .elem > .content .title {
    margin: 20px 0 0;
    text-transform: uppercase;
}

.specialist > .elem > .content .note {
    margin: 24px 0 0;
    max-width: 440px;
    font: 400 16px / 1.7 Manrope, sans-serif;
    color: rgb(92, 99, 109);
}

.specialist > .elem > .content .stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 44px;
    border-top: 1px solid rgb(201, 213, 225);
    padding-top: 26px;
    gap: 12px;
}

@media (min-width: 760px) {
    .specialist > .elem > .content .stats {
        gap: 24px;
    }
}

.specialist > .elem > .content .stats .title {
    font: 300 22px / 1 Onest, sans-serif;
}

@media (min-width: 760px) {
    .specialist > .elem > .content .stats .title {
        font-size: 32px;
    }
}

.specialist > .elem > .content .stats .text {
    font: 400 11px / 1.5 Manrope, sans-serif;
    color: rgb(142, 150, 160);
    margin-top: 10px;
}

@media (min-width: 760px) {
    .specialist > .elem > .content .stats .text {
        font-size: 12px;
    }
}

.specialist > .elem > .content .buttons {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 44px;
    flex-wrap: wrap;
}

.specialist > .elem > .content .bottom-block {
    margin: 28px 0 0;
    font: 400 11px / 1.6 Manrope, sans-serif;
    color: rgb(142, 150, 160);
    max-width: 470px;
}
/* End */


/* Start:/local/templates/geograft/components/bitrix/news.list/specialists/style.css?17919207751532*/
.specialists-section {
    padding-top: 28px;
    padding-bottom: 64px;
}

@media (min-width: 760px) {
    .specialists-section {
        padding-top: 40px;
        padding-bottom: 88px;
    }
}
@media (min-width: 1180px) {
    .specialists-section {
        padding-top: 56px;
        padding-bottom: 112px;
    }
}

.specialists > .list {
    min-width: 0;
    width: 100%;
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 6px;
    scrollbar-width: none;
    justify-content: start;
}

.specialists > .list > .elem {
    flex: 0 0 268px;
    scroll-snap-align: start;
}

.specialists > .list > .elem > .image {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: 4px;
    overflow: hidden;
    background: rgb(237, 241, 246);
}
.specialists > .list > .elem > .image > .img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 18%;
}
.specialists > .list > .elem > .name {
    font: 300 22px / 1.25 Onest, sans-serif;
    margin: 20px 0px 8px;
}
.specialists > .list > .elem > .spec {
    font: 400 13px / 1.5 Manrope, sans-serif;
    color: rgb(92, 99, 109);
}
.specialists > .list > .elem > .exp {
    font: 400 12px / 1.5 Manrope, sans-serif;
    color: rgb(142, 150, 160);
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgb(221, 227, 233);
}

.specialists > .buttons {
    display: flex;
    gap: 10px;
    margin-top: 24px;
}
/* End */


/* Start:/local/templates/geograft/components/bitrix/news.list/steps/style.css?17919207772502*/
.steps-section {
    background: rgb(255, 255, 255);
    padding-top: 72px;
    padding-bottom: 72px;
}

@media (min-width: 760px) {
    .steps-section {
        padding-top: 120px;
        padding-bottom: 120px;
    }
}

.steps-section .head-block {
    display: flex;
    justify-content: space-between;
    margin-bottom: 52px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

@media (min-width: 1180px) {
    .steps-section .head-block {
        flex-direction: row;
        align-items: flex-end;
        gap: 48px;
    }

}
.steps-section .head-block .pre-title {
    display: block;
    font: 500 11px / 1 Manrope, sans-serif;
    letter-spacing: 0.22em;
    color: rgb(142, 150, 160);
}
.steps-section .head-block .title {
    margin: 18px 0 0;
    text-transform: uppercase;
}

.steps-section .bottom-block {
    margin: 44px 0 0;
    font-size: 11px;
    line-height: 1.6;
    color: rgb(142, 150, 160);
    max-width: 560px;
}

.steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    counter-reset: item;
}
@media (min-width: 760px) {
    .steps {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

@media (min-width: 1180px) {
    .steps {
        grid-template-columns: repeat(3, 1fr);
    }
}

.steps > .elem {
    position: relative;
    min-height: 192px;
    background: rgb(247, 249, 251);
    border: 1px solid rgb(231, 237, 242);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 26px;
    box-sizing: content-box;
    counter-increment: item;
}
.steps > .elem > .image {
    position: absolute;
    inset: 0 0 0 auto;
    width: 42%;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.5) 55%, rgb(0, 0, 0) 88%);
}
.steps > .elem > .image > .img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 45%;
}
.steps > .elem::before {
    content: counter(item, decimal-leading-zero);
    position: relative;
    z-index: 2;
    font: 200 38px / 1 Onest, sans-serif;
    color: rgb(43, 108, 232);
    flex: 0 0 auto;
}

.steps > .elem  > .info {
    position: relative;
    max-width: 47%;
    z-index: 2;
}

.steps > .elem  > .info > .title {
    font-weight: 500;
    line-height: 1.3;
    font-size: 15px;
    color: rgb(18, 20, 23);
    margin-bottom: 10px;
}
.steps > .elem  > .info > .text {
    line-height: 1.7;
    font-size: 13px;
    color: rgb(92, 99, 109);
}
/* End */


/* Start:/local/templates/geograft/components/bitrix/news.list/clinics/style.css?17919207693152*/
.clinics-section {
    background: rgb(231, 237, 242);
    padding-top: 72px;
    padding-bottom: 72px;
}

@media (min-width: 760px) {
    .clinics-section {
        padding-top: 120px;
        padding-bottom: 120px;
    }
}

.clinic > .head-block {
    display: flex;
    justify-content: space-between;
    margin-bottom: 52px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

@media (min-width: 1180px) {
    .clinic > .head-block {
        align-items: flex-end;
        gap: 48px;
        flex-direction: row;
    }
}

.clinic > .head-block .pre-title {
    display: block;
    font: 500 11px / 1 Manrope, sans-serif;
    letter-spacing: 0.22em;
    color: rgb(92, 99, 109);
}

.clinic > .head-block .title {
    margin: 18px 0 0;
    text-transform: uppercase;
}

.clinic > .head-block .post-title {
    font-size: 14px;
    line-height: 1.65;
    color: rgb(92, 99, 109);
    max-width: 360px;
    margin: 0;
    text-wrap: pretty;
}

.clinic-grid > .image-wrap {
    position: relative;
}


.clinic-grid > .image-wrap > .img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    user-select: none;
}
.clinic-grid > .image-wrap > .title {
    position: absolute;
    left: 20px;
    bottom: 20px;
    font: 400 10px / 1 ui-monospace, monospace;
    letter-spacing: 0.1em;
    color: rgb(110, 122, 136);
    text-transform: uppercase;
    background-color: #ffffffad;
    outline: 6px solid #ffffffad;
    border-radius: 1px;
}

/* TODO: плохая практика, имплемпентирована непосредственно по заданию */
.clinic-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.clinic-grid figure{position:relative;overflow:hidden;border-radius:6px;margin:0}
.clinic-grid img{width:100%;height:100%;object-fit:cover;display:block}
.clinic-grid .big{grid-column:span 3;aspect-ratio:3/2}
.clinic-grid .small{grid-column:span 2;aspect-ratio:4/3}
@media (max-width:1024px){
    .clinic-grid{grid-template-columns:repeat(2,1fr)}
    .clinic-grid .big{grid-column:span 2;aspect-ratio:16/9}
    .clinic-grid .small{grid-column:span 1;aspect-ratio:4/3}
    .clinic-grid .small:last-child{grid-column:span 2;aspect-ratio:16/9}
}
@media (max-width:767px){
    .clinic-grid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:0 16px 8px}
    .clinic-grid figure{flex:0 0 85%;aspect-ratio:4/3;scroll-snap-align:start}
}

/***/

.clinic > .info {
    display: grid;
    align-items: end;
    margin-top: 48px;
    border-top: 1px solid rgb(207, 218, 229);
    padding-top: 28px;
    grid-template-columns: 1fr;
    gap: 28px;
}

@media (min-width: 760px) {
    .clinic > .info {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }
}

@media (min-width: 1180px) {
    .clinic > .info {
        grid-template-columns: repeat(3, 1fr) auto;
    }
}

.clinic > .info .title {
    font: 400 12px / 1 Manrope, sans-serif;
    color: rgb(142, 150, 160);
    margin-bottom: 10px;
}
.clinic > .info .value {
    font: 400 15px / 1.5 Manrope, sans-serif;
}



/* End */


/* Start:/local/templates/geograft/components/bitrix/news.list/docs/style.css?17919207703150*/
.docs-section {
    background: rgb(255, 255, 255);
    padding-top: 72px;
    padding-bottom: 72px;
}

@media (min-width: 760px) {
    .docs-section {
        padding-top: 104px;
        padding-bottom: 104px;
    }
}
.docs-section > .grid {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr;
    gap: 28px;
}
@media (min-width: 760px) {
    .docs-section > .grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }
}

@media (min-width: 1180px) {
    .docs-section > .grid {
        grid-template-columns: 0.9fr 1.1fr;
        gap: 72px;
    }
}
.docs-section .head-block > .pre-title {
    font: 500 11px / 1 Manrope, sans-serif;
    letter-spacing: 0.22em;
    color: rgb(142, 150, 160);
}

.docs-section .head-block > .title {
    margin: 18px 0 26px;
    text-transform: uppercase;
}

.docs-section .head-block > .post-title {
    margin: 0px 0px 26px;
    font: 400 15px / 1.7 Manrope, sans-serif;
    color: rgb(92, 99, 109);
    max-width: 430px;
}

.docs-section .head-block > .info {
    display: grid;
    border-top: 1px solid rgb(221, 227, 233);
    padding-top: 24px;
    max-width: none;
    grid-template-columns: 1fr;
    gap: 28px;
}

@media (min-width: 760px) {
    .docs-section .head-block > .info {
        grid-template-columns: 1fr;
        gap: 48px;
        max-width: 440px;
    }
}

@media (min-width: 1180px) {
    .docs-section .head-block > .info {
        grid-template-columns: 1fr 1fr;
        gap: 22px 32px;
    }
}


.docs-section .head-block > .info .name {
    font: 400 12px / 1 Manrope, sans-serif;
    color: rgb(142, 150, 160);
    margin-bottom: 8px;
}

.docs-section .head-block > .info .text {
    font: 400 14px / 1.5 Manrope, sans-serif;
}

.docs-section .head-block > .buttons {
    display: flex;
    gap: 14px;
    margin-top: 32px;
    flex-wrap: wrap;
}

.docs {
    min-width: 0;
    max-width: 100%;
}

.docs > .content {
    min-width: 0;
    width: 100%;
    display: flex;
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 6px;
    scrollbar-width: none;
}

.docs > .content > .elem {
    position: relative;
    flex: 0 0 190px;
    aspect-ratio: 3 / 4;
    border: 1px solid rgb(221, 227, 233);
    border-radius: 4px;
    overflow: hidden;
    background: none rgb(247, 249, 251);
    scroll-snap-align: start;
    transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}

.docs > .content > .elem:hover {
    border-color: rgb(191, 204, 218);
    transform: translateY(-4px);
    box-shadow: rgba(18, 20, 23, 0.1) 0 14px 32px;
}

.docs > .content > .elem > .img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 0;
}

.docs > .content > .elem > .title {
    position: absolute;
    inset: auto 0 0;
    background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.94) 55%);
    padding: 22px 12px 12px;
    text-align: center;
    font: 400 10px / 1.4 Manrope, sans-serif;
    color: rgb(92, 99, 109);
}

.docs > .buttons {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

/* End */


/* Start:/local/templates/geograft/css/blocks/reviews_section.css?17919240841442*/
.reviews-section {
    background: rgb(244, 246, 248);
    padding-top: 72px;
    padding-bottom: 72px;
}

@media (min-width: 760px) {
    .reviews-section {
        padding-top: 120px;
        padding-bottom: 120px;
    }
}

.reviews-section .head-block {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 44px;
}

@media (min-width: 1180px) {
    .reviews-section .head-block {
        flex-direction: row;
        align-items: flex-end;
        gap: 48px;
    }
}

.reviews-section .head-block .pre-title {
    font: 500 11px / 1 Manrope, sans-serif;
    letter-spacing: 0.22em;
    color: rgb(142, 150, 160);
}

.reviews-section .head-block .title {
    margin: 18px 0 0;
    text-transform: uppercase;
}

.reviews-section .head-block .post-title  {
    font: 400 14px / 1.65 Manrope, sans-serif;
    color: rgb(92, 99, 109);
    max-width: 340px;
    margin: 0;
    text-wrap: pretty;
}

.reviews-section .botton-block  {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 44px;
    flex-wrap: wrap;
}
.reviews-section .botton-block > .note  {
    font: 400 12px / 1.6 Manrope, sans-serif;
    color: rgb(142, 150, 160);
    max-width: 470px;
}

.reviews-section .reviews {
    display: flex;
}

.reviews-section .reviews [data-area="bottom-right"],
.reviews-section .reviews .ihKkiO {
    display: none !important;
}
/* End */


/* Start:/local/templates/geograft/components/bitrix/news.list/faq/style.css?17919207711777*/

.accordion > .item {
    padding: 0 10px 0 20px;
    border-top: 1px solid rgb(221, 227, 233);
    transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}


.accordion > .item[open] {
    background-color: #fff;
}

.accordion > .item > .info {
    overflow: hidden;
    max-height: 0;
    padding: 0 0 0;
    font: 400 14px / 1.75 Manrope, sans-serif;
    color: rgb(92, 99, 109);
    margin-top: 0;
    transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
}

.accordion > .item[open] > .info {
    max-height: 1000px;
    padding: 0 0 20px;
}

@media (min-width: 768px) {
    .accordion > .item > .info {
        padding: 0 0 0;
    }

    .accordion > .item[open] > .info {
        padding: 0 0 26px;
    }
}

.accordion > .item[open] > .info > ol,
.accordion > .item[open] > .info > ul {
    padding-left: 20px;
    margin-top: 0;
}

.accordion > .item > .summary {
    position: relative;
    display: block;
    padding: 20px 20px 20px 0;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.4;
    transition: color 0.3s ease-in-out;
    cursor: pointer;
}

@media (min-width: 768px) {
    .accordion > .item > .summary {
        padding: 26px 26px 26px 0;
    }
}

.accordion > .item[open] > .summary {
    color: var(--color-1);
}

.accordion > .item > .summary::-webkit-details-marker {
    display: none;
}

.accordion > .item > .summary::before {
    content: '+';
    color: #2b6ce8;
    position: absolute;
    top: 50%;
    right: 12px;
    width: 6px;
    height: 6px;
    transform: translateY(-50%);
    font: 300 20px / 1 Onest, sans-serif;
}

@media (min-width: 768px) {
    .accordion > .item > .summary::before {
        right: 14px;
    }
}

.accordion > .item[open] > .summary::before {
    content: '-';
}
/* End */
/* /local/templates/geograft/components/bitrix/news.list/home-banner/style.css?17919207725577 */
/* /local/templates/geograft/components/bitrix/news.list/features/style.css?17919207711152 */
/* /local/templates/geograft/components/bitrix/news.list/directions/style.css?17919207705260 */
/* /local/templates/geograft/components/bitrix/news.list/methods/style.css?17919207724925 */
/* /local/templates/geograft/components/bitrix/news.list/results/style.css?17919207744909 */
/* /local/templates/geograft/components/bitrix/news.list/prices/style.css?17919207735217 */
/* /local/templates/geograft/css/blocks/installment_section.css?17919240842578 */
/* /local/templates/geograft/css/forms/installment-form.css?17919240844444 */
/* /local/templates/geograft/components/bitrix/news.list/specialist/style.css?17919207752829 */
/* /local/templates/geograft/components/bitrix/news.list/specialists/style.css?17919207751532 */
/* /local/templates/geograft/components/bitrix/news.list/steps/style.css?17919207772502 */
/* /local/templates/geograft/components/bitrix/news.list/clinics/style.css?17919207693152 */
/* /local/templates/geograft/components/bitrix/news.list/docs/style.css?17919207703150 */
/* /local/templates/geograft/css/blocks/reviews_section.css?17919240841442 */
/* /local/templates/geograft/components/bitrix/news.list/faq/style.css?17919207711777 */