.about-start__holder {
    padding: 40px 0;
    background: var(--primary-color);
}

.about-start {
    display: flex;
    gap: 20px;
    padding: 40px;
    background: #fff;
    border-radius: 20px;
    @media (width <= 768px) {
        flex-wrap: wrap;
        padding: 20px;
    }
}

.about-start__left {
    width: 700px;
    flex-shrink: 0;
    & .about-start__name {
        font: 700 20px/24px var(--primary-font);
        margin-top: 15px;
    }
    @media (width <= 768px) {
        width: 100%;
        display: flex;
        flex-direction: column;
        & .about-start__name {
            order: 1;
            margin-bottom: 10px;
        }
        & .about-start__image {
            order: 2;
        }
        & .about-start__text {
            order: 3;
        }
    }
}

.about-start__left img {
    display: block;
    width: 100%;
    height: 324px;
    border-radius: 10px;
    @media (width <= 768px) {
        height: auto;
    }
}

.about-start__left h1 {
    font: 700 30px/36px var(--primary-font);
    text-transform: uppercase;
    margin: 15px 0;
    @media (width <= 768px) {
        font-size: 24px;
        line-height: 30px;
    }
}

.about-start__left .btn {
    width: 164px;
    line-height: 40px;
    padding: 0;
    font-size: 13px;
    @media (width <= 768px) {
        order: 4;
        width: 100%;
        margin-top: 15px;
    }
}

.about-start__right {
    display: flex;
    flex-direction: column;
    .start-year {
        font-size: 101px;
        line-height: 1;
    }
    @media (width <= 768px) {
        flex-direction: column-reverse;
        gap: 20px;
    }
}

.year-block {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: var(--primary-color);
    border-radius: 10px;
    padding: 30px;
    font: 700 24px/30px var(--primary-font);
    color: #fff;
    height: 324px;
}

.year-block p {
    margin: auto 0 0 0;
    padding-top: 20px;
    border-top: 3px solid #fff;
    font-size: 18px;
    line-height: 21px;
}

.mission-block {
    height: 258px;
    margin-top: 20px;
    padding: 20px;
    background: var(--bg-block);
    border-radius: 10px;
    font: 500 18px/24px var(--primary-font);
}

.mission-title {
    display: flex;
    gap: 10px;
    align-items: center;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 3px solid var(--secondary-color);
}

.mission-title__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    border-radius: 22px;
    background: var(--primary-color);
}

.about-director__holder {
    padding: 40px 0;
}

.about-director {
    display: flex;
    gap: 20px;
    @media (width <= 768px) {
        flex-wrap: wrap;
    }
}

.about-director__image {
    flex: 0 0 280px;
    overflow: hidden;
    border-radius: 10px;
    background: var(--primary-color);
    @media (width <= 768px) {
        flex: 0 0 100%;
        display: flex;
        gap: 20px;
        padding: 20px;
        & picture {
            width: 182px;
            flex-shrink: 0;
            border-radius: 10px;
            overflow: hidden;
        }
    }
}

.about-director__image .caption {
    color: #fff;
    font: 400 14px/20px var(--primary-font);
    padding: 20px 0;
    text-align: center;
    & span:first-child {
        display: block;
        font: 700 18px/21px var(--primary-font);
        margin-bottom: 8px;
    }
    @media (width <= 768px) {
        text-align: left;
    }
}


.about-director__text {
    padding: 30px 40px;
    border-radius: 10px;
    background: var(--bg-block);
    & .title {
        font: 700 20px/24px var(--primary-font);
        margin-bottom: 10px;
    }
    @media (width <= 768px) {
        padding: 30px 20px;
    }
}

.about-director__text .notice {
    padding-left: 20px;
    border-left: 3px solid var(--secondary-color);
    & p {
        margin: 0;
    }
    & ul {
        margin-bottom: 15px;
    }
    @media (width <= 768px) {
        margin-top: 50px;
    }
}

.about-company__holder {
    background: var(--bg-block);
    padding: 40px 0;
    @media (width <= 768px) {
        background: #fff;
        padding: 0;
    }
}

.about-company__title {
    font: 700 40px/49px var(--primary-font);
    & span:last-child {
        display: block;
        font-size: 24px;
        line-height: 30px;
        margin: 10px 0 15px;
    }
    @media (width <= 768px) {
        font-size: 24px;
        line-height: 1;
        & span:last-child {
            font-size: 18px;
            line-height: 21px;
        }
    }
}

.about-company__item {
    background: #fff;
    border-radius: 10px;
    padding: 30px 40px;
    margin-bottom: 10px;
    & .item-title {
        margin-bottom: 10px;
    }
    @media (width <= 768px) {
        background: var(--bg-block);
        padding: 20px;
    }
}

.about-company__item.first {
    margin-top: 20px;
    @media (width <= 768px) {
        display: flex;
        flex-direction: column;
        & .item-title {
            order: 1;
            margin: 0;
        }
        & p {
            order: 3;
        }
    }
}

.about-block-image {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 25px;
    @media (width <= 768px) {
        order: 2;
        grid-template-columns: 100%;
        margin: 15px 0;
        & .img:not(.first-img) {
            display: none;;
        }
    }
}

.about-block-image img {
    border-radius: 10px;
}

.about-company__logistic {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto auto;
    gap: 20px;
    align-items: stretch;
    @media (width <= 768px) {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        background: #fff;
        border-radius: 10px;
    }
}

.logistic__text {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    padding: 20px;
    background: var(--bg-block);
    border-radius: 10px;
    @media (width <= 768px) {
        background: #fff;;
    }
}

.logistic__discount {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: #fff;
    background: var(--primary-color);
    border-radius: 10px;
    padding: 20px;
    font: 700 24px/30px var(--primary-font);
    & .percent {
        font-size: 101px;
        line-height: 1;
    }
    & span:last-child {
        margin-top: auto;
        font-size: 18px;
        line-height: 21px;
        padding-top: 15px;
        border-top: 3px solid #fff;
    }
    @media (width <= 768px) {
        grid-row: 3 / 4;
    }
}

.logistic__image {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 100px;
    @media (width <= 768px) {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        padding: 0 20px;
    }
}

.about-company__equip {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    & .equip__text {
        padding: 30px;
        background: var(--bg-block);
        border-radius: 10px;
    }
    & .equip__image img {
        display: block;
        border-radius: 10px;
    }
    @media (width <=768px) {
        display: flex;
        flex-direction: column-reverse;
        margin-top: 20px;
        & .equip__text {
            padding: 10px 0 0 0;
        }
    }
}

.about-numbers__holder {
    padding: 60px 0;
    @media (width <=768px) {
        padding: 30px 0;
    }
}

.about-numbers {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    @media (width <=768px) {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

.about-numbers__item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--primary-color);
    border-radius: 10px;
    padding: 20px;
    color: #fff;
    font: 700 16px/1 var(--primary-font);
    & span:nth-child(2) {
        font-size: 68px;
    }
    & span:last-child {
        font-size: 14px;
        padding-top: 10px;
        border-top: 3px solid #fff;
    }
    @media (width <=768px) {
        font-size: 13px;
        & span:nth-child(2) {
            font-size: 57px;
        }
        & span:last-child {
            font-size: 12px;
        }
    }
}

.about-numbers__item:last-child {
    @media (width <=768px) {
        grid-column: 1 / -1;
        & span:nth-child(2) {
            font-size: 0;
        }
    }
}

.about-workers {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-top: 20px;
    .about-workers__image {
        grid-column: 1 / 4;
        & img {
            border-radius: 10px;
        }
    }
    @media (width <= 768px) {
        display: flex;
        flex-direction: column;
    }
}

.about-workers__text {
    grid-column: 4 / 6;
    display: flex;
    padding: 0;
    border-radius: 10px;
    background: var(--primary-color);
    font: 400 14px/20px var(--primary-font);
    color: #fff;
    overflow: hidden;
    & .left {
        padding: 20px 0 20px 20px;
        width: 250px;
    }
    & .title {
        font: 700 24px/30px var(--primary-font);
        padding-bottom: 15px;
        border-bottom: 3px solid #fff;
        margin-bottom: 10px;
    }
    & .callback {
        font-size: 13px;
        line-height: 40px;
        padding: 0;
        margin-top: 20px;
        width: 164px;
        &:hover {
            background: var(--bg-block);
            color: #282828;
        }
    }
    & .right {
        margin-left: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-end;
        & img {
            width: 100%;
        }
    }
}

.about-history__holder {
    padding: 40px 0;
    background: var(--bg-block);
    @media (width <= 768px) {
        padding: 0 20px;
        background: #fff;
    }
}

.about-history {
    display: flex;
    gap: 30px;
    background: #fff;
    border-radius: 20px;
    padding: 40px;
    margin-top: 30px;
    @media (width <= 768px) {
        padding: 0;
        margin: 0;
    }
}

.about-history__steps {
    padding: 30px 16px 30px 30px;
    background: var(--bg-block);
    border-radius: 10px;  
    width: 730px;
    flex-shrink: 0;
    @media (width <= 768px) {
        width: 330px;
        background: #fff;
        padding: 15px 0;
    }
}

.history-steps {
    position: relative;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    &:before {
        position: absolute;
        display: block;
        top: 6px;
        left: 4px;
        content: "";
        height: 331px;
        width: 3px;
        background: var(--primary-color);
        @media (width <= 768px) {
            height: 530px;
        }
    }
    & li {
        position: relative;
        padding: 0 0 0 25px;
        &:before {
            content: "";
            display: block;
            position: absolute;
            top: 5px;
            left: 0px;
            width: 10px;
            height: 10px;
            border-radius: 10px;
            background: var(--primary-color);
        }
        & .year {
            font-weight: 700;
        }
        & p {
            margin-bottom: 20px;
        }
    }
}

.about-history__text {
    & img {
        border-radius: 10px;
        margin-bottom: 15px;
    }
    & .h5 {
        margin-bottom: 10px;
    }
    @media (width <= 768px) {
        display: none;
    }
}

.about-sert__holder {
    padding: 60px 0;
    & .item-title {
        margin-bottom: 10px;
    }
    @media (width <= 768px) {
        padding: 30px 0;
    }
}

.sert__items {
    display: flex;
    gap: 20px;
    align-items: center;
    & .sert__text {
        width: 350px;
    }
    @media (width <= 768px) {
        flex-direction: column;
        align-items: flex-start;
        padding: 0 15px;
    }
}

.sert__image {
    display: flex;
    gap: 15px;
    align-items: center;
    & img {
        box-shadow: 0px 4px 15px 0px #0000001A;
        transition: all .25s linear;
        &:hover {
            transform: scale(1.02);
        }
    }
    @media (width <= 768px) {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        & img {
            box-shadow: 0px 3px 12px 0px #0000001A;
        }
    }
}

.about-why__holder {
    padding: 20px 0 20px 0;
    background: var(--bg-block);
    @media (width <= 768px) {
        padding: 0;
        background: #fff;
        & h2 {
            margin: 0;
            width: 250px;
        }
    }
}

.about-why {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    margin: 40px 0 0 0;
    @media (width <= 768px) {
        margin: 10px 0 0 0;
    }
}

.about-why__item {
    width: 224px;
    min-width: 224px;
    padding:  15px;
    background: var(--bg-block);
    border-radius: 10px;
}

.about-why__header {
    padding-top: 20px;
    height: 85px;
    border-bottom: 3px solid var(--secondary-color);
    margin-bottom: 10px;
}

.about-why__title {
    font: 700 20px/24px var(--primary-font);
}

.about-contacts__holder {
    padding: 60px;
    background: #fff;
    @media (width <= 768px) {
        padding: 20px 0;
    }
}

.about-contacts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    & .item-title {
        margin-bottom: 15px;
    }
    & > div {
        border-radius: 10px;
        padding: 30px;
    }
    & .left {
        background: var(--primary-color);
        color: #fff;
    }
    & .right {
        background-color: var(--bg-block);
        background-image: url(../images/about/about-contacts-woman.png);
        background-repeat: no-repeat;
        background-position: right top;
        & .btns-holder {
            display: flex;
            gap: 20px;
        }
    }
    @media (width <= 768px) {
        grid-template-columns: 100%;
        & > div {
            padding: 20px;
        }
        & .right {
            background-position: right 85px;
            & .btns-holder {
                flex-direction: column;
                & > * {
                    width: 183px;
                }
            }
        }
    }
}

.about-contacts .callback-btn {
    display: flex;
    width: 198px;
    height: 45px;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font: 500 16px / 16px var(--primary-font);
    color: #fff;
    background: var(--green-color);
    border-radius: 4px;
    cursor: pointer;
}