.page-nesting {
    margin: 0;
    padding: 0;
    margin-top: 50px;
    display: flex;
    flex-direction: row;
    align-items: center;
    list-style-type: none;
}

.page-nesting__li {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.page-nesting__image {
    max-width: 30px;
}

.page-nesting-arrow {
    font-size: 20px;
    color: var(--color-text-default);
    margin: 0;
    padding: 0;
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 5px;
}

.page-nesting__link {
    transition: text-decoration-color 0.3s ease, transform 0.7s ease-in-out;
    text-decoration: underline transparent;
    margin-bottom: 0;
}

.page-nesting__link:hover {
    text-decoration-color: currentcolor;
    transform: scale(1.04);
}

.page-nesting__link-text {
    margin: 0;
    padding: 0;
}

@media (max-width: 1199px) {
    .page-nesting {
        margin-top: 80px;
    }

    .page-nesting__image {
        max-width: 25px;
    }

    .page-nesting-arrow {
        font-size: 25px;
        margin-left: 15px;
        margin-right: 15px;
        margin-bottom: 5px;
    }
}

@media (max-width: 991px) {
    .page-nesting {
        margin-top: 60px;
    }
    
    .page-nesting__image {
        max-width: 20px;
    }

    .page-nesting-arrow {
        font-size: 20px;
        margin-left: 15px;
        margin-right: 15px;
        margin-bottom: 0px;
    }
}

@media (max-width: 768px) {
    .page-nesting {
        margin-top: 50px;
    }
    
    .page-nesting__image {
        max-width: 18px;
    }

    .page-nesting-arrow {
        font-size: 18px;
        margin-left: 10px;
        margin-right: 10px;
        margin-bottom: 0px;
    }
}

@media (max-width: 575px) {
    .page-nesting {
        margin-top: 40px;
    }
    
    .page-nesting__image {
        max-width: 16px;
    }
    
    .page-nesting-arrow {
        font-size: 16px;
    }
}

/* Главная */

.main-section {
    background-image: image-set(
        url("../image/main-page/incoming-train.webp") type("image/webp"),
        url("../image/main-page/incoming-train.jpg") type("image/jpeg")
    );
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 1000px;
}

.main-section__title {
    margin-bottom: 30px;
}

.main-section__text {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

.main-section__text-uppercase {
    padding-top: 100px;
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    margin-bottom: 30px;
    font-family: var(--font-family-title, "RubikBold"), sans-serif;
}

@media (min-width: 2000px) {
    .main-section {
        height: 1300px;
    }
}

@media (max-width: 1199px) {
    .main-section {
        height: 800px;
    }

    .main-section__title {
        margin-bottom: 25px;
    }

    .main-section__text {
        max-width: 800px;
    }

    .main-section__text-uppercase {
        padding-top: 80px;
        margin-bottom: 25px;
    }
}

@media (max-width: 991px) {
    .main-section {
        height: 650px;
    }

    .main-section__title {
        margin-bottom: 20px;
    }

    .main-section__text {
        max-width: 600px;
    }

    .main-section__text-uppercase {
        padding-top: 60px;
        margin-bottom: 20px;
    }
}

@media (max-width: 768px) {
    .main-section {
        height: 500px;
    }

    .main-section__title {
        margin-bottom: 10px;
    }

    .main-section__text {
        max-width: 600px;
    }

    .main-section__text-uppercase {
        padding-top: 50px;
        margin-bottom: 10px;
    }
}

@media (max-width: 575px) {
    .main-section {
        height: 450px;
    }

    .main-section__text {
        max-width: 500px;
    }
}

@media (max-width: 475px) {
    .main-section {
        height: 380px;
    }

    .main-section__text {
        max-width: 500px;
    }
}

.section-main-information-company {
    padding-top: 100px;
    padding-bottom: 100px;
}

.section-main-information-company__title {
    margin-bottom: 10px;
}

.section-main-information-company__text {
    max-width: 600px;
    padding-bottom: 50px;
}

@media (max-width: 1199px) {
    .section-main-information-company {
        padding-top: 80px;
        padding-bottom: 80px;
    }
    
    .section-main-information-company__title {
        margin-bottom: 10px;
    }
    
    .section-main-information-company__text {
        max-width: 500px;
        padding-bottom: 40px;
    }
}

@media (max-width: 991px) {
    .section-main-information-company {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    
    .section-main-information-company__title {
        margin-bottom: 10px;
    }
    
    .section-main-information-company__text {
        max-width: 400px;
        padding-bottom: 30px;
    }
}

@media (max-width: 768px) {
    .section-main-information-company {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    
    .section-main-information-company__title {
        margin-bottom: 10px;
    }
    
    .section-main-information-company__text {
        max-width: 300px;
        padding-bottom: 25px;
    }
}

@media (max-width: 575px) {
    .section-main-information-company {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    
    .section-main-information-company__title {
        margin-bottom: 10px;
    }
    
    .section-main-information-company__text {
        max-width: 300px;
        padding-bottom: 20px;
    }
}

.section-main-information-company__number-points {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 100px;
    margin-bottom: 50px;
}

.section-main-information-company__number-point {
    border-left: 3px solid var(--color-accent-black);
    padding-left: 15px;
}

.number-point {
    color: var(--color-accent-blue);
    font-family: var(--font-family-text, "RubikRegular"), sans-serif;
}

@media (max-width: 1199px) {
    .section-main-information-company__number-points {
        grid-template-columns: repeat(4, 1fr);
        gap: 80px;
        margin-bottom: 40px;
    }

    .section-main-information-company__number-point {
        padding-left: 10px;
    }
}

@media (max-width: 991px) {
    .section-main-information-company__number-points {
        grid-template-columns: repeat(4, 1fr);
        gap: 60px;
        margin-bottom: 30px;
    }
}

@media (max-width: 768px) {
    .section-main-information-company__number-points {
        grid-template-columns: repeat(4, 1fr);
        gap: 50px;
        margin-bottom: 25px;
    }
}

@media (max-width: 575px) {
    .section-main-information-company__number-points {
        gap: 20px;
        margin-bottom: 20px;
    }
}

@media (max-width: 475px) {
    .section-main-information-company__number-points {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }
}

.section-main-information-company__information-block {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
}

.section-main-information-company__information-block-image {
    max-width: 550px;
}

.section-main-information-company__information-block-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.section-main-information-company__information-block-info-text {
    width: 100%;
    text-align: justify;
    margin-bottom: 10px;
}

.section-main-information-company__information-block .button-red {
    margin-top: 20px;
}

@media (max-width: 1199px) {
    .section-main-information-company__information-block {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }

    .section-main-information-company__information-block-image {
        max-width: 500px;
    }

    .section-main-information-company__information-block .button-red {
        margin-top: 10px;
    }
}

@media (max-width: 991px) {
    .section-main-information-company__information-block {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .section-main-information-company__information-block-image {
        max-width: 100%;
    }

    .section-main-information-company__information-block .button-red {
        margin-top: 10px;
    }
}

.section-main-services {
    background-color: var(--color-accent-gray-light, #B3B3B3);
    padding: 50px 0;
}

.section-main-services__title {
    text-align: center;
    margin-bottom: 50px;
}

.section-main-services__cards-block {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 35px 20px; /* больше отступ по вертикали между рядами */
    justify-content: center;
}

.service-card {
    position: relative;
    width: 100%;
    min-height: 220px;
    padding: 30px 20px;
    background-color: var(--background-color, #ffffff);
    border-radius: 18px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    overflow: visible;
    transition:
            background-color 0.25s ease,
            color 0.25s ease,
            transform 0.25s ease,
            box-shadow 0.25s ease,
            z-index 0s;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    z-index: 1;
}

.service-card-logo {
    position: relative;
    width: 100%;
    min-height: 220px;
    padding: 30px;
    background-color: var(--background-color, #ffffff);
    border-radius: 18px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.service-card__logo-image {
    width: 100%;
    max-width: 250px;
}

/* Верхний ряд */
.service-card--top-left {
    border-top-left-radius: 70px;
}

.service-card--top-right {
    border-top-right-radius: 70px;
}

/* Нижний ряд */
.service-card--bottom-left {
    border-bottom-left-radius: 70px;
}

.service-card--bottom-right {
    border-bottom-right-radius: 70px;
}

.service-card__icon {
    position: absolute;
    top: -55px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 100px;
    opacity: 0;
    pointer-events: none;
    transition:
            top 0.25s ease,
            opacity 0.25s ease;
    z-index: 5;
}

.service-card__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.service-card__title {
    color: var(--color-text-default, #111111);
    margin-bottom: 5px;
    transition: color 0.25s ease;
}

.service-card__text {
    color: rgba(0, 0, 0, 0.6);
    transition: color 0.25s ease;
}

.service-card:hover {
    background-color: var(--color-accent-blue);
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25);
    z-index: 10;
}

.service-card:hover .service-card__icon {
    top: -40px;
    opacity: 1;
}

.service-card:hover .service-card__title,
.service-card:hover .service-card__text {
    color: var(--color-text-light, #ffffff);
}

@media (max-width: 1199px) {
    .section-main-services {
        padding: 40px 0;
    }

    .section-main-services__title {
        margin-bottom: 40px;
    }

    .section-main-services__cards-block {
        gap: 25px 15px; /* немного больше вертикальный зазор */
    }

    .service-card {
        min-height: 220px;
        padding: 40px 20px;
    }

    .service-card-logo {
        min-height: 220px;
        padding: 40px 20px;
    }

    .service-card__logo-image {
        max-width: 250px;
    }

    .service-card--top-left {
        border-top-left-radius: 90px;
    }

    .service-card--top-right {
        border-top-right-radius: 90px;
    }

    .service-card--bottom-left {
        border-bottom-left-radius: 90px;
    }

    .service-card--bottom-right {
        border-bottom-right-radius: 90px;
    }

    .service-card:hover .service-card__icon {
        top: -30px;
        opacity: 1;
    }

    .service-card__icon {
        top: -60px;
    }
}

@media (max-width: 991px) {
    .section-main-services {
        padding: 30px 0;
    }

    .section-main-services__title {
        margin-bottom: 50px;
    }

    .section-main-services__cards-block {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .service-card {
        width: 100%;
        min-height: 190px;
        padding: 30px;
        background-color: var(--background-color, #ffffff);
    }

    .service-card-logo {
        display: none;
    }

    .service-card__logo-image {
        display: none;
    }

    .service-card--top-left {
        border-top-left-radius: 10px;
    }

    .service-card--top-right {
        border-top-right-radius: 10px;
    }

    .service-card--bottom-left {
        border-bottom-left-radius: 10px;
    }

    .service-card--bottom-right {
        border-bottom-right-radius: 10px;
    }

    .service-card__icon {
        top: -30px;
        opacity: 1;
    }

    .service-card:hover {
        background-color: var(--background-color, #ffffff);
        transform: none;
        box-shadow: none;
        z-index: 10;
    }

    .service-card:hover .service-card__icon {
        top: -20px;
        opacity: 1;
    }

    .service-card:hover .service-card__title,
    .service-card:hover .service-card__text {
        color: var(--color-text-default, #111111);
    }

    .service-card--bottom-right {
        grid-column: 1 / -1;
        max-width: 400px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .section-main-services {
        padding: 25px 0;
    }

    .section-main-services__title {
        margin-bottom: 30px;
    }

    .section-main-services__cards-block {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .service-card--bottom-right {
        grid-column: 1 / -1;
        max-width: 300px;
        margin: 0 auto;
    }
}

@media (max-width: 575px) {
    .section-main-services {
        padding: 25px 0;
    }

    .section-main-services__title {
        margin-bottom: 30px;
    }

    .section-main-services__cards-block {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 20px;
    }

    .service-card {
        min-height: 160px;
        padding: 15px 15px;
    }

    .service-card__icon {
        width: 80px;
        height: 80px;
    }

    .service-card--bottom-right {
        grid-column: 1 / -1;
        max-width: 200px;
        margin: 0 auto;
    }
}

@media (max-width: 410px) {
    .service-card {
        min-height: 170px;
    }
}

.section-main-advantages {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.section-main-advantages__info {
    padding-top: 50px;
    padding-bottom: 50px;
}

.section-main-advantages__info-title {
    margin-bottom: 30px;
}

.section-main-advantages__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.section-main-advantages__image {
    width: 500px;
}

.section-main-advantages__info-point {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 4px;
    align-items: start;
}

.section-main-advantages__info-point img {
    grid-row: 1 / 3;
    grid-column: 1 / 2;
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.section-main-advantages__info-point .subtitle {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
    margin: 0;
}

.section-main-advantages__info-point .text {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    margin: 0;
}

@media (min-width: 2000px) {
    .section-main-advantages__info {
        padding-top: 100px;
        padding-bottom: 100px;
    }
}

@media (max-width: 1199px) {
    .section-main-advantages__info {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .section-main-advantages__image {
        width: 450px;
    }
}

@media (max-width: 991px) {
    .section-main-advantages {
        display: flex;
        flex-direction: column;
        height: auto;
        gap: 24px;
    }

    .section-main-advantages__info-title {
        text-align: center;
    }

    .section-main-advantages__info {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .section-main-advantages__list {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }

    .section-main-advantages__image {
        display: none;
    }
}

@media (max-width: 768px) {
    .section-main-advantages__info {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .section-main-advantages__image {
        width: 330px;
    }
}

@media (max-width: 410px) {
    .section-main-advantages__image {
        width: 300px;
    }
}

.section-main-contact-us {
    position: relative;
    min-height: 350px;
    background-color: var(--color-accent-gray-light, #B3B3B3);
}

.section-main-contact-us::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;

    background-color: var(--color-accent-gray-light, #FED48C);

    background-image:
            linear-gradient(
                    108deg,
                    rgba(131,131,131,1) 0,
                    rgba(131,131,131,1) 9%,
                    transparent 9%,
                    transparent 100%
            ),
            linear-gradient(
                    108deg,
                    transparent 0,
                    transparent 15%,
                    rgba(131,131,131,1) 15%,
                    rgba(131,131,131,1) 24%,
                    transparent 24%,
                    transparent 100%
            ),
            linear-gradient(
                    108deg,
                    transparent 0,
                    transparent 30%,
                    rgba(131,131,131,1) 30%,
                    rgba(131,131,131,1) 39%,
                    transparent 39%,
                    transparent 100%
            );

    background-repeat: no-repeat;
    background-size:
            90% 150%,
            90% 150%,
            90% 150%;
    background-position:
            1% 0,
            4% 0,
            7% 0;
}

.section-main-contact-us__content {
    position: relative;
    z-index: 3;
    margin-left: auto;
    text-align: end;
    padding: 70px 0;
}

.section-main-contact-us__image {
    position: absolute;
    z-index: 2;
    left: 30%;
    top: -55px;
    max-height: 130%;
    height: auto;
}

.section-main-contact-us__content-title {
    margin-bottom: 30px;
}

@media (max-width: 1199px) {
    .section-main-contact-us {
        position: relative;
        min-height: 250px;
        background-color: var(--color-accent-gray-light, #B3B3B3);
    }

    .section-main-contact-us__image {
        position: absolute;
        z-index: 2;
        left: 30%;
        top: -45px;
        max-height: 140%;
        height: auto;
    }
}

@media (max-width: 991px) {
    .section-main-contact-us {
        position: relative;
        min-height: 250px;
        background-color: var(--color-accent-gray-light, #B3B3B3);
    }

    .section-main-contact-us__image {
        position: absolute;
        z-index: 2;
        left: 30%;
        top: -30px;
        max-height: 140%;
        height: auto;
    }
}

@media (max-width: 991px) {
    .section-main-contact-us {
        position: relative;
        min-height: 250px;
        background-color: var(--color-accent-gray-light, #B3B3B3);
    }

    .section-main-contact-us__image {
        display: none;
    }
}

@media (max-width: 575px) {
    .section-main-contact-us__content {
        padding: 70px 10px;
    }
}

/* Контакты */
.contact-main-section {
    background-image: image-set(
            url("../image/contact/contact-background.webp") type("image/webp") 1x,
            url("../image/contact/contact-background.png") type("image/png") 1x
    );
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: cover;
    padding-top: 100px;
}

.contact-main-section__container {
    position: relative;
    min-height: 300px;
    padding-right: 500px;
}

.contact-main-section__info {
    margin-bottom: 10px;
}

@media (min-width: 1900px) {
    .contact-main-section {
        padding-top: 110px;
    }
}

@media (min-width: 2000px) {
    .contact-main-section {
        padding-top: 120px;
    }
}

@media (min-width: 2200px) {
    .contact-main-section {
        padding-top: 170px;
    }
}

@media (min-width: 2500px) {
    .contact-main-section {
        padding-top: 250px;
    }
}

@media (min-width: 2800px) {
    .contact-main-section {
        padding-top: 300px;
    }
}

@media (min-width: 3100px) {
    .contact-main-section {
        padding-top: 400px;
    }
}

@media (min-width: 3600px) {
    .contact-main-section {
        padding-top: 500px;
    }
}

@media (max-width: 1199px) {
    .contact-main-section {
        padding-top: 40px;
    }

    .contact-main-section__container {
        min-height: 250px;
        padding-right: 450px;
    }
}

@media (max-width: 991px) {
    .contact-main-section {
        padding-top: 30px;
    }

    .contact-main-section__container {
        min-height: 200px;
        padding-right: 350px;
    }

    .contact-main-section__info {
        margin-bottom: 8px;
    }
}

@media (max-width: 768px) {
    .contact-main-section {
        padding-top: 25px;
    }

    .contact-main-section__container {
        min-height: 180px;
        padding-right: 250px;
    }
}

@media (max-width: 575px) {
    .contact-main-section {
        padding-top: 20px;
    }

    .contact-main-section__container {
        min-height: 180px;
        padding-right: 100px;
    }
}

.contact-information-section {
    padding-top: 100px;
    padding-bottom: 100px;
}

.contact-information-section__title {
    text-align: center;
    max-width: 500px;
    margin: 0 auto;
    margin-bottom: 30px;
}

.contact-information-section__points-contact {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 50px;
}

.contact-information-section__point {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.contact-information-section__point-image {
    width: 50px;
    height: 50px;
}

.contact-information-section__point-text {
    text-align: center;
}

@media (max-width: 1199px) {
    .contact-information-section {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .contact-information-section__title {
        max-width: 400px;
        margin-bottom: 30px;
    }

    .contact-information-section__points-contact {
        grid-template-columns: repeat(4, 1fr);
        gap: 40px;
    }

    .contact-information-section__point-image {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 991px) {
    .contact-information-section {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .contact-information-section__title {
        max-width: 350px;
        margin-bottom: 30px;
    }

    .contact-information-section__points-contact {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .contact-information-section__point-image {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 768px) {
    .contact-information-section {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .contact-information-section__title {
        max-width: 350px;
        margin-bottom: 20px;
    }
}

@media (max-width: 575px) {
    .contact-information-section {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .contact-information-section__title {
        max-width: 300px;
    }
}

.map {
    width: 100%;
    height: 500px;
}

@media (max-width: 1199px) {
    .map {
        height: 450px;
    }
}

@media (max-width: 991px) {
    .map {
        height: 400px;
    }
}

@media (max-width: 768px) {
    .map {
        height: 350px;
    }
}

@media (max-width: 575px) {
    .map {
        height: 300px;
    }
}

/* Услуги*/
.body__gray { background-color: var(--color-accent-gray-light, #B3B3B3); }

.services-main-section { padding-top: 100px; padding-bottom: 100px; }
.services-main-section__text { margin-bottom: 50px; }

.services-main-section__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
}

.services-main-section__cards > .services-main-section__card:last-child {
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 550px;
    width: 100%;
}

/* ====== Flip-карточка (логика как в примере) ====== */
.services-main-section__card {
    perspective: 1000px;
    -webkit-perspective: 1000px;
}

.services-main-section__inner {
    position: relative;
    width: 100%;
    height: 260px;
    border-radius: 10px;
    background-color: #ffffff;

    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;

    transition: transform 0.5s;
    will-change: transform;

    cursor: pointer;

    /* touch-friendly */
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

.services-main-section__inner.is-flipped {
    transform: rotateY(180deg);
}

/* hover как в примере (только для устройств с мышью) */
@media (hover: hover) and (pointer: fine) {
    .services-main-section__card:hover .services-main-section__inner {
        transform: rotateY(180deg);
    }
}

.services-main-section__face {
    position: absolute;
    inset: 0;
    padding: 30px 35px;

    display: flex;
    flex-direction: column;

    border-radius: 10px;
    box-sizing: border-box;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    background-color: #ffffff;
    color: #000000;
}

.services-main-section__face--front {
    transform: rotateY(0deg);
    align-items: center;
    justify-content: center;
    text-align: center;
}

.services-main-section__face--back {
    transform: rotateY(180deg);
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
}

/* Важно: чтобы скрытая сторона не ловила клики/тапы */
.services-main-section__face--back { pointer-events: none; }
.services-main-section__inner.is-flipped .services-main-section__face--front { pointer-events: none; }
.services-main-section__inner.is-flipped .services-main-section__face--back  { pointer-events: auto; }

/* Фокус с клавиатуры */
.services-main-section__inner:focus-visible {
    outline: 2px solid #111111;
    outline-offset: 3px;
}

/* ====== Контент карточки ====== */
.services-main-section__img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin-bottom: 20px;
}

.services-main-section__title { text-transform: uppercase; color: #111111; }
.services-main-section__text-card { text-align: center; }
.services-main-section__face .subtitle { color: #111111 !important; }

/* ====== Адаптив ====== */
@media (max-width: 1199px) {
    .services-main-section { padding-top: 80px; padding-bottom: 80px; }
    .services-main-section__text { margin-bottom: 40px; }
    .services-main-section__cards { gap: 30px; }
    .services-main-section__face { padding: 30px; }
    .services-main-section__cards > .services-main-section__card:last-child {
        max-width: 450px;
    }
}

@media (max-width: 991px) {
    .services-main-section { padding-top: 60px; padding-bottom: 60px; }
    .services-main-section__text { margin-bottom: 30px; }
    .services-main-section__face { padding: 20px; }
    .services-main-section__cards > .services-main-section__card:last-child {
        max-width: 350px;
    }
}

@media (max-width: 768px) {
    .services-main-section__cards { grid-template-columns: 1fr; gap: 20px; }
    .services-main-section__inner { height: auto; min-height: 200px; }
    .services-main-section { padding-top: 50px; padding-bottom: 50px; }
    .services-main-section__text { margin-bottom: 25px; }
    .services-main-section__cards > .services-main-section__card:last-child {
        max-width: 100%;
    }
}

@media (max-width: 575px) {
    .services-main-section { padding-top: 40px; padding-bottom: 40px; }
    .services-main-section__text { margin-bottom: 20px; }
}

.services-faq-section {
    background-color: var(--background-color, #FFFFFF);
    padding-top: 100px;
    padding-bottom: 100px;
}

.services-faq-section__title-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 50px;
}

.accordion {
    width: 100%;
}

.accordion__item {
    border-top: none;
    border-bottom: none;
}

.accordion__item:not(:last-child) {
    border-bottom: 0.5px solid var(--color-accent-gray-light, #B3B3B3);
}

.accordion__item:not(:first-child) {
    border-top: 0.5px solid var(--color-accent-gray-light, #B3B3B3);
}

.accordion__header {
    width: 100%;
    padding: 15px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    font: inherit;
    text-align: start;
}

.accordion__icon {
    position: relative;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.accordion__icon::before {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--color-accent-black, #111111);
    border-bottom: 2px solid var(--color-accent-black, #111111);
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.5s ease;
}

.accordion__content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease;
}

.accordion__text {
    padding-bottom: 15px;
}

.accordion__item--active .accordion__content {
    max-height: 500px;
}

.accordion__item--active .accordion__icon::before {
    transform: translateY(-30%) rotate(-50deg);
}

@media (max-width: 1199px) {
    .services-faq-section {
        padding-top: 80px;
        padding-bottom: 80px;
    }
    
    .services-faq-section__title-container {
        margin-bottom: 40px;
    }
}

@media (max-width: 991px) {
    .services-faq-section {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    
    .services-faq-section__title-container {
        margin-bottom: 30px;
    }
}

@media (max-width: 768px) {
    .services-faq-section {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    
    .services-faq-section__title-container {
        margin-bottom: 25px;
    }

    .services-faq-section__title-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .accordion__icon {
        width: 16px;
        height: 16px;
    }
    
    .accordion__icon::before {
        width: 8px;
        height: 8px;
    }
}

@media (max-width: 575px) {
    .services-faq-section {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    
    .services-faq-section__title-container {
        margin-bottom: 20px;
    }
}

/* О компании */

.about-company-main-section {
    background-image: image-set(
        url("../image/about-company/company-office.webp") type("image/webp"),
        url("../image/about-company/company-office.jpg") type("image/jpeg")
    );
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 800px;
    position: relative;
}

.about-company-main-section__title {
    padding-top: 100px;
    margin-bottom: 30px;
}

.about-company-main-section__text-block {
    position: absolute;
    right: 15%;
    bottom: 80px;
    height: auto;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 15px;
    border-radius: 10px;
    max-width: 400px;
}

@media (min-width: 3000px) {
    .about-company-main-section {
        height: 1500px;
    }
}

@media (min-width: 2000px) {
    .about-company-main-section {
        height: 1000px;
    }
}

@media (max-width: 1199px) {
    .about-company-main-section {
        height: 700px;
    }

    .about-company-main-section__title {
        padding-top: 80px;
        margin-bottom: 30px;
    }

    .about-company-main-section__text-block {
        right: 10%;
        bottom: 60px;
        padding: 15px;
        max-width: 350px;
    }
}

@media (max-width: 991px) {
    .about-company-main-section {
        height: 600px;
    }

    .about-company-main-section__title {
        padding-top: 60px;
        margin-bottom: 20px;
    }

    .about-company-main-section__text-block {
        right: 10%;
        bottom: 80px;
        padding: 15px;
        max-width: 350px;
    }
}

@media (max-width: 768px) {
    .about-company-main-section {
        height: 500px;
    }

    .about-company-main-section__title {
        padding-top: 50px;
        margin-bottom: 20px;
    }

    .about-company-main-section__text-block {
        right: 10%;
        bottom: 15%;
        padding: 10px;
        max-width: 300px;
    }
}

@media (max-width: 575px) {
    .about-company-main-section {
        height: 400px;
    }

    .about-company-main-section__title {
        padding-top: 40px;
        margin-bottom: 20px;
    }

    .about-company-main-section__text-block {
        right: 5%;
        bottom: 20%;
        padding: 10px;
        max-width: 250px;
    }
}

@media (max-width: 450px) {
    .about-company-main-section {
        height: 400px;
    }

    .about-company-main-section__title {
        padding-top: 40px;
        margin-bottom: 20px;
    }

    .about-company-main-section__text-block {
        right: 10px;
        left: 10px;
        max-width: 100%;
    }
}

.about-company-values {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 50px;
    align-items: center;
    text-align: center;
    justify-content: center;
    padding-top: 50px;
    padding-bottom: 50px;
}

.about-company-values__point-image {
    max-width: 150px;
}

@media (max-width: 1199px) {
    .about-company-values {
        gap: 40px;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .about-company-values__point-image {
        max-width: 120px;
    }
}

@media (max-width: 991px) {
    .about-company-values {
        gap: 30px;
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .about-company-values__point-image {
        max-width: 100px;
    }
}

@media (max-width: 768px) {
    .about-company-values {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
        padding-top: 25px;
        padding-bottom: 25px;
    }

    .about-company-values__point-image {
        max-width: 80px;
    }

    .about-company-values__point-last {
        display: none;
    }
}

@media (max-width: 575px) {
    .about-company-values {
        gap: 20px;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .about-company-values__point-image {
        max-width: 60px;
    }
}

.about-company-info {
    padding-top: 50px;
    padding-bottom: 50px;
    height: 500px;
    position: relative;
    overflow: hidden;

    background-image:
            linear-gradient(
                    to left,
                    rgba(255, 255, 255, 0.95) 0%,
                    rgba(255, 255, 255, 0.9) 40%,
                    rgba(230, 230, 230, 0.9) 100%
            ),
            url("../image/about-company/map.png");

    background-repeat: no-repeat, no-repeat;
    background-position: 0 0, center right;
    background-size: cover;
}

.about-company-info__text {
    margin-bottom: 15px;
}

@media (max-width: 1199px) {
    .about-company-info {
        padding-top: 40px;
        padding-bottom: 40px;
        height: 400px;
    }

    .about-company-info__text {
        margin-bottom: 10px;
    }
}

@media (max-width: 991px) {
    .about-company-info {
        padding-top: 30px;
        padding-bottom: 30px;
        height: 300px;
    }
}

@media (max-width: 768px) {
    .about-company-info {
        padding-top: 25px;
        padding-bottom: 25px;
        height: 300px;
    }
}

@media (max-width: 575px) {
    .about-company-info {
        padding-top: 20px;
        padding-bottom: 20px;
        height: 300px;
    }
}

.about-company-services {
    padding-top: 100px;
    padding-bottom: 100px;
}

.about-company-services__info {
    display: flex;
    align-items: end;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 100px;
}

.about-company-services__info-title {
    text-align: end;
}

.about-company-services__card-block {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.about-company-services__card-image {
    max-width: 150px;
    position: absolute;
    bottom: 130px;
    right: 10px;
}

.about-company-services__card {
    background-color: var(--color-accent-blue);
    padding: 30px;
    border-radius: 10px;
    min-height: 200px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: end;
}

.about-company-services__card-logo {
    min-height: 200px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-company-services__card-image-logo {
    position: relative;
    max-width: 340px;
}

.about-company-services__card-text {
    color: var(--color-text-light, #ffffff);
}

@media (max-width: 1199px) {
    .about-company-services {
        padding-top: 80px;
        padding-bottom: 80px;
    }
    
    .about-company-services__info {
        gap: 10px;
        margin-bottom: 80px;
    }
    
    .about-company-services__card-block {
        display: grid;
        gap: 40px;
    }
    
    .about-company-services__card-image {
        max-width: 120px;
        bottom: 140px;
        right: 10px;
    }
    
    .about-company-services__card {
        padding: 20px;
    }

    .about-company-services__card-image-logo {
        max-width: 250px;
    }
}

@media (max-width: 991px) {
    .about-company-services {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .about-company-services__info {
        gap: 10px;
        margin-bottom: 60px;
    }

    .about-company-services__card-block {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        row-gap: 50px;
    }

    .about-company-services__card-image {
        max-width: 100px;
        bottom: 100px;
        right: 10px;
    }

    .about-company-services__card {
        padding: 20px;
        min-height: 150px;
    }

    .about-company-services__card-logo {
        display: none;
    }

    .about-company-services__card-image-logo {
        display: none;
    }

    .about-company-services__card-block > .about-company-services__card:last-child {
        grid-column: 1 / -1;
        justify-self: center;
        max-width: 360px;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .about-company-services {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    
    .about-company-services__info {
        margin-bottom: 50px;
    }

    .about-company-services__card-block {
        gap: 25px;
    }

    .about-company-services__card-block > .about-company-services__card:last-child {
        max-width: 260px;
    }
}

@media (max-width: 575px) {
    .about-company-services {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    
    .about-company-services__info {
        margin-bottom: 40px;
    }

    .about-company-services__card-block > .about-company-services__card:last-child {
        max-width: 200px;
    }
}

.about-company-history {
    background-color: var(--color-accent-gray-light, #B3B3B3);
    padding-top: 50px;
    padding-bottom: 50px;
}

.about-company-history__title-block {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
    margin-bottom: 50px;
}

.about-company-history__text {
    max-width: 400px;
}

.about-company-history__information-card {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 50px;
}

/* Карточки истории */
.about-company-history__card,
.about-company-history__card-accent {
    position: relative;
    padding-top: 14px; /* чтобы линия не наезжала на текст */
}

/* Серая статичная линия сверху */
.about-company-history__card::after,
.about-company-history__card-accent::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 2px;
    width: 100%;
    background-color: var(--color-accent-gray-black, #838383);
    z-index: 1;
}

/* Красная линия (по умолчанию не видна) */
.about-company-history__card::before,
.about-company-history__card-accent::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 2px;
    width: 0;
    background-color: var(--color-accent-red, #C62828);
    z-index: 2;
    animation-name: none; /* без анимации по умолчанию */
}

/* Ключевые кадры: линия заполняется слева направо */
@keyframes aboutHistoryLineFill {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

/* Включённая анимация линий (через класс .about-company-history--animate на секции) */
.about-company-history--animate
.about-company-history__card::before,
.about-company-history--animate
.about-company-history__card-accent::before {
    animation-name: aboutHistoryLineFill;
    animation-duration: 2.5s;          /* медленное заполнение одной линии */
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;      /* один раз */
    animation-fill-mode: forwards;     /* линия остаётся красной */
}

/* Задержки для последовательности 1 → 2 → 3 → 4 */
.about-company-history--animate
.about-company-history__card--step-1::before {
    animation-delay: 0s;
}

.about-company-history--animate
.about-company-history__card--step-2::before {
    animation-delay: 2.5s;
}

.about-company-history--animate
.about-company-history__card--step-3::before {
    animation-delay: 5s;
}

.about-company-history--animate
.about-company-history__card--step-4::before {
    animation-delay: 7.5s;
}

/* Тексты внутри карточек */
.about-company-history__card-text,
.about-company-history__card-text-black{
    font-family: var(--font-family-subtitle, "RubikBold"), sans-serif;
    padding-bottom: 10px;
}

/* Базовые цвета до анимации */
.about-company-history__card-text {
    /* "01" — можно сделать чуть менее яркой, если хочешь */
    color: var(--color-accent-gray-black, #838383);
}

.about-company-history__card-text-black {
    color: var(--color-text-default, #111111);
}

/* Плавный переход по умолчанию (на всякий случай) */
.about-company-history__card-text {
    transition: color 0.3s ease;
}

/* Ключевые кадры для смены цвета цифр: от серого к красному */
@keyframes aboutHistoryNumberColor {
    from {
        color: var(--color-accent-gray-black, #838383);
    }
    to {
        color: var(--color-accent-red, #C62828);
    }
}

/* 1-й шаг: цифра "01" загорается после завершения первой линии (0–2.5s) */
.about-company-history--animate
.about-company-history__card--step-1 .about-company-history__card-text {
    animation-name: aboutHistoryNumberColor;
    animation-duration: 0.6s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-delay: 2.5s;
}

/* 2-й шаг: цифра "02" */
.about-company-history--animate
.about-company-history__card--step-2 {
    animation-name: aboutHistoryNumberColor;
    animation-duration: 0.6s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-delay: 5s; /* линия 2.5–5s */
}

/* 3-й шаг: цифра "03" */
.about-company-history--animate
.about-company-history__card--step-3 {
    animation-name: aboutHistoryNumberColor;
    animation-duration: 0.6s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-delay: 7.5s; /* линия 5–7.5s */
}

/* 4-й шаг: цифра "04" */
.about-company-history--animate
.about-company-history__card--step-4 {
    animation-name: aboutHistoryNumberColor;
    animation-duration: 0.6s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-delay: 10s; /* линия 7.5–10s */
}

/* Адаптив */
@media (max-width: 1199px) {
    .about-company-history {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .about-company-history__title-block {
        gap: 40px;
        margin-bottom: 40px;
    }

    .about-company-history__text {
        max-width: 400px;
    }

    .about-company-history__information-card {
        grid-template-columns: repeat(4, 1fr);
        gap: 40px;
    }
}

@media (max-width: 991px) {
    .about-company-history {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .about-company-history__title-block {
        gap: 30px;
        margin-bottom: 30px;
    }

    .about-company-history__text {
        max-width: 350px;
    }

    .about-company-history__information-card {
        grid-template-columns: repeat(4, 1fr);
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .about-company-history {
        padding-top: 25px;
        padding-bottom: 25px;
    }

    .about-company-history__title-block {
        gap: 25px;
        margin-bottom: 25px;
    }

    .about-company-history__text {
        max-width: 240px;
    }

    .about-company-history__information-card {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

@media (max-width: 575px) {
    .about-company-history {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .about-company-history__title-block {
        gap: 10px;
        margin-bottom: 30px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .about-company-history__text {
        max-width: 100%;
    }

    .about-company-history__information-card {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

.about-company-faq {
    padding-top: 100px;
    padding-bottom: 100px;
    position: relative;
}

.about-company-faq__title {
    text-align: center;
    margin-bottom: 50px;
}

.about-company-faq__questions {
    position: relative;
    display: block;
}

.about-company-faq__questions-image {
    position: absolute;
    left: 0;
    top: 30px;
    max-width: 480px;
    height: auto;
}

.about-company-faq__accordion {
    margin-left: auto;
    max-width: 600px;
}

@media (max-width: 1199px) {
    .about-company-faq {
        padding-top: 80px;
        padding-bottom: 80px;
    }
    
    .about-company-faq__title {
        margin-bottom: 40px;
    }

    .about-company-faq__questions-image {
        top: 30px;
        max-width: 400px;
    }

    .about-company-faq__accordion {
        max-width: 500px;
    }
}

@media (max-width: 991px) {
    .about-company-faq {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    
    .about-company-faq__title {
        margin-bottom: 30px;
    }

    .about-company-faq__questions-image {
        top: 40px;
        max-width: 350px;
    }

    .about-company-faq__accordion {
        max-width: 380px;
    }
}

@media (max-width: 768px) {
    .about-company-faq {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    
    .about-company-faq__title {
        margin-bottom: 25px;
    }

    .about-company-faq__questions-image {
        display: none;
    }

    .about-company-faq__accordion {
        max-width: 100%;
    }
}

@media (max-width: 575px) {
    .about-company-faq {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    
    .about-company-faq__title {
        margin-bottom: 20px;
    }
}

.privacy-policy__container {
    padding-right: 0;
}

.privacy-policy__title {
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
}

@media (max-width: 768px) {
    .privacy-policy__container {
        min-height: 250px;
        padding-right: 0px;
    }
}

@media (max-width: 575px) {
    .privacy-policy__container {
        min-height: 170px;
        padding-right: 0px;
    }
}

.private-policy-main-section {
    background-image: linear-gradient(
            to bottom,
            var(--background-color, #FFFFFF) 0%,
            var(--color-accent-gray-light, #B3B3B3) 100%
    );
    padding-top: 50px;
}

.privacy-policy-info {
    padding-top: 50px;
    padding-bottom: 50px;
}

.privacy-policy-info__between-text {
    margin-bottom: 10px;
}

.privacy-policy-info__text {
    margin-bottom: 50px;
}

@media (max-width: 1199px) {
    .privacy-policy-main-section {
        padding-top: 40px;
    }

    .privacy-policy-info {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    
    .privacy-policy-info__between-text {
        margin-bottom: 10px;
    }
    
    .privacy-policy-info__text {
        margin-bottom: 40px;
    }
}

@media (max-width: 991px) {
    .privacy-policy-main-section {
        padding-top: 30px;
    }

    .privacy-policy-info {
        padding-top: 30px;
        padding-bottom: 30px;
    }
    
    .privacy-policy-info__between-text {
        margin-bottom: 8px;
    }
    
    .privacy-policy-info__text {
        margin-bottom: 30px;
    }
}

@media (max-width: 768px) {
    .privacy-policy-main-section {
        padding-top: 25px;
    }

    .privacy-policy-info {
        padding-top: 25px;
        padding-bottom: 25px;
    }
    
    .privacy-policy-info__between-text {
        margin-bottom: 6px;
    }
    
    .privacy-policy-info__text {
        margin-bottom: 25px;
    }
}

@media (max-width: 575px) {
    .privacy-policy-main-section {
        padding-top: 20px;
    }

    .privacy-policy-info {
        padding-top: 20px;
        padding-bottom: 20px;
    }
    
    .privacy-policy-info__between-text {
        margin-bottom: 5px;
    }
    
    .privacy-policy-info__text {
        margin-bottom: 20px;
    }
}