/* Start:/company/about.css?178699028123247*/
<?php

require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");

/**
 * @global CMain $APPLICATION
 */

$APPLICATION->SetTitle("");
?>.about-company-page {
    --green: #1a936f;
    --green-dark: #147a5d;
    --green-deep: #0c5c45;
    --green-soft: #e7f5f0;
    --green-soft-2: #d9efe7;
    --green-light: #f4faf7;

    --dark: #202824;
    --grey: #69736f;
    --border: #dbe8e3;

    width: 100%;
    color: var(--dark);
}

.about-company-page *,
.about-company-page *::before,
.about-company-page *::after {
    box-sizing: border-box;
}


/* COMMON */

.about-company-label {
    margin-bottom: 12px;

    color: var(--green);

    font-size: 12px;
    line-height: 1.3;
    font-weight: 800;

    letter-spacing: .13em;
    text-transform: uppercase;
}

.about-company-label--center {
    text-align: center;
}

.about-company-heading {
    max-width: 820px;

    margin: 0 auto 17px;

    color: var(--dark);

    font-size: 36px;
    line-height: 1.18;
    font-weight: 700;

    text-align: center;
}

.about-company-heading--left {
    margin-left: 0;
    text-align: left;
}

.about-company-subtitle {
    max-width: 690px;

    margin: 0 auto 45px;

    color: var(--grey);

    font-size: 15px;
    line-height: 1.7;

    text-align: center;
}


/* BUTTONS */

.about-company-btn {
    min-height: 48px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 12px 27px !important;

    background: #1a936f !important;
    background-color: #1a936f !important;

    border: 1px solid #1a936f !important;
    border-radius: 30px !important;

    color: #fff !important;

    font-family: inherit !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;

    text-decoration: none !important;

    cursor: pointer !important;

    opacity: 1 !important;
    visibility: visible !important;

    transition:
        background-color .22s ease,
        border-color .22s ease,
        transform .22s ease,
        box-shadow .22s ease !important;
}

.about-company-btn:hover,
.about-company-btn:focus {
    background: #147a5d !important;
    background-color: #147a5d !important;

    border-color: #147a5d !important;

    color: #fff !important;

    transform: translateY(-2px);

    box-shadow:
        0 8px 22px rgba(26,147,111,.22) !important;
}


/* HERO */

.about-company-hero {
    min-height: 450px;

    display: flex;
    align-items: center;

    margin-bottom: 75px;

    overflow: hidden;

    border-radius: 26px;

    background:
        linear-gradient(
            90deg,
            rgba(5,25,19,.82) 0%,
            rgba(5,25,19,.58) 44%,
            rgba(5,25,19,.08) 100%
        ),
        url("/company/images/about-hero.png")
        center / cover no-repeat;
}

.about-company-hero__content {
    max-width: 700px;

    padding: 55px;

    color: #fff;
}

.about-company-kicker {
    margin-bottom: 13px;

    color: #b8eadb;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: .1em;
    text-transform: uppercase;
}

.about-company-hero__title {
    margin: 0 0 13px;

    color: #fff;

    font-size: 52px;
    line-height: 1.05;
    font-weight: 800;
}

.about-company-hero__subtitle {
    max-width: 620px;

    margin: 0 0 17px;

    color: #fff;

    font-size: 25px;
    line-height: 1.35;
}

.about-company-hero__text {
    max-width: 610px;

    margin: 0;

    color: rgba(255,255,255,.92);

    font-size: 15px;
    line-height: 1.7;
}

.about-company-hero__buttons {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 27px;
}


/* INTRO */

.about-company-intro {
    display: grid;

    grid-template-columns:
        minmax(0,1.5fr)
        minmax(280px,.72fr);

    gap: 55px;

    align-items: center;

    margin-bottom: 85px;
}

.about-company-intro__text p {
    margin: 0 0 14px;

    color: var(--grey);

    font-size: 14px;
    line-height: 1.75;
}

.about-company-intro__lead {
    color: var(--dark) !important;

    font-size: 18px !important;
    font-weight: 500;
}


/* EXPERIENCE 30+ */

.about-company-experience {
    position: relative;

    min-height: 330px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 34px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #1a936f 0%,
            #147a5d 100%
        );

    border-radius: 27px;

    color: #fff;

    box-shadow:
        0 18px 42px rgba(26,147,111,.18);
}

.about-company-experience__decor {
    position: absolute;

    border: 1px solid rgba(255,255,255,.16);
    border-radius: 50%;
}

.about-company-experience__decor--one {
    width: 190px;
    height: 190px;

    top: -85px;
    right: -60px;
}

.about-company-experience__decor--two {
    width: 120px;
    height: 120px;

    top: -42px;
    right: -7px;
}

.about-company-experience__top {
    position: relative;
    z-index: 2;

    margin-bottom: 12px;
}

.about-company-experience__top span {
    display: inline-block;

    padding: 7px 12px;

    background: rgba(255,255,255,.12);

    border: 1px solid rgba(255,255,255,.18);
    border-radius: 20px;

    color: #d9f5ec;

    font-size: 10px;
    line-height: 1.2;
    font-weight: 800;

    letter-spacing: .09em;
    text-transform: uppercase;
}

.about-company-experience__number {
    position: relative;
    z-index: 2;

    margin-bottom: 2px;

    color: #fff;

    font-size: 74px;
    line-height: 1;
    font-weight: 800;

    letter-spacing: -.04em;
}

.about-company-experience__number span {
    color: #bceadb;

    font-size: 42px;
    vertical-align: top;
}

.about-company-experience__title {
    position: relative;
    z-index: 2;

    margin-bottom: 14px;

    color: #fff;

    font-size: 20px;
    line-height: 1.25;
    font-weight: 700;
}

.about-company-experience p {
    position: relative;
    z-index: 2;

    margin: 0;

    max-width: 300px;

    color: rgba(255,255,255,.82);

    font-size: 12px;
    line-height: 1.65;
}

.about-company-experience__bottom {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;

    margin-top: 25px;

    color: #fff;

    font-size: 10px;
    line-height: 1.2;
    font-weight: 700;
}

.about-company-experience__bottom i {
    display: block;

    width: 5px;
    height: 5px;

    background: #bceadb;

    border-radius: 50%;
}


/* FACTS */

.about-company-facts {
    margin-bottom: 100px;
}

.about-company-facts__grid {
    display: grid;

    grid-template-columns: repeat(4,1fr);

    gap: 16px;

    margin-top: 42px;
}

.about-company-fact {
    position: relative;

    min-height: 230px;

    padding: 27px 25px;

    overflow: hidden;

    background:
        linear-gradient(
            155deg,
            #fff 0%,
            #f4faf7 100%
        );

    border: 1px solid #dce9e4;
    border-radius: 22px;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}

.about-company-fact::before {
    content: "";

    position: absolute;

    right: -42px;
    bottom: -62px;

    width: 150px;
    height: 150px;

    background: rgba(26,147,111,.07);

    border-radius: 50%;
}

.about-company-fact:hover {
    background:
        linear-gradient(
            145deg,
            #eef8f4,
            #dff2eb
        );

    border-color: rgba(26,147,111,.4);

    transform: translateY(-4px);

    box-shadow:
        0 17px 38px rgba(26,107,83,.10);
}

.about-company-fact__top {
    position: relative;
    z-index: 2;

    margin-bottom: 29px;
}

.about-company-fact__top span {
    color: #9aaea7;

    font-size: 10px;
    font-weight: 800;
}

.about-company-fact__value {
    position: relative;
    z-index: 2;

    margin-bottom: 8px;

    color: var(--green);

    font-size: 42px;
    line-height: 1;
    font-weight: 800;
}

.about-company-fact__value--text {
    font-size: 31px;
}

.about-company-fact h3 {
    position: relative;
    z-index: 2;

    margin: 0 0 9px;

    color: var(--green-deep);

    font-size: 15px;
}

.about-company-fact p {
    position: relative;
    z-index: 2;

    margin: 0;

    color: var(--grey);

    font-size: 11px;
    line-height: 1.6;
}


/* CATALOG */

.about-company-catalog {
    margin-bottom: 100px;
}

.about-company-catalog__grid {
    display: grid;

    grid-template-columns: repeat(4,1fr);

    gap: 17px;
}

.about-company-category {
    min-height: 292px;

    display: flex;
    flex-direction: column;

    padding: 24px;

    background:
        linear-gradient(
            150deg,
            #fff,
            #f7fbf9
        );

    border: 1px solid var(--border);
    border-radius: 21px;

    color: var(--dark) !important;

    text-decoration: none !important;

    box-shadow:
        0 7px 20px rgba(31,77,64,.045);

    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.about-company-category:hover {
    background:
        linear-gradient(
            145deg,
            #e4f4ee,
            #f4faf7
        );

    border-color: #abd9ca;

    transform: translateY(-5px);

    box-shadow:
        0 17px 38px rgba(26,147,111,.13);
}

.about-company-category__num {
    color: #94aba3;

    font-size: 11px;
    font-weight: 800;
}

.about-company-category__picture {
    width: 78px;
    height: 78px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 15px 0 18px;

    background: #fff;

    border: 1px solid #d8e8e2;
    border-radius: 17px;

    overflow: hidden;

    transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease;
}

.about-company-category__picture img {
    display: block;

    width: 100%;
    height: 100%;

    padding: 5px;

    object-fit: contain;

    transition: transform .25s ease;
}

.about-company-category:hover
.about-company-category__picture {
    background: #f7fcfa;

    border-color: #94cdb9;

    transform: translateY(-2px);
}

.about-company-category:hover
.about-company-category__picture img {
    transform: scale(1.07);
}

.about-company-category h3 {
    margin: 0 0 9px;

    color: var(--green-deep);

    font-size: 17px;
    line-height: 1.3;
}

.about-company-category p {
    margin: 0 0 20px;

    color: var(--grey);

    font-size: 12px;
    line-height: 1.6;
}

.about-company-category__more {
    margin-top: auto;

    color: var(--green);

    font-size: 12px;
    font-weight: 800;
}


/* QUALITY */

.about-company-quality {
    margin-bottom: 100px;

    padding: 48px;

    background:
        linear-gradient(
            135deg,
            #eaf6f2,
            #f9fcfb
        );

    border: 1px solid #cfe5dd;
    border-radius: 26px;
}

.about-company-quality__top {
    display: grid;

    grid-template-columns: 1.1fr .9fr;

    gap: 55px;

    align-items: end;

    margin-bottom: 42px;
}

.about-company-quality__top > p {
    margin: 0;

    color: var(--grey);

    font-size: 14px;
    line-height: 1.7;
}

.about-company-quality__steps {
    display: grid;

    grid-template-columns: repeat(4,1fr);

    gap: 13px;
}

.about-company-quality__steps article {
    position: relative;

    min-height: 205px;

    padding: 26px 24px;

    background: #fff;

    border: 1px solid #dfeae6;
    border-radius: 18px;

    box-shadow:
        0 8px 24px rgba(39,91,75,.05);

    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

.about-company-quality__steps article::after {
    content: "";

    position: absolute;

    left: 24px;
    bottom: 0;

    width: 48px;
    height: 4px;

    background: var(--green);

    border-radius: 3px 3px 0 0;
}

.about-company-quality__steps article:hover {
    transform: translateY(-4px);

    border-color: #b4d9cd;

    box-shadow:
        0 14px 32px rgba(26,147,111,.09);
}

.about-company-quality__step-number {
    margin-bottom: 34px;

    color: var(--green);

    font-size: 11px;
    font-weight: 800;
}

.about-company-quality__steps h3 {
    margin: 0 0 10px;

    color: var(--green-deep);

    font-size: 17px;
}

.about-company-quality__steps p {
    margin: 0;

    color: var(--grey);

    font-size: 12px;
    line-height: 1.65;
}


/* DETAILS */

.about-company-details {
    position: relative;

    margin-bottom: 100px;

    padding: 52px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #0e654c 0%,
            #1a936f 54%,
            #5eb99d 100%
        );

    border-radius: 28px;
}

.about-company-details::before {
    content: "";

    position: absolute;

    width: 330px;
    height: 330px;

    right: -110px;
    top: -160px;

    border: 1px solid rgba(255,255,255,.14);
    border-radius: 50%;
}

.about-company-details::after {
    content: "";

    position: absolute;

    width: 230px;
    height: 230px;

    right: 40px;
    top: -115px;

    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
}

.about-company-details__heading {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns: 1.1fr .9fr;

    gap: 55px;

    align-items: end;

    margin-bottom: 38px;
}

.about-company-details
.about-company-label {
    color: #c7eee2;
}

.about-company-details
.about-company-heading {
    color: #fff;
}

.about-company-details__heading > p {
    margin: 0;

    color: rgba(255,255,255,.84);

    font-size: 14px;
    line-height: 1.7;
}

.about-company-details__grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns: repeat(3,1fr);

    gap: 16px;
}

.about-company-detail {
    min-height: 295px;

    display: flex;
    flex-direction: column;

    padding: 29px;

    background: rgba(255,255,255,.97);

    border: 1px solid rgba(255,255,255,.7);
    border-radius: 22px;

    box-shadow:
        0 14px 34px rgba(4,57,41,.15);

    transition:
        transform .24s ease,
        box-shadow .24s ease;
}

.about-company-detail:hover {
    transform: translateY(-6px);

    box-shadow:
        0 20px 44px rgba(4,57,41,.22);
}

.about-company-detail__number {
    color: var(--green);

    font-size: 12px;
    font-weight: 800;
}

.about-company-detail__line {
    width: 46px;
    height: 3px;

    margin: 17px 0 23px;

    background: var(--green);

    border-radius: 5px;
}

.about-company-detail h3 {
    margin: 0 0 12px;

    color: var(--green-deep);

    font-size: 21px;
}

.about-company-detail p {
    margin: 0 0 20px;

    color: var(--grey);

    font-size: 13px;
    line-height: 1.7;
}

.about-company-detail__footer {
    display: inline-flex;

    align-items: center;

    align-self: flex-start;

    gap: 7px;

    margin-top: auto;

    padding: 9px 14px;

    background: var(--green-soft);

    border: 1px solid #d2e9e1;
    border-radius: 20px;

    color: var(--green-dark);

    font-size: 12px;
    line-height: 1.25;
    font-weight: 700;
}

.about-company-detail__footer span {
    color: var(--green);

    font-size: 14px;
}


/* HISTORY */

.about-company-history {
    margin-bottom: 100px;

    padding: 55px 42px;

    background:
        linear-gradient(
            145deg,
            #f0f8f5,
            #fff
        );

    border: 1px solid #d5e7e0;
    border-radius: 27px;
}

.about-company-history__header {
    margin-bottom: 45px;
}

.about-company-timeline {
    position: relative;

    max-width: 820px;

    margin: 0 auto;
}

.about-company-timeline::before {
    content: "";

    position: absolute;

    top: 28px;
    bottom: 54px;

    left: 122px;

    width: 3px;

    background:
        linear-gradient(
            to bottom,
            #a5daca 0%,
            #1a936f 45%,
            #147a5d 100%
        );

    border-radius: 10px;
}

.about-company-timeline__item {
    position: relative;

    display: grid;

    grid-template-columns:
        90px
        28px
        1fr;

    gap: 20px;

    min-height: 135px;
}

.about-company-timeline__year {
    padding-top: 18px;

    color: var(--green);

    font-size: 20px;
    line-height: 1;
    font-weight: 800;

    text-align: right;
}

.about-company-timeline__axis {
    position: relative;

    display: flex;
    justify-content: center;
}

.about-company-timeline__axis span {
    position: relative;
    z-index: 3;

    width: 17px;
    height: 17px;

    margin-top: 17px;

    background: var(--green);

    border: 4px solid #fff;
    border-radius: 50%;

    box-shadow:
        0 0 0 4px #dcefe9;
}

.about-company-timeline__item:not(:last-child)
.about-company-timeline__axis::after {
    content: "";

    position: absolute;

    z-index: 2;

    bottom: 12px;

    width: 7px;
    height: 7px;

    border-right: 2px solid var(--green);
    border-bottom: 2px solid var(--green);

    transform: rotate(45deg);
}

.about-company-timeline__card {
    margin-bottom: 16px;

    padding: 19px 23px;

    background: #fff;

    border: 1px solid #d8e7e2;
    border-radius: 17px;

    box-shadow:
        0 7px 21px rgba(31,77,64,.05);

    transition:
        border-color .22s ease,
        transform .22s ease,
        box-shadow .22s ease;
}

.about-company-timeline__card:hover {
    border-color: #add8ca;

    transform: translateX(5px);

    box-shadow:
        0 12px 28px rgba(26,147,111,.09);
}

.about-company-timeline__card h3 {
    margin: 0 0 7px;

    color: var(--green-deep);

    font-size: 17px;
}

.about-company-timeline__card p {
    max-width: 570px;

    margin: 0;

    color: var(--grey);

    font-size: 12px;
    line-height: 1.65;
}


/* BENEFITS */

.about-company-benefits {
    margin-bottom: 95px;
}

.about-company-benefits__header {
    margin-bottom: 42px;
}

.about-company-benefits__grid {
    display: grid;

    grid-template-columns: repeat(3,1fr);

    gap: 16px;
}

.about-company-benefit {
    position: relative;

    min-height: 205px;

    display: flex;
    flex-direction: column;

    padding: 27px 25px;

    overflow: hidden;

    border-radius: 21px;

    transition:
        transform .22s ease,
        box-shadow .22s ease;
}

.about-company-benefit::after {
    content: "";

    position: absolute;

    width: 110px;
    height: 110px;

    right: -45px;
    top: -50px;

    border: 1px solid currentColor;
    border-radius: 50%;

    opacity: .08;
}

.about-company-benefit:hover {
    transform: translateY(-5px);

    box-shadow:
        0 15px 34px rgba(26,107,83,.12);
}

.about-company-benefit--strong {
    background:
        linear-gradient(
            145deg,
            #1a936f,
            #178162
        );

    color: #fff;
}

.about-company-benefit--mint {
    background:
        linear-gradient(
            145deg,
            #dcefe8,
            #eef8f4
        );

    border: 1px solid #c9e3da;

    color: var(--green-deep);
}

.about-company-benefit--soft {
    background:
        linear-gradient(
            145deg,
            #f0f8f5,
            #fff
        );

    border: 1px solid #d5e8e1;

    color: var(--green-deep);
}

.about-company-benefit__number {
    margin-bottom: 42px;

    font-size: 11px;
    font-weight: 800;

    opacity: .78;
}

.about-company-benefit h3 {
    margin: 0 0 10px;

    color: inherit;

    font-size: 18px;
    line-height: 1.3;
}

.about-company-benefit p {
    margin: 0;

    color: inherit;

    font-size: 12px;
    line-height: 1.65;

    opacity: .82;
}


/* CTA */

.about-company-cta {
    position: relative;

    display: grid;

    grid-template-columns:
        1fr
        auto;

    gap: 45px;

    align-items: center;

    margin-bottom: 60px;

    padding: 45px 48px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #e4f4ee,
            #f8fcfa
        );

    border: 1px solid #cce5dc;
    border-radius: 25px;
}

.about-company-cta::after {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    right: -70px;
    top: -100px;

    background: rgba(26,147,111,.07);

    border-radius: 50%;
}

.about-company-cta__content,
.about-company-cta__buttons {
    position: relative;
    z-index: 2;
}

.about-company-cta h2 {
    max-width: 650px;

    margin: 0 0 11px;

    color: var(--green-deep);

    font-size: 31px;
    line-height: 1.25;
}

.about-company-cta p {
    max-width: 620px;

    margin: 0;

    color: var(--grey);

    font-size: 13px;
    line-height: 1.65;
}

.about-company-cta__buttons {
    display: flex;
    flex-direction: column;

    gap: 12px;

    min-width: 190px;
}

.about-company-cta__button {
    width: 100% !important;
    min-width: 190px !important;

    background: #1a936f !important;
    background-color: #1a936f !important;

    color: #fff !important;

    border-color: #1a936f !important;

    opacity: 1 !important;
}

button.about-company-cta__button {
    appearance: none;
    -webkit-appearance: none;

    margin: 0;

    outline: none;
}


/* TABLET */

@media (max-width: 1024px) {

    .about-company-facts__grid,
    .about-company-catalog__grid,
    .about-company-quality__steps,
    .about-company-benefits__grid {
        grid-template-columns: repeat(2,1fr);
    }

    .about-company-details__heading {
        grid-template-columns: 1fr;

        gap: 15px;
    }

}


/* MOBILE */

@media (max-width: 767px) {

    .about-company-heading {
        font-size: 27px;
    }

    .about-company-hero {
        min-height: 500px;

        border-radius: 18px;
    }

    .about-company-hero__content {
        padding: 38px 22px;
    }

    .about-company-hero__title {
        font-size: 40px;
    }

    .about-company-hero__subtitle {
        font-size: 20px;
    }

    .about-company-hero__buttons {
        flex-direction: column;
    }

    .about-company-btn {
        width: 100% !important;
    }

    .about-company-intro {
        grid-template-columns: 1fr;
    }

    .about-company-experience {
        min-height: 300px;
    }

    .about-company-facts__grid,
    .about-company-catalog__grid,
    .about-company-quality__steps,
    .about-company-details__grid,
    .about-company-benefits__grid {
        grid-template-columns: 1fr;
    }

    .about-company-quality {
        padding: 32px 20px;
    }

    .about-company-quality__top {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .about-company-details {
        padding: 38px 22px;
    }

    .about-company-history {
        padding: 38px 18px;
    }

    .about-company-timeline::before {
        left: 69px;
    }

    .about-company-timeline__item {
        grid-template-columns:
            48px
            18px
            1fr;

        gap: 12px;
    }

    .about-company-timeline__year {
        padding-top: 19px;

        font-size: 13px;
    }

    .about-company-timeline__card {
        padding: 16px;
    }

    .about-company-cta {
        grid-template-columns: 1fr;

        padding: 34px 22px;
    }

    .about-company-cta__buttons {
        width: 100%;
    }

    .about-company-cta__button {
        width: 100% !important;
    }

}
/* End */
/* /company/about.css?178699028123247 */