/* Start:/local/templates/box/style/about-section.css?17548928786567*/
@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');

.about-section {
    --gray: #c6c7ca;
    --bg-color: #f0f1f5;
    font-family: "Mulish", sans-serif;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    gap: 0;
}

.about-section>* {
    width: 100%;
    background-color: var(--bg-color);

}

.about-intro {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-intro h1 {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    line-height: 1.2;
    font-size: clamp(5px, 33vw, 450px);
    text-align: center;
    color: var(--gray);
    font-weight: 600;
}

.about-section img {
    pointer-events: none;
    user-select: none;
}

.about-intro img {
    position: absolute;
    top: 0;
    left: 10%;
    max-width: 40%;
    z-index: 1;
}

.experience {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    aspect-ratio: 1457/1140;
}

.experience__text {
    margin-top: 25%;
    margin-left: 5%;
    text-align: center;
}

.experience__text h2 {
    font-size: clamp(20px, 2vw, 32px);
    font-weight: 600;
    line-height: 1.2;
    color: #88888b;
    margin: 0 0 10px;
}

.experience__text p {
    font-size: clamp(16px, 1.5vw, 20px);
    font-weight: 600;
    line-height: 1.5;
    color: #88888b;
    margin: 0;
}

.experience img {
    position: absolute;
}

.hand-image {
    top: 0;
    right: 0;
    max-width: 62%;
}

.years-experience {
    top: 14%;
    right: 0;
    max-width: 28%;
}

.partners {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 47%;
    margin-left: 5%;
    margin-top: auto;
}

.partners__wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

.partners__wrapper img {
    object-fit: contain;
    position: static;
}

.partners__text {
    margin-top: 20px;
    font-size: clamp(16px, 1.5vw, 30px);
    line-height: 1.5;
    color: #000;
    text-align: center;
    font-weight: 600;
}

.philosophy {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.philosophy img {
    max-width: 55%;
}

.philosophy p {
    font-size: clamp(16px, 1.5vw, 22px);
    line-height: 1.5;
    color: #000;
    text-align: right;
    padding-right: 2%;
    margin-left: -8%;
    font-weight: 600;
}

.story {
    display: flex;
}

.story p {
    font-size: clamp(16px, 1.5vw, 20px);
    line-height: 1.5;
    color: #000;
    margin-left: 2%;
    font-weight: 600;
}

.story img {
    flex: 1;
    max-width: 61%;
    margin-top: -10%;
}

.about-footer {
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.about-footer p {
    font-size: clamp(16px, 1.5vw, 24px);
    line-height: 1.5;
    color: #000;
    font-weight: 600;
    text-align: center;
}

.about-footer img {
    max-width: 80%;
    margin-top: -8%;
}

/* Мобильные устройства (до 767px) */
@media (max-width: 767px) {
    .experience img {
        position: static;
    }

    /* .about-section {
        gap: 20px;
    } */

    .experience {
        aspect-ratio: 4/5;
        /* padding: 20px; */
    }

    .experience__text {
        margin-top: 10%;
        margin-left: 0;
        width: 100%;
    }

    .experience__text {
        order: -1;
    }

    .experience__text h2 {
        font-size: clamp(18px, 4vw, 24px);
    }

    .experience__text p {
        font-size: clamp(14px, 3.5vw, 18px);
    }

    .hand-image {
        max-width: 100%;
        top: 30%;
    }

    .years-experience {
        max-width: 60%;
        top: 5%;
        right: 5%;
    }

    .partners {
        max-width: 90%;
        margin-left: 5%;
        margin-right: 5%;
    }
    .story,
    .philosophy {
        flex-direction: column;
    }

    .story img{
        width: 100%;
        max-width: 100%;
        margin-top: 0;
        order: -1;
    }

    .philosophy p {
        text-align: center;
        margin-left: 0;
        margin-top: 10%;
    }

    .partners__wrapper {
        gap: 10px;
        width: 100%;
    }

    .partners__wrapper img {
        height: auto;
    }

    .partners__text {
        font-size: clamp(14px, 3.5vw, 20px);
        margin-top: 15px;
    }

    .philosophy img {
        position: static;
    }

    .philosophy {
        /* padding: 15px; */
        gap: 15px;
    }

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

    .philosophy p {
        font-size: clamp(14px, 3.5vw, 18px);
    }

    .story {
        /* padding: 15px; */
        gap: 15px;
    }

    .story p {
        font-size: clamp(14px, 3.5vw, 18px);
    }

    .about-footer {
        padding: 20px 0px;
    }

    .about-footer p {
        font-size: clamp(14px, 3.5vw, 18px);
    }

    .about-footer img {
        max-width: 100%;
        margin-top: -5%;
    }
}

/* Очень маленькие экраны (до 480px) */
@media (max-width: 480px) {
    .experience {
        aspect-ratio: 3/4;
        /* padding: 15px; */
    }

    .experience__text {
        margin-top: 5%;
    }

    .experience__text h2 {
        font-size: clamp(16px, 5vw, 20px);
    }

    .experience__text p {
        font-size: clamp(12px, 4vw, 16px);
    }

    .hand-image {
        top: 25%;
    }

    .years-experience {
        max-width: 70%;
        top: 2%;
        right: 2%;
    }

    .partners {
        max-width: 95%;
        margin-left: 2.5%;
        margin-right: 2.5%;
        margin-top: 20px;
    }

    .partners__wrapper img {
    }

    .partners__text {
        font-size: clamp(12px, 4vw, 16px);
    }

    .philosophy {
        /* padding: 10px; */
        gap: 10px;
    }

    .philosophy p {
        font-size: clamp(12px, 4vw, 16px);
    }

    .story {
        /* padding: 10px; */
        gap: 10px;
    }

    .story p {
        font-size: clamp(12px, 4vw, 16px);
    }

    .about-footer {
        padding: 15px 0px;
    }

    .about-footer p {
        font-size: clamp(12px, 4vw, 16px);
    }
}
/* End */
/* /local/templates/box/style/about-section.css?17548928786567 */