:root {
    --pulse-radius: 8px;
    --pulse-color: rgba(218, 115, 2, 0.32);
    --pulse-yellow-color: rgba(254, 213, 0, 0.36);
}

.breadcrumbs_dark {
    color: #fff !important;

    a {
        color: #fff !important;
    }
}

.metro {
    background-color: #000419;
    font-size: clamp(0.875rem, 0.7875rem + 0.4375vw, 1.3125rem);
    line-height: 135%;
    font-family: "Montserrat",sans-serif;
    color: #fff;

    .viewPlace {
        max-width: 1420px;
        z-index: 1;
    }

    h1 {
        font-family: Unbounded, sans-serif;
        font-size: clamp(1.5rem, 1rem + 3.25vw, 5rem);
        position: relative;
        color: #fff;
        text-align: center;
        text-transform: uppercase;
        padding-bottom: 32px;
        z-index: 1;

        span.gradient-text {
            background: linear-gradient(85.42deg, #FF8600 6.09%, #FED500 60.05%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-size: clamp(2rem, 1.25rem + 3.75vw, 5.75rem);
        }

        &:after {
            content: 'METRO';
            color: rgba(255,255,255,.07);
            position: absolute;
            font-size: clamp(2rem, -1.6rem + 18vw, 20rem);
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            line-height: 120%;
            text-align: center;
            text-transform: uppercase;
            animation-duration: .4s;
            animation-name: scaleIn;

            @media (max-width: 767px) {
                font-size: clamp(65px, 2.9439rem + 5.5928vw, 90px);
                align-content: end;
            }
        }
    }

    h2 {
        font-family: Unbounded, sans-serif;
        font-size: clamp(1.5rem, 1.225rem + 1.375vw, 2.875rem);
        font-weight: 600;
        color: #fff;
        text-transform: uppercase;
    }

    h3 {
        font-family: Unbounded, sans-serif;
        font-size: clamp(1.125rem, 0.9rem + 1.125vw, 2.25rem);
        font-weight: 600;
        color: #fff;
        text-transform: uppercase;
        line-height: 140%;
    }

    p {
        font-size: clamp(0.875rem, 0.7875rem + 0.4375vw, 1.3125rem);
        line-height: 135%;
        font-family: "Montserrat",sans-serif;
    }

    ul li {
        font-size: clamp(0.875rem, 0.7875rem + 0.4375vw, 1.3125rem);
        font-family: "Montserrat",sans-serif;
        line-height: 135%;
    }

    a {
        color: #FF8600;
        text-decoration: underline;
        transition: .4s ease-in-out;
        font-weight: 600;

        &:hover {
            color: #ff6100;
        }
    }

    b {
        font-family: "Montserrat",sans-serif;
    }

    .container-1200 {
        max-width: 1200px;

        @media (max-width: 1220px) {
            max-width: 100%;
        }
    }

    .container-1180 {
        max-width: 1180px;

        @media (max-width: 1200px) {
            max-width: 100%;
        }
    }

    .container-940 {
        max-width: 940px;

        @media (max-width: 960px) {
            max-width: 100%;
        }
    }

    .container-820 {
        max-width: 820px;

        @media (max-width: 840px) {
            max-width: 100%;
        }
    }

    .container-708 {
        max-width: 820px;

        @media (max-width: 740px) {
            max-width: 100%;
        }
    }

    .container-100 {
        max-width: calc(100% - clamp(1rem, 0.6625rem + 1.6875vw, 2.6875rem));
    }

    .metro-orange-bullit {
        animation: radial-orange-pulse-v 2s linear infinite;
        width: 32px;
        aspect-ratio: 1/1;
        border-radius: 50%;
        background-color: rgba(255, 134, 0, 1);

        @media (max-width: 767px) {
            width: 21px;
        }

        &.slide-bullit {
            position: absolute;
            top: clamp(17px, 3vw, 54px);
        }
    }

    .metro-yellow-bullit {
        animation: radial-yellow-pulse-v 2s linear infinite;
        width: 32px;
        aspect-ratio: 1/1;
        border-radius: 50%;
        background-color: rgba(254, 213, 0, 1);
        position: relative;

        @media (max-width: 767px) {
            width: 21px;
        }

        &:before {
            content: '';
            width: 10px;
            aspect-ratio: 1/1;
            position: absolute;
            top: calc(50% - 5px);
            left: calc(50% - 5px);
            background-image: url(/application/images/metro-bullit-cross.svg);
            background-position: 50% 50%;
            background-repeat: no-repeat;
            background-size: contain;
        }
    }

    .viewPlace_nomobile-padding {
        @media (max-width: 767px) {
            padding: 0;
        }
    }
}

.metro-background-block {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 20px;
    backdrop-filter: blur(21px);
    padding: 16px;
}

.metro-color-yellow {
    color: #FFED00;
}

.metro-description {
    font-family: Unbounded, sans-serif;
    line-height: 130%;
    font-weight: 500;
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
    padding: 24px 0;
}

.metro-announce {
    padding-top: 100px;
    min-height: 550px;
    position: relative;
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(/application/images/metro-case-header-pattern.svg);
    

    @media (max-width: 767px) {
        height: auto;
        background-image: url(/application/images/metro-case-header-mobile-pattern.svg);
    }
    
    .refrigerator {
        width: 100%;
        aspect-ratio: 1920/700;
        background-image: url(/application/images/metro-case-header-bg.webp);
        background-size: contain;
        background-position: 0% 0%;
        position: relative;
        z-index: 1;

        @media (max-width: 767px) {
            background-size: auto;
            background-position: 30% 0;
            height: 533px;
            aspect-ratio: unset;
        }
    }

    .refrigerator__content {
        position: absolute;
        top: 38.5%;
        left: 12.5%;
        width: 62.5%;
        display: flex;
        justify-content: space-between;

        @media (max-width: 767px) {
            top: 51%;
            left: 0;
            width: 100%;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
        }

        .content-element {
            position: relative;
            font-size: clamp(0.875rem, 1.1vw, 1.3125rem);            
            text-align: center;
            color: #fff;
            line-height: 120%;

            @media (max-width: 767px) {
                font-size: 14px;
            }

            &:before {
                content: '';
                aspect-ratio: 1/1;
                width: 16px;
                border-radius: 50%;
                animation: radial-blue-pulse-v 2s linear infinite;                
                position: absolute;
                top: clamp(0.0625rem, -0.2946rem + 0.558vw, 0.375rem);;
                left: calc(50% - 8px);
                background-color: rgba(35, 136, 255, 1);
                /*background-image: url(/application/images/metro-case-header-point.svg);*/
                background-size: contain;
                background-position: 50% 50%;
                background-repeat: no-repeat;
            }

            .content-element__title {
                font-family: Unbounded, sans-serif;
                font-weight: 700;
                font-size: clamp(1.25rem, 2.1vw, 2.5rem);
                line-height: 116%;
                text-align: center;
                margin: 2.08vw 0 0 0;

                @media (max-width: 767px) {
                    margin: 25px 0 0 0;
                    font-size: 22px;
                }
            }
        }
    }
}

.metro-about {
    color: #fff;
    padding: clamp(2.1875rem, 1.375rem + 4.0625vw, 6.25rem) 0;
    position: relative;

    &:before {
        content: '';
        position: absolute;
        height: 100%;
        width: 100%;
        background-image: url(/application/images/metro-about-shining.svg);
        background-size: contain;
        background-position: 0% 50%;
        background-repeat: no-repeat;
        left: 0;
        bottom: 0;

        @media (max-width: 767px) {
            bottom: -10%;
        }
    }
}

.metro-origins {
    padding: clamp(2.1875rem, 1.375rem + 4.0625vw, 6.25rem) 0;    
    overflow-x: clip;
}

.metro-origins-center {
    position: relative;    

    &:before {
        content: '';
        width: 1920px;
        aspect-ratio: 1920/1064;        
        background-image: url(/application/images/metro-project-origin-bg.webp);
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: 50% 0;
        position: absolute;
        top: -200px;
        left: calc(50% - 960px);

        @media (max-width: 991px) {
            display: none;
        }
    }
}

.metro-origins-center__inner {
    position: relative;
    z-index: 1;
    padding: clamp(1.5rem, 1.2rem + 1.5vw, 3rem);
    background: #000419;
    margin: auto;
    max-width: 789px;
    aspect-ratio: 789/639;
    width: 100%;
    transform: translate(2.5%, 10%);
    align-content: center;
    line-height: 120%;

    @media (max-width: 991px) {
        padding: 0;
        transform: none;
        max-width: unset;
        aspect-ratio: unset;
    }
}

.metro-origins-restriction {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 0.65rem + 0.5vw, 1.25rem);
    background-color: rgba(255,255,255,.06);
    border: 1px solid rgba(255, 255, 255, 0.29);
    backdrop-filter: blur(21.700000762939453px);
    padding: clamp(1.125rem, 1.025rem + 0.5vw, 1.625rem);
    border-radius: 20px;
}

.metro-origins-restriction__img {
    min-width: clamp(24px, 2.5vw, 47px);
    display: flex;
    align-items: center;
}

.metro-history {
    padding: clamp(2.1875rem, 1.375rem + 4.0625vw, 6.25rem) 0;    
    overflow-x: clip;
    position: relative;

    &:before {
        content: '';
        position: absolute;
        height: 100%;
        width: 100%;
        background-image: url(/application/images/metro-history-shining.svg);
        background-size: contain;
        background-position: 0% 50%;
        background-repeat: no-repeat;
        left: 0;
        bottom: -10%;

        @media (max-width: 767px) {
            bottom: 10%;
        }
    }

    .viewPlace {
        z-index: 1;
    }
}

.metro-history-slider {
    position: relative;
    margin-top: 64px;
    padding-top: 80px;

    @media (max-width: 991px) and (min-width: 576px) {
        padding-top: 48px;
        padding-bottom: 80px;
    }

    @media (max-width: 575px) {
        padding-top: 0;
        padding-bottom: 50px;
    }

    .slick-list {
        @media (min-width: 992px) {
            overflow: visible;
        }
    }

    .slick-track {
        
    }

    .slick-arrow {
        top: 0px;
        background-image: url(/application/images/metro-slider-arrow.svg);
        transition: .4s ease-in-out;
        width: clamp(3rem, 2.3333rem + 1.3889vw, 4rem);
        height: clamp(3rem, 2.3333rem + 1.3889vw, 4rem);

        &.slick-disabled {
            background-color: transparent !important;
            cursor: default;

            &:hover {
                opacity: .6;
            }
        }

        @media (max-width: 767px) {
            top: unset;
            bottom: 0;
        }

        &.slick-prev {
            left: 0;

            @media (max-width: 767px) {
                left: calc(50% - 60px);
                display: block !important;
            }
        }

        &.slick-next {
            left: 84px;

            @media (max-width: 767px) {
                left: calc(50% + 12px);
                display: block !important;
            }
        }
    }
}

.metro-history-slider__slide {
    display: flex;
    gap: clamp(12px, 2vw, 39px);
    line-height: 100%;
    align-items: start !important;
    justify-content: start !important;
    width: 100%;
    position: relative;
    padding-bottom: 75px !important;

    @media (min-width: 1200px) {
        min-height: 520px;
    }

    @media (max-width: 991px) {
        padding-bottom: 40px !important;
    }

    &:after {
        content: '';
        width: 100%;
        height: 70px;
        position: absolute;
        background-image: url(/application/images/metro-history-slider-bottom-border.svg);
        background-repeat: repeat;
        bottom: 0;
        left: 0;
        background-size: 100%;
        transform: translateX(calc(clamp(2rem, 1.8125rem + 0.9375vw, 2.9375rem)/2));

        @media (max-width: 991px) {
            height: 35px;
            transform: translateX(calc(clamp(2rem, 1.8125rem + 0.9375vw, 2.9375rem) * 1.5/2));
        }
    }

    .slide-border {
        display: flex;
        justify-content: center;
        min-width: clamp(2rem, 1.8125rem + 0.9375vw, 2.9375rem);
        position: relative;
        align-items: end;        
        height: 100%;        
        transition: .4s ease-in-out;

        @media (min-width: 992px) {
            opacity: 0;
            transform: translate(-40%, 400px) scale(0);
        }

        img {
            position: absolute;
            top: clamp(10px, 2vw, 40px);
        }
    }

    .slide-border__border {
        width: 1px;
        background-image: url(/application/images/metro-border.svg);
        height: calc(100% - clamp(2rem, 1.8125rem + 0.9375vw, 2.9375rem) * 1.5);

        @media (max-width: 575px) {
            height: calc(100% - clamp(2rem, 1.8125rem + 0.9375vw, 2.9375rem));
        }
    }

    .slide-content {
        .slide-content__title {
            font-size: clamp(2.5rem, 1.875rem + 3.125vw, 5.625rem);
            font-family: Unbounded, sans-serif;
            line-height: 143%;
            font-weight: 700;

            @media (min-width: 992px) {
                transform: translate(-40%, 400px) scale(.8);
                transition: .4s ease-in-out;
                color: rgba(255,255,255,.27);
            }            
        }
        
        .slide-content__text {
            @media (min-width: 992px) {
                transition: .4s ease-in-out;
                opacity: 0;
                transform: translate(-40%, 400px) scale(0);
                min-height: 400px;
            }            
        }

        .slide-content__next {
            color: rgba(255, 255, 255, 0.27);
            font-family: Unbounded, sans-serif;
            font-size: clamp(1.75rem, 1.225rem + 2.625vw, 4.375rem);
            font-weight: 600;
            text-align: right;
            margin-top: clamp(1.75rem, 1.225rem + 2.625vw, 4.375rem);
            margin-bottom: 12px;
            line-height: 100%;
        }
    }

    .slide-timeline {
        @media (min-width: 992px) {
            transform: scaleX(1.034);
            transform-origin: 0;
        }        
    }

    &.slick-current {
        .slide-content__title {
            transform: none;
            color: rgba(255,255,255,1);
        }

        .slide-content__text {
            @media (min-width: 992px) {
                opacity: 1;
                transform: none;
            }            
        }

        .slide-border {
            @media (min-width: 992px) {
                opacity: 1;            
                transform: none;
            }
        }
    }
}

.metro-optimizing {
    padding: clamp(2.1875rem, 1.375rem + 4.0625vw, 6.25rem) 0;
}

.metro-optimizing-flex {
    display: flex;
    gap: clamp(1.5rem, 1rem + 2.5vw, 4rem);
    justify-content: center;
    align-items: center;
    
    @media (max-width: 991px) {
        flex-wrap: wrap;
    }

    .metro-optimizing-flex__element {
        width: calc(50% - clamp(1.5rem, 1rem + 2.5vw, 4rem)/2);

        @media (max-width: 991px) {
            width: 100%;
        }
    }
}

.metro-customize {
    padding: clamp(2.1875rem, 1.375rem + 4.0625vw, 6.25rem) 0;
    position: relative;
    
    &:before {
        content: '';
        position: absolute;
        height: 500%;
        width: 100%;
        background-image: url(/application/images/metro-customize-shining.svg);
        background-size: contain;
        background-position: 100% 50%;
        background-repeat: no-repeat;
        right: 0;
        top: -150%;

        @media (max-width: 767px) {
            top: -90%;
            height: 200%;
        }
    }
}

.metro-customize-flex {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 20px;
    overflow: clip;

    @media (max-width: 1199px) and (max-width: 768px) {
        grid-template-columns: repeat(2,1fr);
    }

    @media (max-width: 767px) {
        display: block;
    }

    .metro-customize-element {
        padding: clamp(0.625rem, 0.375rem + 1.25vw, 1.875rem);
        margin: -1px 0 0 -1px;

        &.metro-customize-element_bordered {
            border: 1px solid rgba(255, 255, 255, 0.26);
        }

        &.mobile-no-bordered {
            @media (max-width: 767px) {
                border-bottom: none;
                padding-bottom: 0;
            }
        }
    }

    .metro-customize-element__inner {
        padding: clamp(0.625rem, 0.375rem + 1.25vw, 1.875rem);
        border-radius: 20px;
        height: 100%;

        .customize-num {
            font-family: Unbounded, sans-serif;
            font-size: clamp(2rem, 1.825rem + 0.875vw, 2.875rem);
        }

        .customize-icon {
            background-color: rgba(255, 255, 255, 0.12);
            backdrop-filter: blur(16px);
            border-radius: 16px;
            width: 52px;
            height: 52px;
            text-align: center;
            align-content: center;
            line-height: 0%;
        }

        &.metro-customize-element__inner_colored {
            background-image: url(/application/images/metro-customize-element-bg.webp);
            background-size: cover;
            background-position: 50% 50%;
        }

        &.metro-customize-element__inner_image-element {
            background-image: url(/application/images/metro-customize-element-img.webp);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: 50% 50%;

            @media (max-width: 767px) {
                display: none;
            }
        }
    }
}

.metro-inventarization {
    padding: clamp(2.1875rem, 1.375rem + 4.0625vw, 6.25rem) 0;
    position: relative;
    
    &:before {
        content: '';
        position: absolute;
        height: 120%;
        width: 100%;
        background-image: url(/application/images/metro-inventarization-shining.svg);
        background-size: contain;
        background-position: 0% 50%;
        background-repeat: no-repeat;
        left: 0;
        top: -10%;

        @media (max-width: 767px) {
            
        }
    }
}

.metro-inventarization-flex {
    display: flex;
    gap: clamp(1rem, 0.2rem + 4vw, 5rem);

    @media (max-width: 767px) {
        display: block;
    }

    .metro-inventarization-flex_left {
        max-width: 600px;
        position: relative;
    }

    .metro-inventarization-flex_right {
        
    }
}

.metro-inventarization-sticky {
    position: sticky;
    top: 100px;

    @media (max-width: 767px) {
        position: static;
    }
}

.metro-inventarization-timeline {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding-top: 55px;

    .timeline-element {      
        min-height: 153px;
        max-width: 340px;
        width: 100%;
        position: relative;
        position: relative;
        text-align: center;
        margin: 20px 0;

        @media (max-width: 1199px) and (min-width: 768px) {
            max-width: calc(33% - 20px);
        }

        @media (max-width: 767px) {
            min-height: unset;
            max-width: 100%;
            align-items: start;            
            text-align: left;
            margin: 0;
        }

        &:not(:last-child) {
            &:after {
                content: '';
                width: 64px;
                aspect-ratio: 1/1;
                position: absolute;
                right: -38px;
                top: calc(50% - 32px);
                background-image: url(/application/images/metro-timeline-arrow.svg);
                background-size: contain;
                background-position: 50% 50%;

                @media (max-width: 767px) {
                    width: 44px;
                    right: calc(50% - 22px);
                    top: unset;
                    bottom: -31px;
                    transform: rotate(90deg);
                }
            }
        }

        .timeline-element-inner {
            width: 100%;
            height: 100%;
            background-color: rgba(9, 12, 35, 80%);
            backdrop-filter: blur(21px);
            border-radius: 20px;
            padding: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
            font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1.25rem);
            display: flex;
            align-items: center;
            position: relative;
            z-index: 1;
            gap: 12px;
        }

        .timeline-element__logo {
            width: 44px;
            aspect-ratio: 1/1;
            position: absolute;
            top: -23px;
            left: calc(50% - 22px);

            @media (max-width: 767px) {
                width: 32px;
                min-width: 32px;
                position: static;
            }
        }
    }
}

.folding-section {
    display: flex;
    gap: 42px;

    @media (max-width: 991px) {
        display: block;
    }

    .folding-section-border {
        width: 100%;
        max-width: 6px;
        position: relative;

        @media (max-width: 991px) {
            display: none;
        }

        .folding-section-border__inner {
            width: 100%;
            min-height: 322px;
            background: rgba(35, 136, 255, 1);
            border-radius: 28px;
            transition: .4s ease-in-out;
            will-change: height;
        }
    }

    .folding-section-content {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 32px;

        .folding-section-content__element {
            will-change: margin;
            border: 1px solid rgba(255, 255, 255, 0.28);
            background-color: rgba(4, 7, 45, 1);
            backdrop-filter: blur(21px);
            padding: clamp(1rem, 0.675rem + 1.625vw, 2.625rem);
            border-radius: 24px;
            position: relative;
            transition: .4s ease-in-out;

            .folding-title-flex {
                display: flex;
                flex-direction: column;
                gap: clamp(1.125rem, 1.15rem + -0.125vw, 1rem);
                margin-bottom: clamp(0.5rem, 0.3rem + 1vw, 1.5rem);

                @media (max-width: 767px) {
                    flex-direction: row;
                }
            }

            .folding-title-flex__num {
                color: rgba(35, 136, 255, 1);
                font-weight: 600;
                font-size: clamp(0.875rem, 0.7rem + 0.875vw, 1.75rem);
            }

            .folding-title-flex__title {
                font-weight: 600;
                font-size: clamp(0.875rem, 0.7rem + 0.875vw, 1.75rem);
            }
        }
    }
}

.metro-check-counter {
    padding: clamp(2.1875rem, 1.375rem + 4.0625vw, 6.25rem) 0;
    position: relative;
    
    &:before {
        content: '';
        position: absolute;
        height: 100%;
        width: 100%;
        background-image: url(/application/images/metro-check-counter-shining.svg);
        background-size: contain;
        background-position: 100% 50%;
        background-repeat: no-repeat;
        right: 0;
        top: -25%;
    }

    &>div {
        position: relative;
        z-index: 1;
    }

    .metro-check-counter-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);

        @media (max-width: 1199px) and (min-width: 768px) {
            grid-template-columns: repeat(2, 1fr);
        }

        @media (max-width: 767px) {
            grid-template-columns: auto;
        }

        .metro-check-counter-grid__element {
            border-radius: clamp(0.625rem, 0.5rem + 0.625vw, 1.25rem);
            border: 1px solid rgba(255, 255, 255, 0.29);
            font-size: clamp(0.875rem, 0.7875rem + 0.4375vw, 1.3125rem);
            display: flex;
            gap: clamp(0.75rem, 0.55rem + 1vw, 1.75rem);
            flex-direction: column;
            padding: clamp(1rem, 0.8rem + 1vw, 2rem);

            @media (max-width: 1199px) {
                grid-column: auto !important;
            }

            @media (max-width: 767px) {
                flex-direction: row;
            }

            .counter-icon {
                min-width: 52px;
                max-width: 52px;
                aspect-ratio: 1/1;
                border-radius: clamp(0.4375rem, 0.325rem + 0.5625vw, 1rem);
                align-items: center;
                text-align: center;
                padding: clamp(0.375rem, 0.325rem + 0.25vw, 0.625rem);
                background: linear-gradient(141.48deg, #FBA84C 9.6%, #FF8600 95.31%);

                @media (max-width: 767px) {
                    max-width: 32px;
                    min-width: 32px;
                    max-height: 32px;
                }
            }
        }
    }
}

.metro-attorney {
    padding: clamp(2.1875rem, 1.375rem + 4.0625vw, 6.25rem) 0;
    position: relative;
    
    &:before {
        content: '';
        position: absolute;
        height: 40%;
        width: 100%;
        background-image: url(/application/images/metro-attorney-shining-1.svg);
        background-size: contain;
        background-position: 0% 50%;
        background-repeat: no-repeat;
        left: 0;
        top: -12%;

        @media (max-width: 767px) {
            top: -10%;
        }
    }

    &:after {
        content: '';
        position: absolute;
        height: 50%;
        width: 100%;
        background-image: url(/application/images/metro-attorney-shining-2.svg);
        background-size: contain;
        background-position: 0% 50%;
        background-repeat: no-repeat;
        left: 0;
        bottom: 15%;

        @media (max-width: 767px) {
            bottom: 0;
        }
    }

    &>div {
        position: relative;
        z-index: 1;
    }

    .attorney-title-flex {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        align-items: end;

        @media (min-width: 1200px) {
            flex-wrap: nowrap;
            gap: 0;
        }

        .attorney-title-flex__text {
            @media (min-width: 1200px) {
                margin-left: -10vw;
                min-width: 30vw;
                max-width: clamp(650px, 50vw, 720px);
            }
        }
    }

    .videoplay a {
        display: inline-block;
        border-radius: 20px;
        overflow: clip;

        div {
            &:before {
                content: "";
                position: absolute;
                top: calc(50% - 72px);
                left: calc(50% - 72px);
                z-index: 2;
                background-image: url(/application/images/video-play-white-icon.svg);
                height: 144px;
                width: 144px;
                transition: .4s ease-in-out;
                background-size: contain;
                background-repeat: no-repeat;

                @media (max-width: 767px) {
                    height: 80px;
                    width: 80px;
                    top: calc(50% - 40px);
                    left: calc(50% - 40px);
                }
            }

            &:hover {
                &:before {
                    transform: scale(.9);
                    transform-origin: center;
                }
            }
        }
    }
}

.metro-citation {
    background-image: url(/application/images/metro-citation-bg.webp);
    background-size: cover;
    background-position: 50% 50%;
    padding: clamp(2.25rem, 1.75rem + 2.5vw, 4.75rem) 0;
    border-radius: 20px;
    overflow-x: clip;

    .metro-citation-flex {
        display: flex;
        justify-content: space-between;
        align-items: center;

        @media (max-width: 991px) {
            flex-wrap: wrap;
        }
    }

    .metro-citation-flex__text {
        max-width: 960px;
        position: relative;
        font-size: clamp(1.125rem, 0.95rem + 0.875vw, 2rem);
        line-height: 120%;

        &:before {
            content: '';
            position: absolute;
            bottom: 0;
            right: calc(-1*clamp(2.25rem, 2.05rem + 1vw, 3.25rem));            
            width: clamp(7rem, 6.525rem + 2.375vw, 9.375rem);
            aspect-ratio: 112/82;
            background-size: contain;
            background-repeat: no-repeat;
            background-image: url(/application/images/metro-citation-quote.svg);

            @media (max-width: 767px) {
                right: calc(50% - clamp(7rem, 6.525rem + 2.375vw, 9.375rem)/2);
                bottom: -41px;
            }
        }
    }

    .metro-citation-flex__person {
        max-width: 306px;
        min-width: 306px;
        text-align: center;

        @media (max-width: 991px) {
            max-width: 100%;
            width: 100%;
            margin-top: 24px;
        }

        .name {
            font-size: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
            font-weight: 600;
        }
    }
}

.metro-result {
    padding: clamp(2.25rem, 1.75rem + 2.5vw, 4.75rem) 0;
    position: relative;
    z-index: 1;

    .metro-result-flex {
        display: flex;
        flex-wrap: nowrap;
        gap: 20px;
        background-image: url(/application/images/metro-resut-grid.svg);
        background-size: cover;
        background-position: 50% 0;

        @media (max-width: 1199px) {
            flex-wrap: wrap;
        }

        @media (max-width: 767px) {
            background-image: none;
        }

        .metro-result-flex__element {
            width: 100%;
            max-width: 340px;
            display: flex;
            flex-direction: column;
            gap: 7px;

            @media (max-width: 1199px) and (min-width: 576px) {
                max-width: calc(50% - 10px);
            }

            .result-num {
                font-family: Unbounded, sans-serif;
                font-size: clamp(3.75rem, 2.2083rem + 3.2118vw, 6.0625rem);
                color: rgba(255, 255, 255, 0.22);
                font-weight: 700;
                text-align: center;
                line-height: 100%;

                @media (max-width: 767px) {
                    display: none;
                }
            }

            .result-line {
                margin: 10px 0;
                position: relative;
                width: 100%;
                text-align: center;
                align-content: center;

                @media (max-width: 767px) {
                    margin: 0;
                }

                .result-line__inner {
                    position: absolute;
                    width: calc(100% + 16px);
                    height: 1px;
                    border: 1px dashed gray;
                    left: -8px;
                    top: calc(50% - 1px);

                    @media (max-width: 767px) {
                        display: none;
                    }
                }

                .result-line__dot {
                    width: 32px;
                    aspect-ratio: 1/1;
                    border-radius: 50%;
                    background: rgba(254, 213, 0, 1);
                    margin:auto;
                    position: relative;
                    z-index: 1;
                    animation: radial-yellow-pulse-v 2s linear infinite;

                    @media (max-width: 767px) {
                        width: 22px;
                    }
                }
            }

            .result-content {
                border: 1px solid rgba(255, 255, 255, 0.29);
                box-shadow: 0 0 0 0px rgba(255, 143, 53, 0.2);
                backdrop-filter: blur(21px);
                background: rgba(255, 255, 255, 0.06);
                border-radius: 20px;
                padding: clamp(1rem, 0.8rem + 1vw, 2rem) clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
                min-height: 275px;
                text-align: center;
                align-content: center;
                line-height: 110%;

                @media (max-width: 767px) {
                    margin-top: -17px;
                    position: relative;
                    z-index: 3;
                    line-height: 140%;
                    min-height: unset;
                    padding-top: 32px;
                }
            }

            &:first-child {
                .result-line__inner {
                    width: calc(100% + 9px);
                    left: 0;
                }
            }
                
            &:last-child {
                .result-line__inner {
                    width: calc(100% + 9px);
                    left: auto;
                    right: 0;
                }
            }
        }
    }
}

.metro-project-executor {
    padding: clamp(2.25rem, 1.75rem + 2.5vw, 4.75rem) 0;
    position: relative;
    z-index: 1;
}

.metro-business-effect {
    padding: clamp(2.25rem, 1.75rem + 2.5vw, 4.75rem) 0 clamp(180px, 20vw, 390px) 0;    
    position: relative;

    @media (max-width: 1199px) {
        padding-bottom: 50px;
    }

    &:after {
        content: '';
        width: 100%;
        height: 100%;
        background: url(/application/images/metro-business-effect-bg.webp) 100% 0% no-repeat, url(/application/images/metro-business-effect-pattern.svg) 0 50% no-repeat;        
        position: absolute;
        bottom: 0;
        left: 0;

        @media (min-width: 1921px) {
            background-size: cover;
        }

        @media (max-width: 1920px) and (min-width: 1200px) {
            background-size: contain;
        }

        @media (max-width: 1199px) {
            background: 
            url(/application/images/metro-business-effect-bg-tablet.png) 100% 100% no-repeat, 
            url(/application/images/metro-business-effect-pattern-tablet.svg) 100% 50% no-repeat;            
        }
        
        @media (max-width: 767px) {
            background: url(/application/images/metro-business-effect-bg-mobile.png) 100% 250% no-repeat;
        }
    }

    &:before {
        content: '';
        width: 100%;
        height: 350%;
        background: url(/application/images/metro-business-effect-shining.svg) 100% 0% no-repeat;
        position: absolute;
        top: -250%;
        left: 0;

        @media (max-width: 1199px) {
            content: '';
            width: 100%;
            height: 150%;
            background: url(/application/images/metro-business-effect-shining-tablet.svg) 100% 100% no-repeat;
            position: absolute;
            top: -50%;
            left: 0;
        }

        @media (max-width: 767px) {
            display: none;
        }
    }

    .metro-business-effect-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 22px 37px;
        max-width: 708px;
        position: relative;
        z-index: 3;

        @media (max-width: 1346px) and (min-width: 1200px) {
            max-width: 605px;
        }

        @media (min-width: 1200px) {
            margin-top: calc(-1*clamp(2.25rem, 1.75rem + 2.5vw, 4.75rem));
        }

        @media (max-width: 1199px) {
            margin: auto;
        }

        @media (max-width: 767px) {
            gap: 20px;
            grid-template-columns: auto;
            max-width: 100%;
        }

        .metro-business-effect-grid__element {            
            position: relative;
            padding-top: 8px;

            @media (max-width: 1199px) {
                margin: 0 !important;
            }

            .business-effect-content {
                border: 1px solid rgba(255, 255, 255, 0.29);
                box-shadow: 0 0 0 0px rgba(255, 143, 53, 0.2);
                backdrop-filter: blur(21px);
                background: rgba(0, 6, 33, .6);
                border-radius: 20px;
                padding: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
                text-align: center;

                @media (max-width: 1199px) {
                    height: 100%;
                    align-content: center;
                }
            }

            .dot {
                position: absolute;
                top: 0px;
                left: calc(50% - 6px);
                animation: radial-orange-pulse-v 2s linear infinite;
                width: 16px;
                aspect-ratio: 1 / 1;
                border-radius: 50%;
                background-color: rgba(255, 134, 0, 1);
            }

            .indicators {
                font-family: Unbounded, sans-serif;
                font-size: clamp(1.375rem, 1.15rem + 1.125vw, 2.5rem);                
                font-weight: 700;
                line-height: 100%;
                margin-top: 12px;
                text-align: center;

                @media (max-width: 575px) {
                    display: flex;
                    gap: 16px;
                    justify-content: center;
                }
            }

            .before {
                color: rgba(255, 255, 255, 0.22);
                position: relative;
                padding-right: calc(12px + clamp(1.6875rem, 1.55rem + 0.6875vw, 2.375rem));
                display: inline-block;

                &:after {
                    content: '';
                    position: absolute;
                    top: calc(50% - clamp(1.6875rem, 1.55rem + 0.6875vw, 2.375rem)*15/(26*2));
                    right: 0;
                    width: clamp(1.6875rem, 1.55rem + 0.6875vw, 2.375rem);
                    aspect-ratio: 26/15;
                    background-image: url(/application/images/metro-orange-arrow.svg);
                    background-size: contain;
                    background-repeat: no-repeat;
                    background-position: 50% 50%;
                }
            }

            .after {
                color: #fff;
            }
        }
    }
}

.metro-form {
    .form-container {
        border-radius: 20px;
        background: url(/application/images/metro-form-bg-pattern.svg) 100% 0% / contain no-repeat, url(/application/images/metro-form-bg.webp) 50% 50% / cover no-repeat;
        padding: clamp(2.25rem, 1.75rem + 2.5vw, 4.75rem) 0;

        .form__btn a {
            color: #fff;
        }
    }
}

.thank {
    background-color: transparent;
    color: #fff;
}

.news__date, .share-news {
    display: none;
}

.alert-success {
    background: transparent;
}

@media(max-width: 991px) {
    .connection {
        display: none;
    }
}  

.form-container.block-text.bg_business-form {
    display: none !important;    
}

@keyframes radial-yellow-pulse-v {
    0% {
        box-shadow: 0 0 0 0px rgba(255, 143, 53, 0.2);
    }

    50% {
        box-shadow: 0 0 0 var(--pulse-radius) var(--pulse-yellow-color);
    }

    100% {
        box-shadow: 0 0 0 0px rgba(255, 143, 53, 0.2);
    }
}