/* ZR code: our additions to the theme. Loaded on every page right after libs.min.css
   (catalog/controller/common/header.php). Bump ?v= there after editing. */

/* ---------- Menu: breadcrumbs, Back, current item, service switch (stage 7.3, reworked in 7.4) ----------
   Desktop (>= 769px): the opened panel .main-navigation = Back + breadcrumbs (top row, same height on every page),
   service switch (service pages only), compact list of items centered in the free height.
   Mobile: the popup #menu-popup = logo (link to home) + breadcrumbs row (kept on home too), service switch,
   compact items, "Close" button at the bottom. No breadcrumbs bar under the mobile header any more. */
.zr-crumbs {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    min-width: 0;
    font-size: 14px;
    line-height: 20px;
    color: #323232;
    text-align: left
}

.zr-crumbs__back {
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    margin-right: 14px;
    padding-right: 14px;
    border-right: 1px solid #d9d9d9;
    font-size: 13.333px;
    line-height: 20px;
    text-transform: uppercase;
    color: #323232;
    text-decoration: none;
    white-space: nowrap
}

.zr-crumbs__arrow {
    margin: 0 4px 0 -3px;
    transition: transform .2s linear
}

.zr-crumbs__arrow path {
    transition: stroke .2s linear
}

.zr-crumbs__back:hover,
.zr-crumbs__back:focus {
    color: #ff553a
}

.zr-crumbs__back:hover .zr-crumbs__arrow,
.zr-crumbs__back:focus .zr-crumbs__arrow {
    transform: translateX(-3px)
}

.zr-crumbs__back:hover .zr-crumbs__arrow path,
.zr-crumbs__back:focus .zr-crumbs__arrow path {
    stroke: #ff553a
}

.zr-crumbs__list {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    white-space: nowrap;
    overflow: hidden
}

.zr-crumbs__item {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    margin: 0 !important
}

.zr-crumbs__item + .zr-crumbs__item::before {
    content: "\203A";
    margin: 0 8px;
    color: #b5b5b5
}

.zr-crumbs__item a {
    color: #6e6e6e;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    font-size: inherit !important;
    opacity: 1 !important
}

.zr-crumbs__item a:hover,
.zr-crumbs__item a:focus {
    color: #ff553a;
    border-bottom-color: #ff553a
}

.zr-crumbs__item:last-child {
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    min-width: 0
}

.zr-crumbs__item:last-child span {
    overflow: hidden;
    text-overflow: ellipsis;
    color: #323232
}

.zr-crumbs a:focus-visible,
.zr-svc-switch a:focus-visible,
.zr-menu-logo:focus-visible {
    outline: 2px solid #ff553a;
    outline-offset: 2px;
    border-radius: 2px
}

/* "Other services:" + links to the other service pages (the current one is not listed) */
.zr-svc-switch {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    margin: 0 0 8px -4px
}

.zr-svc-switch__label {
    margin: 0 6px 8px 4px;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #6e6e6e;
    white-space: nowrap
}

.zr-svc-switch a {
    display: inline-block;
    margin: 0 4px 8px;
    padding: 5px 14px;
    border: 1px solid #e3e3e3;
    border-radius: 16px;
    font-family: Avenir Next Demi, sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #323232;
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s linear, border-color .2s linear, background-color .2s linear
}

.zr-svc-switch a:hover,
.zr-svc-switch a:focus {
    border-color: #ff553a;
    color: #ff553a
}

.zr-svc-switch a.is-current {
    background: #ff553a;
    border-color: #ff553a;
    color: #fff
}

/* ----- desktop panel ----- */
.main-navigation {
    /* one font size for every page: fits 7 items + a submenu row into the height, never above the old 61px */
    --zr-menu-font: clamp(22px, min(3.2vw, (100vh - 290px) / 11.2), 61px)
}

@media screen and (max-width: 950px) {
    .main-navigation {
        --zr-menu-font: clamp(22px, (100vh - 290px) / 11.2, 44px)
    }
}

@media screen and (max-height: 640px) {
    .main-navigation {
        padding-top: 80px;
        padding-bottom: 80px
    }
}

.main-navigation .zr-menu-inner {
    position: relative;
    height: 100%;
    width: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column
}

.main-navigation .zr-crumbs--menu {
    position: relative;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    min-height: 20px;
    margin: 0 48px 16px 0
}

/* compact list centered in the free height; auto margins (not justify-content) keep the top reachable on overflow */
.main-navigation .zr-menu-inner .main-menu {
    height: auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-height: 0;
    -ms-flex-pack: start;
    justify-content: flex-start;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none; /* last resort on tiny windows only - no visible scrollbar on desktop */
    padding-right: 48px
}

.main-navigation .zr-menu-inner .main-menu::-webkit-scrollbar {
    display: none
}

.main-navigation .zr-menu-inner .main-menu > li:first-child {
    margin-top: auto
}

.main-navigation .zr-menu-inner .main-menu > li:last-child {
    margin-bottom: auto
}

.main-navigation .zr-menu-inner .main-menu > li + li {
    margin-top: calc(var(--zr-menu-font) * .3)
}

.main-navigation .link {
    font-size: var(--zr-menu-font);
    line-height: 1.22
}

.main-navigation .main-menu .inner {
    font-size: max(14px, calc(var(--zr-menu-font) * .38));
    line-height: 1.4
}

/* current item: red dot like the fullpage .active one (sized from the font) */
.main-navigation .active a:before,
.main-navigation .zr-current > div > a:before,
.main-navigation .zr-here > div > a:before {
    content: "";
    position: absolute;
    width: calc(var(--zr-menu-font) * .3);
    height: calc(var(--zr-menu-font) * .3);
    right: calc(var(--zr-menu-font) * -.55);
    bottom: calc(var(--zr-menu-font) * .3);
    border-radius: 50%;
    background: #ff553a
}

/* the Close tab column of the opened menu is white on every page (was transparent on /services/ and the service
   landings - only a small white box around the cross). The column is the frame height (libs.min.css: 100vh - 128px),
   so the grey frame border stays visible. */
.main-navigation .close-menu.show.open:before,
.fp-viewing-write-to-us .main-navigation .close-menu.show.open:before {
    background: #fff
}

/* ----- mobile popup ----- (#menu-popup: wins over the .white-popup rules of the landing pages' CSS) */
#menu-popup {
    --zr-pop-font: clamp(20px, min((100vh - 300px) / 10.5, 8.4vw), 32px); /* 8.4vw: long RU/UA words on 320px phones */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 30px 30px 105px
}

.zr-menu-top {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #f0f0f0
}

.zr-menu-logo {
    display: block;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    line-height: 0;
    padding: 4px
}

.zr-menu-logo img {
    display: block;
    width: 120px;
    height: auto
}

#menu-popup .zr-crumbs--menu {
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    height: 20px;
    margin-top: 10px
}

#menu-popup .zr-crumbs--menu .zr-crumbs__list {
    max-width: 100%
}

#menu-popup .zr-svc-switch {
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 0 4px
}

#menu-popup .main-menu {
    height: auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-height: 0;
    -ms-flex-pack: start;
    justify-content: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch
}

#menu-popup .main-menu > li:first-child {
    margin-top: auto
}

#menu-popup .main-menu > li:last-child {
    margin-bottom: auto
}

#menu-popup .main-menu > li + li {
    margin-top: calc(var(--zr-pop-font) * .35)
}

#menu-popup .inner {
    margin-bottom: 0
}

#menu-popup .link {
    position: relative;
    font-size: var(--zr-pop-font);
    line-height: 1.25
}

#menu-popup .zr-current > .link:after,
#menu-popup .zr-here > .link:after {
    content: "";
    position: absolute;
    top: 50%;
    right: -18px;
    width: 10px;
    height: 10px;
    margin-top: -4px;
    border-radius: 50%;
    background: #ff553a
}

@media screen and (max-width: 390px) {
    #menu-popup {
        padding: 20px 20px 95px
    }
}

/* short screens (landscape phones): logo and breadcrumbs in one row, tighter list; it scrolls if it still does not fit */
@media screen and (max-width: 769px) and (max-height: 500px) {
    #menu-popup {
        --zr-pop-font: clamp(18px, (100vh - 150px) / 9.5, 26px);
        padding: 10px 24px 62px
    }

    .zr-menu-top {
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-pack: center;
        justify-content: center;
        padding-bottom: 8px;
        margin-bottom: 8px
    }

    .zr-menu-logo img {
        width: 100px
    }

    #menu-popup .zr-crumbs--menu {
        width: auto;
        min-width: 0;
        margin: 0
    }

    #menu-popup .zr-crumbs--menu .zr-crumbs__list {
        margin-left: 16px
    }

    #menu-popup .zr-svc-switch a {
        margin-bottom: 6px;
        padding: 3px 12px
    }

    #menu-popup .zr-svc-switch__label {
        margin-bottom: 6px
    }

    #menu-popup .main-menu > li + li {
        margin-top: calc(var(--zr-pop-font) * .15)
    }

    #menu-popup .link {
        line-height: 1.15
    }

    #menu-popup .inner li {
        margin-top: 0;
        margin-bottom: 0
    }

    .close-popup {
        bottom: 6px
    }
}

/* ---------- Desktop frame on any screen (stage 7.4, 7.5) ---------- */
@media screen and (min-width: 769px) {
    /* no scrollbars on desktop: long pages (lists, articles, cases) scroll by wheel / touchpad / keys under the frame,
       with the "Scroll down" hint; the fullpage screens fit (zrFit) */
    html {
        scrollbar-width: none;
        -ms-overflow-style: none
    }

    html::-webkit-scrollbar,
    body::-webkit-scrollbar {
        display: none
    }
}

.zr-frame-cover {
    display: none
}

@media screen and (min-width: 769px) {
    /* normal-scroll pages (no fullpage): content scrolling under the white frame is hidden by the grey bottom margin,
       like the fixed grey header does at the top */
    body:not(.main-page) .zr-frame-cover {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 64px;
        background: #f7f7f7;
        z-index: 6;
        pointer-events: none
    }

    /* Our Works / Articles lists: the last text ends inside the frame (was 25px -> under the frame edge);
       index-page.css (loaded later) resets the padding at some widths, hence the stronger selector */
    body.zr-list-page .all-project.section {
        padding-bottom: 104px
    }
}

@media screen and (min-width: 769px) {
    /* service landings (horizontal fullpage slides): the slide box = the white frame (64px) + 20px padding, the same
       content box as the old 84px padding. Content taller than the frame is scaled down to fit by zrFit (js/scripts.js,
       stage 7.5) - desktop screens never show scrollbars. */
    body.main-page #fullpage .fp-slide > .fp-tableCell > .container {
        height: calc(100% - 128px) !important;
        margin-top: 64px !important;
        margin-bottom: 64px !important;
        padding-top: 20px !important;
        padding-bottom: 20px !important
    }

    /* "how we do" slide: its wide text column has no side margin of its own, and the slide box is pulled 2vw
       out of the screen (margin: 0 -2vw) - the text reached over the frame edge (1680px: +12px) */
    body.main-page #fullpage .fp-slide.how-we-do > .fp-tableCell > .container {
        padding-right: calc(84px + 2vw) !important
    }
}

/* design landing, reviews: the review text was cut mid-line at 12vw (overflow hidden) -> whole lines with an ellipsis */
#fullpage .slide.customer-reviews .customer-reviews-reviews .item .desc + .text {
    max-height: none !important;
    overflow: hidden !important;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 8;
    line-clamp: 8;
    padding-bottom: 0 !important;
    margin-bottom: calc(1vw + 20px) !important
}

/* design landing, reviews: project names on the image slider were wider than the 25vw column (cut: "Babushkasocks") */
@media screen and (min-width: 951px) {
    #fullpage .slider-inner .slide-item h2 {
        font-size: 2.6vw;
        overflow-wrap: break-word;
        word-break: break-word
    }
}

/* home "Write to us" on low desktop windows: the form was 496px in a 492px frame (touching the top, 4px below the bottom) */
@media screen and (min-width: 951px) and (max-height: 800px) {
    #write-to-us-anchor h2 {
        font-size: 36px;
        line-height: 44px
    }

    #write-to-us-anchor form .input input {
        height: 46px;
        padding-top: 10px
    }

    #write-to-us-anchor form .input + .input {
        margin-top: 12px
    }

    #write-to-us-anchor form .textarea textarea {
        height: 84px;
        margin-top: 12px;
        margin-bottom: 12px;
        padding-top: 22px
    }

    #write-to-us-anchor form .btns .btn {
        height: 52px;
        line-height: 48px;
        padding-top: 0;
        padding-bottom: 0
    }
}

/* home "Services" cards on low desktop windows: the buttons were under the frame edge (1536x730 UA/RU: 2-line titles,
   6 list items of 50px) */
@media screen and (min-width: 951px) and (max-height: 820px) {
    #services-anchor .container .item {
        padding: 30px 28px
    }

    #services-anchor .container .item .text-paragraph > p {
        padding: 12px 0;
        margin: 16px 0 14px
    }

    #services-anchor .container .item .text-paragraph > ul > li {
        line-height: 28px;
        margin-bottom: 6px
    }
}

@media screen and (min-width: 951px) and (max-height: 680px) {
    #services-anchor .container h2,
    #services-anchor .container .h2 {
        font-size: 2.1vw
    }

    #services-anchor .container .item {
        padding: 22px 24px
    }

    #services-anchor .container .item .text-paragraph > p {
        font-size: 15px;
        line-height: 22px;
        padding: 10px 0;
        margin: 12px 0 10px
    }

    #services-anchor .container .item .text-paragraph > ul > li {
        font-size: 17px;
        line-height: 24px;
        margin-bottom: 4px
    }
}

/* home "Services" in the fullpage "responsive" mode (normal page scroll: windows 770-950px wide or lower than 557px):
   the theme gives each card a third of the screen height with overflow hidden - on low windows the text and the list
   were cut (900x500). Let the section and the cards take the height of their content. */
@media screen and (min-width: 769px) {
    .fp-responsive #services-anchor.fp-section,
    .fp-responsive #services-anchor > .fp-tableCell,
    .fp-responsive #write-to-us-anchor.fp-section,
    .fp-responsive #write-to-us-anchor > .fp-tableCell {
        height: auto !important
    }

    /* "Our works": the project text waits off the screen (translateX(-106%)) until fullpage marks the section loaded
       ("animation-done") - on low windows the section is taller than the screen and never gets it (776x535: only
       "...dly" and the buttons were visible) */
    .fp-responsive .our-work-section .text-paragraph {
        transform: none
    }

    /* "Write to us" form was cut at the bottom of its section (776x535 RU) */
    .fp-responsive #write-to-us-anchor.fp-section {
        min-height: 100vh;
        padding-bottom: 64px
    }

    .fp-responsive #services-anchor .container {
        height: auto
    }

    .fp-responsive #services-anchor .container .item {
        height: auto !important;
        overflow: visible
    }
}

/* support landing "Advantages" (how-it-works): the illustration (a picture with a white background) was 100vh high and
   lifted 84px - a white band over the header and the grey margins. Keep it inside the white frame. */
@media screen and (min-width: 951px) {
    #fullpage .slide.how-it-works .wrap-image img {
        min-height: 0;
        height: calc(100vh - 168px);
        margin-top: 0
    }
}

/* support landing "Advantages" (how-it-works) on screens wider than 1920px: the site is 1920px wide in the middle, but
   the list column was sized in vw of the whole screen (17vw / 35vw / font 1vw) - at 3440px it squeezed the text
   column to 120px (a word per line, text below the frame). Same sizes as on a 1920px screen. */
@media screen and (min-width: 1921px) {
    #fullpage .slide.how-it-works .wrap-tabs {
        margin-top: 21px
    }

    #fullpage .slide.how-it-works .list-link {
        max-width: 672px;
        font-size: 19.2px
    }

    #fullpage .slide.how-it-works .list-link > * {
        margin: 0 38px 19px
    }

    #fullpage .slide.how-it-works .list-link .item {
        min-width: 326px;
        padding-right: 38px
    }

    #fullpage .slide.how-it-works .list-link .item:after,
    #fullpage .slide.how-it-works .list-link .item:before {
        width: 38px;
        height: 38px
    }

    #fullpage .slide.how-it-works .wrap-image {
        min-width: 576px
    }

    /* the theme's column gutters are 2vw (of the whole screen) - as on 1920px */
    body.main-page #fullpage .slide .container {
        margin-left: -38.4px;
        margin-right: -38.4px
    }

    body.main-page #fullpage .slide .container > * {
        margin-left: 38.4px;
        margin-right: 38.4px
    }

    #fullpage .slide.how-it-works .list-link {
        margin-left: -38.4px;
        margin-right: -38.4px
    }
}

/* mobile: the landing slides keep the theme's negative side margins (-2vw, -1.4vw) - at 700-768px wide (phones in
   landscape get a 740px layout) they stuck out 5px and the page scrolled sideways */
@media screen and (max-width: 769px) {
    #fullpage {
        overflow-x: hidden;
        overflow-x: clip
    }
}

/* ---------- Landings, stage 7.6 ---------- */
@media screen and (min-width: 951px) {
    /* design "Customer reviews": the review text was 21px (1.1vw) and the caption 19px - too big */
    #fullpage .slide.customer-reviews .customer-reviews-reviews .item .text p,
    #fullpage .slide.customer-reviews .customer-reviews-reviews .item .desc + .text {
        font-size: 15px !important;
        line-height: 24px !important
    }

    #fullpage .slide.customer-reviews .customer-reviews-reviews .item .desc {
        font-size: 14px !important;
        line-height: 19px !important
    }

    /* support "Advantages": the illustration has a white background - it showed as a white box on the page */
    #fullpage .slide.how-it-works .wrap-image img {
        mix-blend-mode: multiply
    }


}

/* zrFit fallback for extremely low screens (phones in landscape): the content would be too small scaled, so it scrolls
   inside the frame - by touch / wheel, without a visible scrollbar */
.zr-fit-scroll {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.zr-fit-scroll::-webkit-scrollbar {
    display: none
}

@media screen and (min-width: 769px) and (max-width: 950px) {
    /* column layout of the landings here: centered, but the top stays reachable when the text is taller */
    body.main-page #fullpage .fp-slide > .fp-tableCell > .container {
        -ms-flex-pack: center !important;
        justify-content: safe center !important
    }
}

@media screen and (min-width: 1921px) {
    /* the site is 1920px wide in the middle; the masks at the sides were white on the grey page */
    body:before,
    body:after {
        background: #f7f7f7
    }

    /* menu panel as wide as on a 1920px screen (42vw grew to 1445px on 3440px) */
    .main-navigation {
        width: 806px;
        left: -806px
    }
}

/* ---------- Simple pages: 404, maintenance (stage 7.2) ----------
   Desktop (>= 769px): content sits on the fixed white card #content_background (64px from every edge).
   Mobile: the header is fixed (64px), the page is plain white. */
.zr-simple {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    min-height: 100vh;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 96px 120px;
    text-align: center;
    color: #323232
}

.zr-simple__inner {
    width: 100%;
    max-width: 880px
}

.zr-simple__code {
    font-family: Avenir Next Bold, sans-serif;
    font-size: 180px;
    line-height: 1;
    letter-spacing: -4px;
    margin-bottom: 8px
}

.zr-simple .red {
    color: #ff553a
}

.zr-simple__logo {
    display: block;
    width: 150px;
    height: auto;
    margin: 0 auto 28px
}

.zr-simple .zr-simple__title {
    font-family: Avenir Next Demi, sans-serif;
    font-size: 48px;
    line-height: 56px;
    text-transform: uppercase;
    margin: 0 0 16px
}

.zr-simple .zr-simple__text {
    max-width: 640px;
    margin: 0 auto 32px;
    font-size: 18px;
    line-height: 28px
}

.zr-simple__btns {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: center;
    justify-content: center;
    margin: -10px
}

.zr-simple__btns .btn {
    width: auto;
    min-width: 200px;
    max-width: none;
    height: 56px;
    line-height: 52px;
    font-size: 18px;
    padding: 0 32px;
    margin: 10px
}

.zr-simple__contacts {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: center;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0
}

.zr-simple__contacts li {
    margin: 6px 14px
}

.zr-simple__contacts a {
    font-family: Avenir Next Demi, sans-serif;
    font-size: 18px;
    line-height: 28px;
    color: #323232;
    border-bottom: 1px solid #ff553a;
    text-decoration: none
}

.zr-simple__contacts a:hover,
.zr-simple__contacts a:focus {
    color: #ff553a
}

@media screen and (max-height: 760px) and (min-width: 770px) {
    .zr-simple__code {
        font-size: 130px
    }

    .zr-simple__logo {
        width: 110px;
        margin-bottom: 18px
    }

    .zr-simple .zr-simple__title {
        font-size: 40px;
        line-height: 48px
    }
}

/* very low desktop windows / phones in landscape (desktop layout): 404 and maintenance fit into the frame (stage 7.4) */
@media screen and (max-height: 560px) and (min-width: 770px) {
    .zr-simple {
        padding-top: 64px;
        padding-bottom: 64px
    }

    .zr-simple__code {
        font-size: 84px;
        margin-bottom: 0
    }

    .zr-simple__logo {
        width: 90px;
        margin-bottom: 10px
    }

    .zr-simple .zr-simple__title {
        font-size: 26px;
        line-height: 32px;
        margin-bottom: 8px
    }

    .zr-simple .zr-simple__text {
        font-size: 15px;
        line-height: 22px;
        margin-bottom: 16px
    }

    .zr-simple__btns .btn {
        height: 44px;
        line-height: 40px;
        font-size: 16px;
        margin: 6px
    }
}

@media screen and (max-width: 1024px) {
    .zr-simple {
        padding: 96px 90px
    }

    .zr-simple .zr-simple__title {
        font-size: 40px;
        line-height: 48px
    }
}

@media screen and (max-width: 769px) {
    .zr-simple {
        min-height: 100vh;
        -ms-flex-align: start;
        align-items: flex-start;
        padding: 104px 16px 56px
    }

    .zr-simple__code {
        font-size: 112px;
        letter-spacing: -2px
    }

    .zr-simple__logo {
        width: 120px;
        margin-bottom: 20px
    }

    .zr-simple .zr-simple__title {
        font-size: 30px;
        line-height: 38px
    }

    .zr-simple .zr-simple__text {
        font-size: 16px !important;
        line-height: 24px
    }

    .zr-simple__btns .btn {
        width: 100%;
        min-width: 0
    }
}

/* ---------- Short landscape phones (stage 6) ----------
   Mobile layout (<= 769px) in landscape: the home hero stacks title / big logo / text on top of each other
   inside 100% of a ~375px high viewport. Give it a fixed height instead (the page scrolls). */
@media screen and (max-width: 769px) and (orientation: landscape) {
    /* (7.21: home only - on the landings all the slides are in .index-section, they were cut at 560 px) */
    body:not(.zr-landing) .index-section,
    body:not(.zr-landing) .index-section > .center,
    body:not(.zr-landing) .index-section > .center > .mob-section,
    body:not(.zr-landing) .index-section .mob-section > .container {
        height: 560px !important;
        max-height: none !important
    }

    .index-section .container .red-logo svg {
        height: 190px !important;
        width: auto !important;
        max-width: none !important
    }

    #turn-device {
        display: none !important
    }
}

/* ---------- Home "Articles" cards (stage 6) ----------
   The preview box had a fixed height (6vw / 115.2px) that is not a whole number of lines,
   so the last visible line was cut in half. Show exactly 4 whole lines instead. */
.news-section .slick-slider .text-paragraph {
    height: auto !important
}

.news-section .slick-slider .text-paragraph p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
    min-height: 4lh;
    margin: 0
}

/* ---------- /services/ page (stage 7.3, 7.5; T-0011 4c-2) ----------
   Desktop: the page scrolls under the white frame like /our-works/ (wheel / touchpad / keys, no scrollbar, "Scroll down"),
   the cards at full size, the content centered in the frame when it is shorter. Was (7.5): fixed in the frame, scaled to fit
   by zrFit - with the bottom SEO text 0.68-0.72 at 1366x768. */
.zr-frame-scroll {
    position: relative;
    z-index: 1
}

@media screen and (min-width: 770px) {
    .zr-frame-scroll {
        box-sizing: border-box;
        width: calc(100% - 128px);
        max-width: 1792px;
        min-height: 100vh;
        margin: 0 auto;
        padding: 64px 0; /* the frame (padding, not margin: the bottom margin did not count in the page height) */
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-pack: center;
        justify-content: safe center
    }

    .zr-frame-scroll > * {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 100%
    }
}

.zr-services {
    color: #323232
}

.zr-services__inner {
    box-sizing: border-box;
    max-width: 1240px;
    margin: 0 auto;
    padding: 56px 56px 64px
}

.zr-services .zr-services__title {
    font-family: Avenir Next Demi, sans-serif;
    font-size: 56px;
    line-height: 64px;
    text-transform: uppercase;
    text-align: center;
    margin: 0 0 16px
}

.zr-services .red {
    color: #ff553a
}

.zr-services .zr-services__intro {
    max-width: 760px;
    margin: 0 auto 40px;
    text-align: center;
    font-size: 18px;
    line-height: 28px
}

.zr-services__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-gap: 24px;
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0
}

.zr-services__link {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
    padding: 32px;
    border-radius: 16px;
    border: 0;
    background: #323232;
    color: #fff;
    text-decoration: none;
    overflow: hidden;
    transition: transform .2s linear, box-shadow .2s linear
}

.zr-services__card:nth-child(3n+2) .zr-services__link {
    background: linear-gradient(119.36deg, #ff5228 0%, #ff4007 100%)
}

.zr-services__link:hover,
.zr-services__link:focus {
    color: #fff;
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, .18)
}

.zr-services__link:focus-visible {
    outline: 3px solid #ff553a;
    outline-offset: 3px
}

.zr-services__bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: cover;
    background-position: 50%;
    opacity: .12;
    pointer-events: none
}

.zr-services__name {
    position: relative;
    font-family: Avenir Next Demi, sans-serif;
    font-size: 28px;
    line-height: 34px;
    margin-bottom: 16px
}

.zr-services__text {
    position: relative;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    font-size: 16px;
    line-height: 24px;
    opacity: .85;
    margin-bottom: 28px
}

.zr-services__more {
    position: relative;
    font-family: Avenir Next Demi, sans-serif;
    font-size: 15px;
    line-height: 20px;
    text-transform: uppercase;
    letter-spacing: .5px
}

.zr-services__cta {
    text-align: center;
    margin-top: 48px
}

.zr-services .zr-services__cta p {
    font-size: 18px;
    line-height: 28px;
    margin: 0 0 20px
}

.zr-services__cta .btn {
    width: auto;
    min-width: 240px;
    max-width: none;
    height: 56px;
    line-height: 52px;
    font-size: 18px;
    padding: 0 32px
}

/* low desktop windows: tighter /services/ so zrFit has to scale less */
@media screen and (min-width: 770px) and (max-height: 800px) {
    .zr-services__inner {
        padding: 24px 48px
    }

    .zr-services .zr-services__title {
        font-size: 44px;
        line-height: 52px;
        margin-bottom: 10px
    }

    .zr-services .zr-services__intro {
        margin-bottom: 24px;
        font-size: 16px;
        line-height: 24px
    }

    .zr-services__link {
        padding: 24px
    }

    .zr-services__name {
        font-size: 24px;
        line-height: 30px;
        margin-bottom: 10px
    }

    .zr-services__text {
        margin-bottom: 18px
    }

    .zr-services__cta {
        margin-top: 24px
    }

    .zr-services .zr-services__cta p {
        margin-bottom: 12px
    }

    .zr-services__cta .btn {
        height: 48px;
        line-height: 44px
    }
}

@media screen and (max-width: 1100px) {
    .zr-services__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .zr-services .zr-services__title {
        font-size: 44px;
        line-height: 52px
    }
}

@media screen and (max-width: 769px) {
    .zr-services__inner {
        padding: 88px 16px 48px
    }

    .zr-services .zr-services__title {
        font-size: 32px;
        line-height: 40px
    }

    .zr-services .zr-services__intro {
        font-size: 16px !important;
        line-height: 24px;
        margin-bottom: 28px
    }

    .zr-services__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px
    }

    .zr-services__link {
        padding: 24px
    }

    .zr-services__name {
        font-size: 24px;
        line-height: 30px
    }

    .zr-services__cta .btn {
        width: 100%;
        min-width: 0
    }
}

/* ---------- Home sections in the style of the /services/ page (stage 7.7) ----------
   Services (module zr_services), Our works (cards), titles of Awards / Reviews / Articles, compact Reviews and Articles. */
.zr-home-section .center {
    width: 100%
}

.zr-home-inner {
    box-sizing: border-box;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 40px
}

.zr-home-title,
.news-section .arrow-news h2.zr-home-title,
.reviews-section .zr-home-title {
    font-family: Avenir Next Demi, sans-serif;
    font-size: clamp(30px, 2.9vw, 56px);
    line-height: 1.15;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0;
    color: #323232;
    margin: 0 0 12px
}

.zr-home-title .red {
    color: #ff553a
}

.zr-home-intro,
.news-section .arrow-news + p,
.news-section .arrow-news + .zr-home-intro {
    max-width: 760px;
    margin: 0 auto 28px;
    text-align: center;
    font-size: 17px;
    line-height: 26px
}

.zr-home-intro p {
    font-size: inherit;
    line-height: inherit;
    margin: 0
}

.zr-home-more {
    text-align: center;
    margin-top: 28px
}

.zr-home-more .btn {
    width: auto;
    min-width: 220px;
    max-width: none;
    height: 52px;
    line-height: 48px;
    font-size: 17px;
    padding: 0 28px
}

/* Our works cards */
.zr-works {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-gap: 24px;
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0
}

.zr-works__link {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
    background: #323232;
    color: #fff;
    text-decoration: none;
    transition: transform .2s linear, box-shadow .2s linear
}

.zr-works__card:nth-child(4n+2) .zr-works__link {
    background: linear-gradient(119.36deg, #ff5228 0%, #ff4007 100%)
}

.zr-works__link:hover,
.zr-works__link:focus {
    color: #fff;
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, .18)
}

.zr-works__link:focus-visible {
    outline: 3px solid #ff553a;
    outline-offset: 3px
}

.zr-works__img {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #262626
}

.zr-works__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease
}

.zr-works__link:hover .zr-works__img img {
    transform: scale(1.04)
}

.zr-works__body {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 18px 20px 20px
}

.zr-works__name {
    font-family: Avenir Next Demi, sans-serif;
    font-size: 22px;
    line-height: 28px;
    margin-bottom: 8px
}

.zr-works__text {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    font-size: 14px;
    line-height: 21px;
    opacity: .85;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    margin-bottom: 14px
}

.zr-works__more {
    font-family: Avenir Next Demi, sans-serif;
    font-size: 13px;
    line-height: 18px;
    text-transform: uppercase;
    letter-spacing: .5px
}

/* Awards / Articles: smaller prev / next buttons next to the title */
.news-section .arrow-news {
    margin-bottom: 12px
}

.news-section .arrow-news h2.zr-home-title {
    margin: 0 18px
}

.news-section .arrow-news .btn {
    width: 44px !important;
    min-width: 44px;
    max-width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border-radius: 12px
}

.news-section .arrow-news .btn svg {
    width: 12px;
    height: auto
}

/* Articles: compact cards */
#news-anchor .slick-slider .image {
    border-radius: 12px;
    margin-bottom: 14px
}

#news-anchor .slick-slider h3 {
    font-family: Avenir Next Demi, sans-serif;
    font-size: 19px;
    line-height: 25px;
    margin-bottom: 8px
}

#news-anchor .slick-slider .text-paragraph p {
    font-size: 15px;
    line-height: 22px
}

#news-anchor .slick-slider .text-paragraph {
    margin-bottom: 8px
}

@media screen and (max-width: 1100px) {
    .zr-works {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media screen and (max-width: 769px) {
    .zr-home-inner {
        padding: 0 20px
    }

    #fullpage .section.zr-home-section {
        padding-top: 40px;
        padding-bottom: 48px
    }

    .zr-works {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px
    }

    .zr-home-intro {
        font-size: 15px;
        line-height: 23px;
        margin-bottom: 20px
    }
}

/* ---------- Home, stage 7.7 (2): feedback on the first version ---------- */
/* Services cards: the lists of the old section (SEO) */
.zr-services__tags {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: -4px -4px 18px
}

.zr-services__tags span {
    margin: 4px;
    padding: 3px 10px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 12px;
    font-size: 12px;
    line-height: 18px;
    white-space: nowrap
}

/* Our works (old slider kept): title and buttons in the services style */
.our-work-section .navigation {
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
    text-align: center
}

.our-work-section .navigation h3.zr-home-title,
.our-work-section .navigation .h2.zr-home-title {
    font-family: Avenir Next Demi, sans-serif;
    font-size: clamp(30px, 2.9vw, 56px);
    line-height: 1.15;
    text-transform: uppercase;
    text-align: center;
    margin: 0 0 12px
}

.our-work-section .navigation + p {
    max-width: 760px;
    margin: 0 auto 24px;
    text-align: center;
    font-size: 17px;
    line-height: 26px
}

.our-work-section .btn-check-project,
.our-work-section .btn-all-project {
    border-radius: 12px !important;
    font-size: 17px !important;
    height: 52px !important;
    line-height: 48px !important
}

.our-work-section .creative-arrow {
    border-radius: 12px !important
}

/* Home contact form: services-style title, slightly smaller fields, same fonts */
#write-to-us-anchor .zr-home-title {
    margin-bottom: 8px
}

@media screen and (min-width: 769px) {
    #write-to-us-anchor .zr-home-title {
        text-align: left
    }
}

body:not(.zr-landing) #write-to-us-anchor h2 + p {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 18px
}

@media screen and (min-width: 951px) {
    #write-to-us-anchor form .input input {
        height: 50px;
        font-size: 17px
    }

    #write-to-us-anchor form .input + .input {
        margin-top: 14px
    }

    #write-to-us-anchor form .input label,
    #write-to-us-anchor form .textarea label {
        font-size: 16px
    }

    #write-to-us-anchor form .textarea textarea {
        height: 96px;
        margin-top: 14px;
        margin-bottom: 14px;
        font-size: 17px
    }

    #write-to-us-anchor form .btns .btn {
        height: 52px;
        line-height: 48px;
        font-size: 17px;
        padding-top: 0;
        padding-bottom: 0
    }
}

#write-to-us-anchor form .input input,
#write-to-us-anchor form .textarea textarea,
#write-to-us-anchor form .btns .btn {
    border-radius: 12px
}

/* Awards and Articles look alike: same titles, rounded pictures, same card titles */
.news-section .slick-slider .image {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08)
}

.news-section .slick-slider .item h3,
.news-section .slick-slider .item h4 {
    font-family: Avenir Next Demi, sans-serif;
    font-size: 17px;
    line-height: 23px;
    margin: 12px 0 6px;
    text-align: left
}

/* ---------- Home, stage 7.7 (3) ---------- */
/* Forms (home + landings, desktop): the floating label stays INSIDE the field on focus - it sat on the border
   of the smaller fields (and on the field above at 1920px) */
@media screen and (min-width: 951px) {
    #write-to-us-anchor form .input input,
    body.main-page #fullpage .slide.write-to-us form .input input {
        padding-top: 18px
    }

    #write-to-us-anchor form .input input:focus + label,
    #write-to-us-anchor form .input input.focused + label,
    body.main-page #fullpage .slide.write-to-us form .input input:focus + label,
    body.main-page #fullpage .slide.write-to-us form .input input.focused + label {
        top: 4px !important;
        height: auto !important;
        font-size: 12px !important;
        line-height: 16px
    }

    #write-to-us-anchor form .textarea textarea,
    body.main-page #fullpage .slide.write-to-us form .textarea textarea {
        padding-top: 26px
    }

    #write-to-us-anchor form .textarea textarea:focus + label,
    #write-to-us-anchor form .textarea textarea.focused + label,
    body.main-page #fullpage .slide.write-to-us form .textarea textarea:focus + label,
    body.main-page #fullpage .slide.write-to-us form .textarea textarea.focused + label {
        height: 24px !important;
        font-size: 12px !important
    }
}

/* Our works: prev / next buttons as big as the Check Project button */
@media screen and (min-width: 951px) {
    .our-work-section .creative-arrow {
        width: 52px !important;
        min-width: 52px;
        max-width: 52px !important;
        height: 52px !important;
        padding: 0 !important
    }

    .our-work-section .creative-arrow svg {
        width: 13px;
        height: auto
    }
}


/* ---------- Home, stage 7.7 (5) ---------- */
/* Services entrance (desktop fullpage): the orange background of About Us stays under this section and folds away -
   a white circle grows from the bottom inside the frame, then the cards come up one by one (the /services/ look) */
.zr-services-reveal {
    display: none
}

@media screen and (min-width: 769px) {
    html.fp-enabled body:not(.fp-responsive) .zr-services-reveal {
        display: block;
        position: absolute;
        top: 64px;
        bottom: 64px;
        left: 64px;
        right: 64px;
        max-width: 1792px;
        margin: 0 auto;
        border-radius: 25px;
        overflow: hidden;
        z-index: 0;
        pointer-events: none
    }

    .zr-services-reveal::before {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -100px;
        width: 200px;
        height: 200px;
        margin-left: -100px;
        border-radius: 50%;
        background: #fff;
        transform: scale(0);
        transition: transform 1.3s cubic-bezier(.45, 0, .3, 1) .3s
    }

    /* scale so the circle just covers the frame at the end (the whole move is visible, not only the first 40%) */
    html.fp-enabled body.fp-viewing-services:not(.fp-responsive) .zr-services-reveal::before {
        transform: scale(var(--zr-reveal-scale, 12))
    }

    .zr-home-services .center {
        position: relative;
        z-index: 1
    }

    html.fp-enabled body:not(.fp-responsive) .zr-home-services .zr-home-title,
    html.fp-enabled body:not(.fp-responsive) .zr-home-services .zr-home-intro,
    html.fp-enabled body:not(.fp-responsive) .zr-home-services .zr-services__card,
    html.fp-enabled body:not(.fp-responsive) .zr-home-services .zr-home-more {
        opacity: 0;
        transform: translateY(40px);
        transition: opacity .5s ease, transform .6s cubic-bezier(.2, .7, .2, 1)
    }

    html.fp-enabled body.fp-viewing-services:not(.fp-responsive) .zr-home-services .zr-home-title,
    html.fp-enabled body.fp-viewing-services:not(.fp-responsive) .zr-home-services .zr-home-intro,
    html.fp-enabled body.fp-viewing-services:not(.fp-responsive) .zr-home-services .zr-services__card,
    html.fp-enabled body.fp-viewing-services:not(.fp-responsive) .zr-home-services .zr-home-more {
        opacity: 1;
        transform: none
    }

    html.fp-enabled body.fp-viewing-services .zr-home-services .zr-home-title { transition-delay: .9s }
    html.fp-enabled body.fp-viewing-services .zr-home-services .zr-home-intro { transition-delay: 1s }
    html.fp-enabled body.fp-viewing-services .zr-home-services .zr-services__card:nth-child(1) { transition-delay: 1.15s }
    html.fp-enabled body.fp-viewing-services .zr-home-services .zr-services__card:nth-child(2) { transition-delay: 1.35s }
    html.fp-enabled body.fp-viewing-services .zr-home-services .zr-services__card:nth-child(3) { transition-delay: 1.55s }
    html.fp-enabled body.fp-viewing-services .zr-home-services .zr-services__card:nth-child(n+4) { transition-delay: 1.75s }
    html.fp-enabled body.fp-viewing-services .zr-home-services .zr-home-more { transition-delay: 1.8s }
}

@media (prefers-reduced-motion: reduce) {
    .zr-home-services *,
    .zr-services-reveal::before {
        transition: none !important
    }
}

/* "Learn more" of the service cards: underlined; the underline goes away when the card is hovered */
.zr-services__more {
    -ms-flex-item-align: start;
    align-self: flex-start;
    padding-bottom: 3px;
    border-bottom: 1px solid currentColor;
    transition: border-color .2s linear
}

.zr-services__link:hover .zr-services__more,
.zr-services__link:focus .zr-services__more {
    border-bottom-color: transparent
}

/* Customers & Reviews: the top of the review list on one line with the top of the logos (the list stuck out above) */
@media screen and (min-width: 951px) {
    .reviews-section .container > * {
        align-content: flex-start
    }
}

/* Customers & Reviews on low windows: the scroll list (63vh of the theme) went below the frame - fit it */
@media screen and (min-width: 951px) and (max-height: 800px) {
    #fullpage .reviews-section .container .mCustomScrollBox {
        max-height: calc(100vh - 300px) !important
    }
}

/* Awards on low windows: the diplomas were sized by the width only - their captions went below the frame */
@media screen and (min-width: 951px) and (max-height: 820px) {
    #awards-anchor .slick-slider .image {
        height: calc(100vh - 400px);
        background-size: contain;
        background-position: center
    }

    #awards-anchor .slick-slider .image img {
        height: 100%;
        width: auto;
        max-width: 100%;
        margin: 0 auto;
        display: block
    }
}

/* home Services: 3 cards in a row down to 951px (2 columns made the section twice as tall) */
@media screen and (min-width: 951px) and (max-width: 1100px) {
    .zr-services__grid--home {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}

/* ---------- Home, stage 7.7 (6): side gaps of the content blocks (desktop) ----------
   Our works, Awards, Reviews, Articles and the contact form get the same gap on the left and the right of the screen,
   so the blocks are a bit smaller and calmer (Services already sits in a narrower column) */
@media screen and (min-width: 951px) {
    #fullpage .our-work-section > .fp-tableCell > .center,
    #fullpage #awards-anchor > .fp-tableCell > .center,
    #fullpage #reviews-anchor > .fp-tableCell > .center,
    #fullpage #news-anchor > .fp-tableCell > .center,
    #fullpage #write-to-us-anchor > .fp-tableCell > .center {
        box-sizing: border-box;
        padding-left: max(20px, 6vw) !important;
        padding-right: max(20px, 6vw) !important
    }

    /* Our works slider: rounded pictures, project name and text like the services cards */
    .our-work-section .slider-creative .slides .item,
    .our-work-section .slider-creative .slides .item img {
        border-radius: 16px;
        overflow: hidden
    }

    .our-work-section .creative-slide-text .anim-title,
    .our-work-section .creative-slide-text .h2.anim-title {
        font-family: Avenir Next Demi, sans-serif;
        font-size: clamp(26px, 2.2vw, 44px);
        line-height: 1.2;
        margin-bottom: 12px
    }

    .our-work-section .creative-slide-text .text-paragraph p {
        font-size: 17px;
        line-height: 26px
    }

    /* contact block: title and text in the middle, the form keeps the same left gap as the other blocks */
    #write-to-us-anchor .zr-home-title,
    body:not(.zr-landing) #write-to-us-anchor h2 + p {
        text-align: center
    }
}

@media screen and (min-width: 951px) and (max-height: 720px) {
    #awards-anchor .slick-slider .image {
        height: calc(100vh - 460px)
    }

    #awards-anchor .arrow-news {
        margin-top: 12px
    }
}

/* ---------- Home, stage 7.7 (7): one rhythm for the section heads ----------
   title -> description is small, description -> content is bigger (it was the other way round in some blocks) */
@media screen and (min-width: 951px) {
    .zr-home-title,
    .news-section .arrow-news h2.zr-home-title,
    .reviews-section .zr-home-title,
    .our-work-section .navigation .zr-home-title {
        margin-top: 0 !important;
        margin-bottom: 0 !important
    }

    .zr-home-services .zr-home-title,
    .zr-home-works .zr-home-title,
    .reviews-section .text-center {
        margin-bottom: 10px !important
    }

    .news-section .arrow-news,
    .our-work-section .navigation {
        margin-bottom: 10px !important
    }

    .zr-home-intro,
    .news-section .arrow-news + p,
    .our-work-section .navigation + p,
    .reviews-section .zr-home-intro {
        margin-top: 0 !important;
        margin-bottom: 36px !important
    }

    #write-to-us-anchor .zr-home-title {
        margin-bottom: 10px !important
    }

    body:not(.zr-landing) #write-to-us-anchor h2 + p {
        margin-top: 0 !important;
        margin-bottom: 28px !important
    }
}

/* ---------- /our-works/ and /articles/ in the style of the new home (stage 7.8) ---------- */
.zr-list-page .all-project .navigation {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    margin-bottom: 28px
}

.zr-list-page .all-project .navigation .zr-home-title {
    margin: 0 0 16px !important
}

/* category tabs as pills (like "Other services" in the menu) */
.zr-list-page .all-project .navigation .link {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 -4px;
    padding: 0;
    font-size: inherit;
    line-height: inherit
}

.zr-list-page .all-project .navigation .link li {
    margin: 4px
}

.zr-list-page .all-project .navigation .link a {
    display: inline-block;
    padding: 6px 16px;
    border: 1px solid #e3e3e3;
    border-radius: 18px;
    font-family: Avenir Next Demi, sans-serif;
    font-size: 15px;
    line-height: 22px;
    color: #323232;
    opacity: 1;
    transition: color .2s linear, border-color .2s linear, background-color .2s linear
}

.zr-list-page .all-project .navigation .link a:after {
    display: none
}

.zr-list-page .all-project .navigation .link a:hover {
    border-color: #ff553a;
    color: #ff553a
}

.zr-list-page .all-project .navigation .link a.active {
    background: #ff553a;
    border-color: #ff553a;
    color: #fff
}

/* cards: picture on top, name, short text, "check project ->" - like the services cards */
.zr-list-page .all-project .container .items {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-gap: 24px;
    gap: 24px
}

.zr-list-page .all-project .container .items .item {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: 0 !important;
    border-radius: 16px;
    overflow: hidden;
    background-image: none !important;
    background-color: #323232;
    color: #fff;
    transition: transform .2s linear, box-shadow .2s linear
}

.zr-list-page .all-project .container .items .item:nth-child(4n+2) {
    background: linear-gradient(119.36deg, #ff5228 0%, #ff4007 100%)
}

.zr-list-page .all-project .container .items .item:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, .18)
}

.zr-list-page .all-project .container .items .item > * {
    margin: 0 !important;
    -ms-flex: none !important;
    flex: none !important
}

.zr-list-page .all-project .container .items .item .image {
    display: block !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10;
    background-size: cover;
    background-position: 50%
}

.zr-list-page .all-project .container .items .item .description {
    position: static !important;
    transform: none !important;
    -ms-flex: 1 1 auto !important;
    flex: 1 1 auto !important;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    height: auto !important;
    min-height: 0 !important;
    padding: 18px 20px 20px !important;
    background: none !important;
    color: #fff !important
}

.zr-list-page .all-project .container .items .item h3 {
    font-family: Avenir Next Demi, sans-serif;
    font-size: 22px !important;
    line-height: 28px !important;
    margin: 0 0 8px;
    color: #fff
}

.zr-list-page .all-project .container .items .item .text {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    margin-bottom: 14px
}

.zr-list-page .all-project .container .items .item p {
    font-size: 14px !important;
    line-height: 21px !important;
    color: #fff;
    opacity: .85;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    margin: 0 0 6px !important
}

.zr-list-page .all-project .container .items .item .btn {
    -ms-flex-item-align: start;
    align-self: flex-start;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 0 3px !important;
    border: 0;
    border-bottom: 1px solid currentColor;
    border-radius: 0;
    background: none !important;
    box-shadow: none !important;
    font-family: Avenir Next Demi, sans-serif;
    font-size: 13px !important;
    line-height: 18px !important;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #fff !important;
    transition: border-color .2s linear
}

.zr-list-page .all-project .container .items .item .btn:after,
.zr-list-page .all-project .container .items .item .btn:before {
    display: none
}

.zr-list-page .all-project .container .items .item:hover .btn {
    border-bottom-color: transparent
}

/* the whole card is clickable (the button link covers it) */
.zr-list-page .all-project .container .items .item {
    position: relative
}

.zr-list-page .all-project .container .items .item .btn::after {
    content: "";
    display: block !important;
    position: absolute;
    inset: 0;
    background: none !important;
    width: auto;
    height: auto
}

/* SEO text under the list */
.zr-list-page .all-project .container > div[style],
.zr-services .zr-services__inner > div[style] {
    max-width: 900px;
    margin: 40px auto 0 !important;
    text-align: center;
    font-size: 15px;
    line-height: 24px;
    color: #555
}

@media screen and (min-width: 951px) {
    .zr-list-page .all-project > .center {
        box-sizing: border-box;
        padding-left: max(20px, 6vw) !important;
        padding-right: max(20px, 6vw) !important
    }
}

@media screen and (max-width: 1100px) {
    .zr-list-page .all-project .container .items {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media screen and (max-width: 600px) {
    .zr-list-page .all-project .container .items {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px
    }
}

.zr-list-page .all-project .container .items .item:nth-child(4n+2) {
    background-image: linear-gradient(119.36deg, #ff5228 0%, #ff4007 100%) !important
}

.zr-list-page .all-project .container .items .item .description {
    text-align: left !important
}

.zr-list-page .all-project .container .items .item .btn {
    overflow: visible !important;
    text-indent: 0 !important;
    left: 0 !important;
    transform: none !important
}

.zr-list-page .all-project .container .items .item .btn {
    position: static !important
}

.zr-list-page .all-project .container .items .item .btn::after {
    border: 0 !important;
    border-radius: 16px !important;
    z-index: 1
}

/* home: links to /our-works/ and /articles/ (stage 7.8) */
.our-work-section .desc-section {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 16px
}

.our-work-section .desc-section .zr-btn-all {
    width: auto;
    min-width: 200px;
    max-width: none;
    height: 52px;
    line-height: 48px;
    font-size: 17px;
    padding: 0 28px;
    border-radius: 12px;
    margin: 0
}

#news-anchor .zr-home-more {
    margin-top: 24px
}

/* ---------- Contact page /contacts/ (stage 7.8) ---------- */
.zr-contact {
    position: relative;
    z-index: 1;
    color: #323232
}

.zr-contact__inner {
    box-sizing: border-box;
    max-width: 1240px;
    margin: 0 auto;
    padding: 110px 40px 120px
}

.zr-contact .zr-home-title {
    margin-bottom: 10px
}

.zr-contact .zr-home-intro {
    margin-bottom: 40px
}

.zr-contact__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-gap: 40px;
    gap: 40px;
    -ms-flex-align: start;
    align-items: start
}

.zr-contact__cards {
    display: grid;
    grid-gap: 16px;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0
}

.zr-contact__card {
    padding: 20px 24px;
    border-radius: 16px;
    background: #323232;
    color: #fff
}

.zr-contact__card:nth-child(2) {
    background: linear-gradient(119.36deg, #ff5228 0%, #ff4007 100%)
}

.zr-contact__form-title {
    font-family: Avenir Next Demi, sans-serif;
    font-size: 26px;
    line-height: 32px;
    text-transform: uppercase;
    margin: 0 0 16px
}

.zr-contact__form form .input input {
    height: 52px;
    padding-top: 18px;
    font-size: 17px;
    border-radius: 12px
}

.zr-contact__form form .input + .input {
    margin-top: 14px
}

.zr-contact__form form .input input:focus + label,
.zr-contact__form form .input input.focused + label {
    top: 4px !important;
    height: auto !important;
    font-size: 12px !important;
    line-height: 16px
}

.zr-contact__form form .input label,
.zr-contact__form form .textarea label {
    font-size: 16px
}

.zr-contact__form form .textarea textarea {
    height: 120px;
    margin: 14px 0;
    padding-top: 26px;
    font-size: 17px;
    border-radius: 12px
}

.zr-contact__form form .btns .btn {
    height: 52px;
    line-height: 48px;
    font-size: 17px;
    border-radius: 12px;
    padding-top: 0;
    padding-bottom: 0
}

.zr-contact__map {
    margin-top: 40px
}

.zr-contact__map iframe {
    display: block;
    width: 100%;
    height: 260px; /* T-0009: was 420px */
    border: 0;
    border-radius: 16px;
    background: #f0f0f0
}

@media screen and (max-width: 950px) {
    .zr-contact__grid {
        grid-template-columns: minmax(0, 1fr)
    }
}

@media screen and (max-width: 769px) {
    .zr-contact__inner {
        padding: 100px 20px 48px
    }

    .zr-contact__map iframe {
        height: 200px /* T-0009: was 300px */
    }
}

#write-to-us-anchor .zr-contacts-link {
    margin: -16px 0 24px;
    font-size: 15px;
    line-height: 22px;
    text-align: center
}

#write-to-us-anchor .zr-contacts-link a {
    color: #ff553a;
    border-bottom: 1px solid currentColor;
    text-decoration: none
}

#write-to-us-anchor .zr-contacts-link a:hover {
    border-bottom-color: transparent
}

.zr-contact__form form .input input,
.zr-contact__form form .textarea textarea {
    padding-left: 16px !important
}

.zr-contact__form form .input label {
    left: 17px !important
}

.zr-contact__form form .textarea label {
    left: 17px !important;
    padding-left: 0 !important
}

/* contact page (T-0009): compact - quick actions as small pills (the style of the former messenger links), two small office
   cards (body-text size, 20px icons without circles, no separators), the Kharkiv status as a soft grey pill */
.zr-contact__quick {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0 0 20px;
    padding: 0
}

.zr-contact__quick a {
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
    align-items: center;
    padding: 6px 14px;
    border: 1px solid #e3e3e3;
    border-radius: 18px;
    font-family: Avenir Next Demi, sans-serif;
    font-size: 15px;
    line-height: 22px;
    color: #323232;
    text-decoration: none;
    transition: border-color .2s linear, color .2s linear
}

.zr-contact__quick a:hover,
.zr-contact__quick a:focus-visible {
    border-color: #ff553a;
    color: #ff553a
}

.zr-contact__quick svg,
.zr-contact__office-title svg {
    display: block;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    margin-right: 8px
}

.zr-contact__offices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    grid-gap: 16px;
    gap: 16px
}

.zr-contact__office {
    padding: 16px 18px;
    border: 1px solid #ececec;
    border-radius: 16px;
    font-size: 15px;
    line-height: 22px;
    color: #323232
}

.zr-contact .zr-contact__office p {
    margin: 4px 0 0;
    font-size: 15px;
    line-height: 22px
}

/* T-0013 C3: «To help us reply faster» - the quiet hint look (as p.zr-hint on /development/); T-0014 F3: first in the
   left block, the line now under it */
.zr-contact .zr-contact__hint {
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #ececec;
    font-size: 14px;
    line-height: 22px;
    color: #6e6e6e
}

.zr-contact .zr-contact__hint ul {
    margin: 2px 0;
    padding-left: 18px;
    list-style: disc
}

.zr-contact .zr-contact__hint li {
    margin: 0;
    font-size: 14px;
    line-height: 22px;
    color: #6e6e6e
}

.zr-contact__office a {
    color: #323232;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .2s linear, color .2s linear
}

.zr-contact__office a:hover,
.zr-contact__office a:focus-visible {
    color: #ff553a;
    border-bottom-color: currentColor
}

.zr-contact .zr-contact__office-title {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    margin: 0 0 6px;
    font-family: Avenir Next Demi, sans-serif;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0;
    text-transform: none
}

.zr-contact .zr-contact__map-title {
    margin: 0 0 10px;
    font-family: Avenir Next Demi, sans-serif;
    font-size: 13px;
    line-height: 18px;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #6e6e6e
}

@media screen and (max-width: 768px) {
    .zr-contact__office {
        padding: 14px 16px
    }
}

/* list pages (7.8, 2): all cards dark, no "check project / read" label (the whole card is the link) */
.zr-list-page .all-project .container .items .item:nth-child(4n+2) {
    background-image: none !important;
    background-color: #323232 !important
}

.zr-list-page .all-project .container .items .item .btn {
    font-size: 0 !important;
    line-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    height: 0 !important
}

/* home Customers & Reviews (7.8, 2): font sizes of the site (were 28/22px) - the layout, logos and the orange
   scroll line of the theme are kept */
@media screen and (min-width: 951px) {
    #reviews-anchor .reviews-scroll .item h3 {
        font-family: Avenir Next Demi, sans-serif;
        font-size: 20px !important;
        line-height: 26px !important;
        margin: 0 0 2px
    }

    #reviews-anchor .reviews-scroll .item .text {
        font-size: 14px !important;
        line-height: 20px !important
    }

    #reviews-anchor .reviews-scroll .item p {
        font-size: 15px !important;
        line-height: 23px !important
    }
}

/* information pages: Privacy Policy, Terms of Service (stage 7.8) */
.zr-info__inner {
    max-width: 920px
}

.zr-info__text {
    margin-top: 28px;
    font-size: 16px;
    line-height: 26px;
    color: #444
}

.zr-info__text .zr-legal__updated {
    text-align: center;
    color: #6e6e6e;
    font-size: 14px;
    margin-bottom: 24px
}

.zr-info__text h2 {
    font-family: Avenir Next Demi, sans-serif;
    font-size: 22px;
    line-height: 30px;
    color: #323232;
    text-transform: none;
    text-align: left;
    margin: 32px 0 10px
}

.zr-info__text p {
    font-size: inherit;
    line-height: inherit;
    margin: 0 0 12px
}

.zr-info__text ul {
    margin: 0 0 14px;
    padding-left: 22px;
    list-style: disc
}

.zr-info__text li {
    margin-bottom: 6px
}

.zr-info__text a {
    color: #ff553a;
    border-bottom: 1px solid currentColor
}

/* ---------- Menu bottom row: Contacts · Privacy · Terms (stage 7.9) ----------
   The row takes the same place at the bottom as the breadcrumbs row at the top, so the menu list is in the middle */
.zr-menu-foot {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    font-size: 13px;
    line-height: 20px
}

.zr-menu-foot a {
    color: #6e6e6e;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 1px solid transparent;
    transition: color .2s linear, border-color .2s linear
}

.zr-menu-foot a + a::before {
    content: "\00B7";
    display: inline-block;
    margin: 0 10px;
    color: #c4c4c4
}

.zr-menu-foot a:hover,
.zr-menu-foot a:focus,
.zr-menu-foot a.is-current {
    color: #ff553a
}

/* desktop panel: same height as the top row (Back + crumbs: 20px + 16px gap); + the service switch on service pages */
.main-navigation .zr-menu-foot {
    min-height: 20px;
    margin: 16px 48px 0 0;
    -ms-flex-align: end;
    align-items: flex-end
}

.main-navigation .zr-menu-inner:has(.zr-svc-switch) .zr-menu-foot {
    min-height: calc(20px + var(--zr-switch-h, 44px))
}

/* mobile popup: above the Close button */
#menu-popup .zr-menu-foot {
    -ms-flex-pack: center;
    justify-content: center;
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px solid #f0f0f0;
    text-align: center
}

#menu-popup .zr-menu-foot a + a::before {
    margin: 0 8px
}

/* mobile popup: the bottom (row + Close button) is higher than the top (logo + crumbs) - compensate, list centered */
#menu-popup .main-menu {
    padding-top: 36px
}

#menu-popup:has(.zr-svc-switch) .main-menu {
    padding-top: 0
}

@media screen and (max-height: 700px) {
    #menu-popup .main-menu {
        padding-top: 0
    }
}

@media screen and (max-width: 769px) and (max-height: 500px) {
    #menu-popup .main-menu {
        padding-top: 0
    }
}

/* >1920px: the support illustration stays at its 1920px size (it followed the screen height) */
@media screen and (min-width: 1921px) {
    #fullpage .slide.how-it-works .wrap-image img {
        height: min(calc(100vh - 168px), 912px)
    }
}

/* small phones: the menu bottom row is compact (it took 2 lines in RU/UA on 320px) */
@media screen and (max-width: 380px) {
    #menu-popup .zr-menu-foot {
        font-size: 11px;
        line-height: 16px;
        padding-top: 8px;
        margin-top: 8px
    }

    #menu-popup .zr-menu-foot a + a::before {
        margin: 0 5px
    }
}

@media screen and (max-width: 769px) and (max-height: 600px) {
    #menu-popup {
        --zr-pop-font: clamp(20px, min((100vh - 340px) / 10.5, 8.4vw), 32px)
    }

    #menu-popup .inner a {
        font-size: 14px;
        line-height: 20px
    }
}

/* contact page on desktop: inside the white frame (64px) + gap; one column until the two columns have room */
@media screen and (min-width: 769px) {
    .zr-contact__inner {
        padding-left: 104px;
        padding-right: 104px
    }
}

@media screen and (max-width: 1200px) {
    .zr-contact__grid {
        grid-template-columns: minmax(0, 1fr)
    }
}

.zr-contact__form form .input input,
.zr-contact__form form .textarea textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box
}

/* home "Write to us" on very low windows (<= 650px high): the button went below the frame */
@media screen and (min-width: 951px) and (max-height: 650px) {
    #write-to-us-anchor .zr-home-title {
        font-size: 32px
    }

    body:not(.zr-landing) #write-to-us-anchor h2 + p {
        margin-bottom: 12px !important;
        font-size: 14px;
        line-height: 20px
    }

    #write-to-us-anchor .zr-contacts-link {
        margin: -6px 0 12px
    }

    #write-to-us-anchor form .input input {
        height: 42px
    }

    #write-to-us-anchor form .input + .input {
        margin-top: 10px
    }

    #write-to-us-anchor form .textarea textarea {
        height: 66px;
        margin-top: 10px;
        margin-bottom: 10px
    }

    #write-to-us-anchor form .btns .btn {
        height: 46px;
        line-height: 42px
    }
}

/* Awards: long captions (UA/RU, 4-5 lines on 1180px) went below the frame - 3 whole lines with an ellipsis */
@media screen and (min-width: 951px) {
    #awards-anchor .slick-slider .item h4 {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        overflow: hidden
    }
}

/* ---------- Design landing, stage 7.10 ---------- */
/* decorations inside the slide box (red crescent of "Write to us"...) cover the whole slide again, as in the original:
   the slide box was limited to the frame in 7.4, so they were cut at the frame and did not go under the header */
@media screen and (min-width: 769px) {
    body.main-page #fullpage .fp-slide > .fp-tableCell > .container > .anim {
        top: -64px !important;
        height: calc(100% + 128px) !important
    }
}

/* service landings (body.zr-landing: design, development, support), desktop: fonts and sizes of the home page,
   slides centered in the frame (stage 7.10 design, 7.11 all three) */
@media screen and (min-width: 951px) {
    /* titles like the home section titles */
    .zr-landing #fullpage .slide h2,
    .zr-landing #fullpage .slide .text-slide h2,
    body.zr-support #fullpage .slide h1, /* T-0011: the new H1 of support / design looks like the old h2 */
    body.zr-design #fullpage .slide h1 {
        font-family: Avenir Next Demi, sans-serif !important;
        font-size: clamp(30px, 2.9vw, 56px) !important;
        line-height: 1.15 !important;
        text-transform: uppercase;
        margin-bottom: 18px !important
    }

    .zr-landing #fullpage .slide h3 {
        font-family: Avenir Next Demi, sans-serif;
        font-size: 22px !important;
        line-height: 30px !important;
        margin-bottom: 12px
    }

    .zr-landing #fullpage .slide p,
    .zr-landing #fullpage .slide .elements-text li,
    .zr-landing #fullpage .slide ul.list li {
        font-size: 17px !important;
        line-height: 26px !important
    }

    .zr-landing #fullpage .slide p + p {
        margin-top: 14px !important
    }

    .zr-landing #fullpage .slide .btn {
        height: 52px !important;
        line-height: 48px !important;
        font-size: 17px !important;
        border-radius: 12px !important;
        padding-top: 0;
        padding-bottom: 0
    }

    /* Design creating, How we do, What we do: the text in the middle of the frame (was at the top) */
    .zr-landing #fullpage .slide:not(.customer-reviews):not(.our-work) > .fp-tableCell > .container {
        -ms-flex-line-pack: center;
        align-content: center;
        -ms-flex-align: center;
        align-items: center
    }

    .zr-landing #fullpage .slide:not(.customer-reviews):not(.our-work) .container > .text-slide,
    .zr-landing #fullpage .slide:not(.customer-reviews):not(.our-work) .container > .text-section,
    .zr-landing #fullpage .slide:not(.customer-reviews):not(.our-work) .container > .elements-text {
        -ms-flex-item-align: center;
        align-self: center
    }

    /* Our work: project name on the picture and the "Projects:" label in the site sizes */
    .zr-design #fullpage .slide.our-work .slide-item h2 {
        font-size: clamp(26px, 2.2vw, 44px) !important;
        text-transform: none
    }

    .zr-design #fullpage .slide.our-work .bottom .title {
        font-size: 17px !important;
        line-height: 24px !important
    }

    .zr-design #fullpage .slide.our-work .slide-item,
    .zr-design #fullpage .slide.our-work .projects a,
    .zr-design #fullpage .slide.our-work .projects img {
        border-radius: 12px;
        overflow: hidden
    }

    /* Customer reviews: cards of the same height, home review sizes, rounded */
    .zr-design #fullpage .slide.customer-reviews .customer-reviews-reviews .slick-track {
        display: -ms-flexbox !important;
        display: flex !important
    }

    .zr-design #fullpage .slide.customer-reviews .customer-reviews-reviews .slick-slide {
        height: auto !important
    }

    .zr-design #fullpage .slide.customer-reviews .customer-reviews-reviews .item {
        display: block !important;
        border-radius: 16px;
        overflow: hidden
    }

    .zr-design #fullpage .slide.customer-reviews .customer-reviews-reviews .item .title {
        font-family: Avenir Next Demi, sans-serif;
        font-size: 20px !important;
        line-height: 26px !important;
        min-height: 72px
    }

    .zr-design #fullpage .slide.customer-reviews .customer-reviews-reviews .item .desc {
        font-size: 14px !important;
        line-height: 20px !important
    }

    .zr-design #fullpage .slide.customer-reviews .customer-reviews-reviews .item .desc + .text,
    .zr-design #fullpage .slide.customer-reviews .customer-reviews-reviews .item .desc + .text p {
        font-size: 15px !important;
        line-height: 23px !important
    }

    .zr-design #fullpage .slide.customer-reviews .slide-item {
        border-radius: 16px;
        overflow: hidden
    }

    .zr-design #fullpage .slide.customer-reviews .slide-item h2 {
        font-size: clamp(26px, 2.2vw, 44px) !important;
        text-transform: none
    }

    /* What we do: the vertical MENU label on the red shape - white */
    body.zr-design.fp-viewing-slide-what-we-do .main-navigation .close-menu .text {
        color: #fff
    }

    body.zr-design.fp-viewing-slide-what-we-do .main-navigation .close-menu .line {
        background: #fff
    }

    body.zr-design.fp-viewing-slide-what-we-do .main-navigation.open .close-menu .text {
        color: #323232
    }

    body.zr-design.fp-viewing-slide-what-we-do .main-navigation.open .close-menu .line {
        background: #323232
    }
}

@media screen and (min-width: 951px) {
    /* centered slides: the text blocks take their own height (the theme gives some of them 100%) */
    .zr-landing #fullpage .slide:not(.customer-reviews):not(.our-work) .container > .text-slide,
    .zr-landing #fullpage .slide:not(.customer-reviews):not(.our-work) .container > .text-section,
    .zr-landing #fullpage .slide:not(.customer-reviews):not(.our-work) .container > .elements-text {
        height: auto !important;
        max-height: 100%
    }

    /* picture columns keep the full height */
    .zr-landing #fullpage .slide .container > .image-container {
        -ms-flex-item-align: stretch;
        align-self: stretch
    }
}

@media screen and (min-width: 951px) {
    /* support "Types of support": the title, the tabs and the text as one block in the middle */
    .zr-support #fullpage .slide.advantages > .fp-tableCell > .container {
        -ms-flex-pack: center;
        justify-content: center
    }

    /* design "Our work": text and projects as one block in the middle (was: text at the top, projects at the bottom,
       an empty hole between) */
    .zr-design #fullpage .slide.our-work .elements-text > .item {
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-pack: center !important;
        justify-content: center !important;
        height: 100%
    }

    .zr-design #fullpage .slide.our-work .elements-text > .item > .top {
        margin-bottom: 36px
    }

    .zr-design #fullpage .slide.our-work .elements-text > .item > .bottom {
        margin-top: 0 !important
    }

    .zr-design #fullpage .slide.our-work .projects a {
        border-radius: 12px;
        overflow: hidden
    }

    .zr-design #fullpage .slide.our-work .btns .btn,
    .zr-design #fullpage .slide.our-work .arrow-our-work .btn,
    .zr-design #fullpage .slide.our-work .arrow-our-work button {
        border-radius: 12px !important
    }

    .zr-design #fullpage .slide.our-work .wrap-slider .slide-item {
        border-radius: 16px
    }
}

@media screen and (min-width: 951px) {
    /* support "Advantages": the picture column keeps the full height (its picture is placed from the top), the text centered */
    .zr-support #fullpage .slide.how-it-works > .fp-tableCell > .container {
        -ms-flex-align: stretch !important;
        align-items: stretch !important
    }

    .zr-support #fullpage .slide.how-it-works > .fp-tableCell > .container > .text-section {
        -ms-flex-item-align: center;
        align-self: center
    }
}

/* the menu is open: phone and languages always dark (on the slides where the theme paints them white) */
body:has(.main-navigation.open) .main-header .anim-phone-number a,
body:has(.main-navigation.open) .main-header .languages a {
    color: #323232 !important
}

body:has(.main-navigation.open) .main-header .anim-phone-number a::before {
    filter: none !important
}

body:has(.main-navigation.open) .main-header .languages a::after,
body:has(.main-navigation.open) .main-header .anim-phone-number a > div::after {
    background: #323232 !important
}

/* contact and information pages (normal scroll): the header has its grey background, so the scrolled content goes under it
   (it was visible over the header - these pages do not load index-page.css that gives it); /services/ too since it scrolls
   (T-0011 B2) */
@media screen and (min-width: 769px) {
    body.zr-contact-page .main-header,
    body.zr-info-page .main-header,
    body.zr-services-page .main-header {
        background: #f7f7f7
    }
}

/* phones and scroll layouts: clear gaps between the sections (they were glued: 28-40px, the orange About Us touching
   the next title) - every section gets the same inner top / bottom space (stage 7.11) */
@media screen and (max-width: 769px) {
    #fullpage > .section:not(.index-section),
    .zr-landing #fullpage .slide {
        padding-top: 48px !important;
        padding-bottom: 48px !important
    }

    .zr-landing #fullpage .slide.home-page,
    .zr-landing #fullpage .slide.main-page {
        padding-top: 16px !important
    }

}

.fp-responsive #fullpage > .section:not(.index-section) {
    padding-top: 64px !important;
    padding-bottom: 64px !important
}

@media screen and (min-width: 951px) {
    /* support "Types of support": the left column (title + tabs + picture) was taller than the frame on low windows -
       the picture takes only the height that is left */
    .zr-support #fullpage .slide.advantages .text-link .anim-image {
        height: auto !important;
        max-height: calc(100vh - 128px - 40px - 230px);
        overflow: hidden
    }

    .zr-support #fullpage .slide.advantages .text-link .anim-image svg {
        max-height: calc(100vh - 128px - 40px - 230px);
        width: auto !important
    }
}

/* ---------- Stage 7.12 ---------- */
/* footer: grey like the frame margin on every page (was white on the contact / information / services pages) */
/* (7.13) grey only on the normal-scroll pages; fullpage pages keep the theme footer - on the landings it is transparent,
   so the slide pictures go down to the screen edge */
body:not(.main-page) .main-footer {
    background: #f7f7f7 !important
}

body.zr-landing .main-footer {
    background: transparent !important
}

/* copyright: in place of "Scroll down" when the hint is hidden; on phones at the bottom of the page */
.main-footer .zr-copyright {
    display: none;
    height: 64px;
    line-height: 64px;
    font-size: 13px;
    color: #6e6e6e
}

.main-footer.zr-end .zr-copyright {
    display: block
}

.main-footer.zr-end .scroll-down {
    display: none !important
}

.zr-copyright--mob {
    padding: 24px 20px 32px;
    text-align: center;
    font-size: 13px;
    line-height: 20px;
    color: #6e6e6e;
    background: #fff
}

/* home "Write to us": the form a little narrower */
@media screen and (min-width: 951px) {
    #write-to-us-anchor .container form,
    #write-to-us-anchor form.contact-form {
        max-width: 620px
    }
}

/* ---------- Forms (stage 7.13): one look on home, landings and /contacts/, every screen ----------
   Label inside the field: in the middle of an input / at the top of the message box; when the field is focused or
   filled it moves up and gets small - a short smooth move (was: jumps between flex-centered and fixed positions,
   the message label in the middle of the box, 32px fonts on the landings) */
body #write-to-us-anchor form .input input,
body.zr-landing #fullpage .slide.write-to-us form .input input,
body .zr-contact__form form .input input {
    height: 52px !important;
    padding: 18px 16px 0 !important;
    font-size: 16px !important;
    line-height: 22px !important;
    border-radius: 12px !important
}

body #write-to-us-anchor form .textarea textarea,
body.zr-landing #fullpage .slide.write-to-us form .textarea textarea,
body .zr-contact__form form .textarea textarea {
    height: 112px !important;
    min-height: 0 !important;
    padding: 26px 16px 8px !important;
    font-size: 16px !important;
    line-height: 22px !important;
    border-radius: 12px !important
}

body #write-to-us-anchor form .input + .input,
body.zr-landing #fullpage .slide.write-to-us form .input + .input,
body .zr-contact__form form .input + .input {
    margin-top: 12px !important
}

body #write-to-us-anchor form .textarea,
body.zr-landing #fullpage .slide.write-to-us form .textarea,
body .zr-contact__form form .textarea {
    margin-top: 12px !important;
    margin-bottom: 12px !important
}

body #write-to-us-anchor form .input textarea, .textarea textarea,
body.zr-landing #fullpage .slide.write-to-us form .input textarea, .textarea textarea,
body .zr-contact__form form .input textarea, .textarea textarea {
    margin: 0 !important
}

body #write-to-us-anchor form .input label:not(.text-danger),
body.zr-landing #fullpage .slide.write-to-us form .input label:not(.text-danger),
body .zr-contact__form form .input label:not(.text-danger),
body #write-to-us-anchor form .textarea label:not(.text-danger),
body.zr-landing #fullpage .slide.write-to-us form .textarea label:not(.text-danger),
body .zr-contact__form form .textarea label:not(.text-danger) {
    position: absolute !important;
    left: 17px !important;
    right: auto !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    font-size: 16px !important;
    line-height: 20px !important;
    color: #323232 !important;
    opacity: .5 !important;
    pointer-events: none;
    transition: top .18s ease, transform .18s ease, font-size .18s ease, opacity .18s ease, color .18s ease !important
}

body #write-to-us-anchor form .input label:not(.text-danger),
body.zr-landing #fullpage .slide.write-to-us form .input label:not(.text-danger),
body .zr-contact__form form .input label:not(.text-danger) {
    top: 26px !important;
    transform: translateY(-50%) !important
}

body #write-to-us-anchor form .textarea label:not(.text-danger),
body.zr-landing #fullpage .slide.write-to-us form .textarea label:not(.text-danger),
body .zr-contact__form form .textarea label:not(.text-danger) {
    top: 15px !important;
    transform: none !important
}

body #write-to-us-anchor form .input input:focus + label:not(.text-danger),
body.zr-landing #fullpage .slide.write-to-us form .input input:focus + label:not(.text-danger),
body .zr-contact__form form .input input:focus + label:not(.text-danger),
body #write-to-us-anchor form .input input.focused + label:not(.text-danger),
body.zr-landing #fullpage .slide.write-to-us form .input input.focused + label:not(.text-danger),
body .zr-contact__form form .input input.focused + label:not(.text-danger),
body #write-to-us-anchor form .textarea textarea:focus + label:not(.text-danger),
body.zr-landing #fullpage .slide.write-to-us form .textarea textarea:focus + label:not(.text-danger),
body .zr-contact__form form .textarea textarea:focus + label:not(.text-danger),
body #write-to-us-anchor form .textarea textarea.focused + label:not(.text-danger),
body.zr-landing #fullpage .slide.write-to-us form .textarea textarea.focused + label:not(.text-danger),
body .zr-contact__form form .textarea textarea.focused + label:not(.text-danger) {
    top: 6px !important;
    transform: none !important;
    font-size: 12px !important; /* 7.25: 11 -> 12 px (10.2 px on a scaled screen) */
    line-height: 14px !important;
    opacity: .7 !important
}

body #write-to-us-anchor form .input input:focus + label:not(.text-danger),
body.zr-landing #fullpage .slide.write-to-us form .input input:focus + label:not(.text-danger),
body .zr-contact__form form .input input:focus + label:not(.text-danger),
body #write-to-us-anchor form .textarea textarea:focus + label:not(.text-danger),
body.zr-landing #fullpage .slide.write-to-us form .textarea textarea:focus + label:not(.text-danger),
body .zr-contact__form form .textarea textarea:focus + label:not(.text-danger) {
    color: #ff553a !important;
    opacity: 1 !important
}

body #write-to-us-anchor form .textarea label span,
body.zr-landing #fullpage .slide.write-to-us form .textarea label span,
body .zr-contact__form form .textarea label span {
    opacity: 1 !important;
    color: inherit !important
}

body #write-to-us-anchor form .btns .btn, button[type=submit],
body.zr-landing #fullpage .slide.write-to-us form .btns .btn, button[type=submit],
body .zr-contact__form form .btns .btn, button[type=submit] {
    height: 52px !important;
    line-height: 48px !important;
    font-size: 17px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-radius: 12px !important
}


/* home on phones / tablets / scroll mode (no slides): sections in turn - white, orange (About us, as is), grey like the
   frame, white, grey, white, grey, white; the same space inside every section (stage 7.13) */
@media screen and (max-width: 769px) {
    #fullpage > #services-anchor,
    #fullpage > #awards-anchor,
    #fullpage > #news-anchor {
        background: #f7f7f7 !important
    }

    #fullpage > #our-works-anchor,
    #fullpage > #reviews-anchor,
    #fullpage > #write-to-us-anchor {
        background: #fff !important
    }

    #fullpage > .section:not(.index-section) {
        margin: 0 !important;
        padding-top: 48px !important;
        padding-bottom: 48px !important
    }

    #fullpage > .section:not(.index-section) > .fp-tableCell > .center,
    #fullpage > .section:not(.index-section) > .center {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important
    }
}

.fp-responsive #fullpage > #services-anchor,
.fp-responsive #fullpage > #awards-anchor,
.fp-responsive #fullpage > #news-anchor {
    background: #f7f7f7 !important
}

/* ---------- Home "Our works" (7.13, as on the user's screenshots) ----------
   the project picture and its text side by side, the text starts at the top of the picture, "Check project" under the
   description; at the bottom in the middle: [<]  All projects  [>] */
@media screen and (min-width: 951px) {
    #our-works-anchor > .fp-tableCell > .center > .container {
        position: relative;
        -ms-flex-align: start;
        align-items: flex-start;
        padding-bottom: 76px !important
    }

    #our-works-anchor .info {
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-pack: start !important;
        justify-content: flex-start !important;
        -ms-flex-item-align: start;
        align-self: flex-start
    }

    #our-works-anchor .info .creative-slide-text {
        height: auto !important
    }

    #our-works-anchor .creative-slide-text .text-paragraph .anim-title {
        margin-top: 0 !important
    }

    #our-works-anchor .info .desc-section {
        margin-top: 24px !important
    }

    #our-works-anchor .info .desc-section .btn-check-project {
        width: auto !important;
        min-width: 220px;
        max-width: none !important;
        padding: 0 28px !important
    }

    /* the slider has a running CSS animation, so it is the containing block of the arrows; the whole section box
       is used instead by making the slider the only positioned element around: its arrows go to its bottom */
    #our-works-anchor .info .desc-section .zr-works-nav {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        gap: 16px
    }

    /* relative, not static (7.20): the second frame of the button (.btn:after, absolute) must be placed by the button itself -
       with static it took the whole row [<] All Projects [>] */
    #our-works-anchor .zr-works-nav .zr-btn-all {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        margin: 0 !important
    }

    #our-works-anchor .zr-works-nav .creative-arrow {
        width: 52px !important;
        min-width: 52px;
        max-width: 52px !important;
        height: 52px !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 12px !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: center;
        justify-content: center
    }

    #our-works-anchor .zr-works-nav .creative-arrow svg {
        width: 13px;
        height: auto
    }

    #our-works-anchor .zr-works-nav .creative-arrow.next svg {
        transform: rotate(180deg)
    }

    #our-works-anchor .zr-works-nav .creative-arrow.default {
        opacity: .4
    }

    /* the old arrows on the picture are not shown on desktop (the bottom row clicks them) */
    #our-works-anchor .slider-creative .creative-arrors {
        visibility: hidden !important
    }
}

/* Awards: the arrows at the left and the right of the description under the title */
@media screen and (min-width: 951px) {
    #awards-anchor .arrow-news {
        position: relative
    }

    #awards-anchor .arrow-news h2.zr-home-title {
        margin: 0 !important
    }

    #awards-anchor .arrow-news .btn,
    #awards-anchor .arrow-news .slick-arrow {
        position: absolute !important;
        top: calc(100% + 36px);
        transform: translateY(-50%);
        margin: 0 !important
    }

    #awards-anchor .arrow-news .btn:first-child,
    #awards-anchor .arrow-news .slick-prev {
        left: auto !important;
        right: calc(50% + min(410px, 50% - 48px)) !important
    }

    #awards-anchor .arrow-news .btn:last-child,
    #awards-anchor .arrow-news .slick-next {
        right: auto !important;
        left: calc(50% + min(410px, 50% - 48px)) !important
    }

    #awards-anchor .arrow-news + p {
        max-width: min(760px, calc(100% - 130px)) !important
    }
}

@media screen and (max-width: 950px) {
    #our-works-anchor .zr-works-nav {
        display: none
    }
}

#our-works-anchor .zr-works-nav .creative-arrow:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none
}

/* ---------- Stage 7.14 ---------- */
/* Home "Our works" (desktop): "Check project" at the bottom of the project block (level with the bottom of the
   picture), the name and the text at the top. The theme flew the buttons in from the top left (keyframes m:
   translateY(-404%) + left -77%) - on the way the arrows went over "All projects"; now they fade in and rise a little,
   like the services cards. Hover: the site one (7.20: the theme's shifted second frame .btn:after - no lift / shadow). */
@keyframes zr-rise {
    from {
        opacity: 0;
        translate: 0 16px
    }
    to {
        opacity: 1;
        translate: 0 0
    }
}

@media screen and (min-width: 951px) {
    #our-works-anchor .info {
        -ms-flex-item-align: stretch !important;
        align-self: stretch !important;
        box-sizing: border-box;
        padding-bottom: 117px /* the slider box has padding-bottom 150px, the 3rd picture of the stack goes ~30px lower */
    }

    #our-works-anchor .info .desc-section {
        margin-top: auto !important
    }

    #our-works-anchor .info .btn {
        transform: none;
        left: auto;
        opacity: 1
    }

    .our-work-section.animation-done .info .btn {
        animation: none !important
    }

    html.fp-enabled body:not(.fp-responsive) #our-works-anchor:not(.animation-done) .desc-section > .btn-check-project,
    html.fp-enabled body:not(.fp-responsive) #our-works-anchor:not(.animation-done) .zr-works-nav {
        opacity: 0
    }

    #our-works-anchor.animation-done .desc-section > .btn-check-project {
        animation: zr-rise .7s cubic-bezier(.2, .7, .2, 1) .7s both !important
    }

    #our-works-anchor.animation-done .zr-works-nav {
        animation: zr-rise .7s cubic-bezier(.2, .7, .2, 1) .85s both
    }

}

@media screen and (min-width: 951px) and (max-width: 1366px) {
    #our-works-anchor .info {
        padding-bottom: 79px /* slider padding-bottom 112px here */
    }
}

@media (prefers-reduced-motion: reduce) {
    #our-works-anchor .desc-section > .btn-check-project,
    #our-works-anchor .zr-works-nav {
        animation: none !important;
        opacity: 1 !important
    }
}

/* Home "Articles": the cards are as tall as the tallest one (a title on two lines), the description sits at the
   bottom of every card; the picture a little taller (was 651x270 = 2.41:1) */
#news-anchor .slick-track {
    display: -ms-flexbox !important;
    display: flex !important
}

#news-anchor .slick-slide {
    height: auto !important;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-direction: column;
    flex-direction: column
}

#news-anchor .slick-slider .text-paragraph {
    margin-top: auto
}

#news-anchor .slick-slider .text-paragraph p {
    min-height: 0
}

#news-anchor .slick-slider .image {
    aspect-ratio: 21 / 10;
    background-size: cover !important;
    background-position: 50% 50%
}

#news-anchor .slick-slider .image img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

/* Home "Write to us" (desktop): the form and the logo - two halves of one centered block (there was a big hole
   between the narrow form and the logo). body:not(.zr-landing): the landing slides have the same id (7.15 fix) */
@media screen and (min-width: 951px) {
    body:not(.zr-landing) #write-to-us-anchor .container {
        box-sizing: border-box;
        width: 100%;
        max-width: 1240px;
        margin-left: auto !important;
        margin-right: auto !important
    }

    body:not(.zr-landing) #write-to-us-anchor .container > * {
        -ms-flex: 0 0 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
        box-sizing: border-box
    }

    body:not(.zr-landing) #write-to-us-anchor .container > form,
    body:not(.zr-landing) #write-to-us-anchor .container > :first-child {
        padding-right: 32px
    }
}

/* Home Services: the same side gaps as Our works / Reviews / Articles / Write to us (it sat in a narrower column) */
@media screen and (min-width: 951px) {
    #fullpage #services-anchor > .fp-tableCell > .center,
    #fullpage #services-anchor > .center {
        box-sizing: border-box;
        padding-left: max(20px, 6vw) !important;
        padding-right: max(20px, 6vw) !important
    }

    #services-anchor .zr-home-inner {
        max-width: none;
        padding: 0
    }
}

/* Phones / tablets / scroll mode: a bit more space in every section (56px) and the same at the top and the bottom -
   no extra margins of the first / last block (titles of Awards / Articles +20px, Our works +30px at the bottom);
   inner gaps not bigger than the gaps to the section edges (Articles: dots -> button was 64px) */
@media screen and (max-width: 769px) {
    #fullpage > .section:not(.index-section),
    .zr-landing #fullpage .slide {
        padding-top: 56px !important;
        padding-bottom: 56px !important
    }

    .zr-landing #fullpage .slide.home-page,
    .zr-landing #fullpage .slide.main-page {
        padding-top: 16px !important
    }

    #awards-anchor .arrow-news,
    #news-anchor .arrow-news {
        margin-top: 0 !important
    }

    #our-works-anchor .info {
        margin-top: 8px !important;
        margin-bottom: 0 !important
    }

    #news-anchor .slick-slider {
        margin-top: 8px !important;
        margin-bottom: 0 !important
    }

    #news-anchor .zr-home-more {
        margin-top: 24px !important
    }

    #news-anchor .zr-home-more .btn {
        margin-top: 0 !important
    }

    #services-anchor .zr-home-inner {
        padding: 0
    }
}

.fp-responsive #awards-anchor .arrow-news,
.fp-responsive #news-anchor .arrow-news {
    margin-top: 0 !important
}

/* phone copyright: lower, "ZR code (c) 2015-<year>." */
.zr-copyright--mob {
    padding: 14px 20px 16px
}

/* Write to us on low desktop windows (1100x600): the block was 2px taller than the frame - Submit on the frame edge */
@media screen and (min-width: 951px) and (max-height: 640px) {
    body:not(.zr-landing) #write-to-us-anchor h2 + p {
        margin-bottom: 8px !important
    }
}

/* ---------- Stage 7.15 ---------- */
/* Home "Our works" (desktop): the bottom row [<] All projects [>] 40px under the project picture (there was ~155px of
   empty space: the slider box kept the theme's 150px / 112px bottom padding for its old arrows) */
@media screen and (min-width: 951px) {
    body:not(.zr-landing) #our-works-anchor .slider-creative {
        padding-bottom: 34px !important /* the 3rd picture of the stack goes ~30px lower than the box */
    }

    body:not(.zr-landing) #our-works-anchor > .fp-tableCell > .center > .container {
        padding-bottom: 92px !important /* 52px row + 40px gap */
    }

    body:not(.zr-landing) #our-works-anchor .info {
        padding-bottom: 0 !important
    }
}

/* design landing "Our work": the project pictures in one row, under them [<] Check project [>] like the home page
   (was: the pictures in 3 columns and a column of a wide button + two 210px empty arrow boxes next to them, out of line) */
@media screen and (min-width: 951px) {
    .zr-design #fullpage .slide.our-work .bottom {
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-align: start;
        align-items: flex-start;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap
    }

    .zr-design #fullpage .slide.our-work .bottom > * {
        -ms-flex: none !important;
        flex: none !important
    }

    .zr-design #fullpage .slide.our-work .bottom .title {
        margin-bottom: 12px
    }

    .zr-design #fullpage .slide.our-work .projects {
        width: 100%;
        margin: 0 !important;
        grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)) !important; /* 6 in a row on wide screens, 3 on narrow */
        grid-gap: 16px !important;
        gap: 16px !important
    }

    .zr-design #fullpage .slide.our-work .projects img {
        width: 100%;
        height: auto
    }

    .zr-design #fullpage .slide.our-work .btns {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        gap: 16px;
        width: 100%;
        margin-top: 24px
    }

    .zr-design #fullpage .slide.our-work .arrow-our-work {
        display: contents
    }

    .zr-design #fullpage .slide.our-work .btns > .btn {
        -ms-flex-order: 2;
        order: 2;
        -ms-flex: 0 1 220px !important;
        flex: 0 1 220px !important;
        width: auto !important;
        min-width: 120px;
        height: 52px !important;
        line-height: 48px !important;
        font-size: 17px !important;
        padding: 0 28px !important;
        margin: 0 !important
    }

    .zr-design #fullpage .slide.our-work .arrow-our-work > * {
        width: 52px !important;
        min-width: 52px;
        max-width: 52px !important;
        height: 52px !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 12px !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: center;
        justify-content: center
    }

    .zr-design #fullpage .slide.our-work .arrow-our-work > .slick-prev,
    .zr-design #fullpage .slide.our-work .arrow-our-work > :first-child {
        -ms-flex-order: 1;
        order: 1
    }

    .zr-design #fullpage .slide.our-work .arrow-our-work > .slick-next,
    .zr-design #fullpage .slide.our-work .arrow-our-work > :last-child {
        -ms-flex-order: 3;
        order: 3
    }

    .zr-design #fullpage .slide.our-work .arrow-our-work svg {
        width: 13px;
        max-width: 13px;
        height: auto
    }
}

/* support "Advantages" (how-it-works): the picture always in the middle of the frame and inside it. It was placed from
   the top of its column (as tall as the text, centered) and went ~150px below the frame; zrFit then moved the whole slide
   up a moment after the load (the jump). It is also positioned only while the slide is shown (theme), so it jumped
   again when the slide came in - now it is positioned all the time. */
@media screen and (min-width: 951px) {
    .zr-support #fullpage .slide.how-it-works .wrap-image {
        position: relative
    }

    /* centered with calc, not transform: zrFit measures layout boxes (offsetTop) */
    .zr-support #fullpage .slide.how-it-works .wrap-image img {
        position: absolute !important;
        top: calc(50% - min(100vh - 208px, 820px) / 2) !important;
        margin-top: 0 !important;
        min-height: 0 !important;
        height: min(calc(100vh - 208px), 820px) !important;
        max-height: none
    }
}

/* /our-works/ and /articles/: the SEO text under the list (category description) - a grey rounded card as wide as the
   cards, the text on the left in the site fonts (was: centered 20px grey lines, ragged) */
.zr-list-page .all-project .container > div[style],
.zr-services .zr-services__inner > div[style] {
    box-sizing: border-box;
    max-width: none !important;
    margin: 48px 0 19px !important; /* + the page bottom = 64px to the frame */
    padding: 32px 40px;
    background: #f7f7f7;
    border-radius: 16px;
    text-align: left !important;
    -webkit-columns: 2 360px;
    columns: 2 360px;
    -webkit-column-gap: 48px;
    column-gap: 48px
}

.zr-list-page .all-project .container > div[style] p,

.zr-services .zr-services__inner > div[style] p {
    font-size: 16px !important;
    line-height: 26px !important;
    color: #555 !important;
    text-align: left !important;
    margin: 0 !important
}

.zr-list-page .all-project .container > div[style] p + p,

.zr-services .zr-services__inner > div[style] p + p {
    margin-top: 12px !important
}

@media screen and (max-width: 769px) {
    .zr-list-page .all-project .container > div[style],
    .zr-services .zr-services__inner > div[style] {
        margin-top: 32px !important;
        padding: 24px 20px;
        -webkit-columns: 1;
        columns: 1
    }

    .zr-list-page .all-project .container > div[style] p,

    .zr-services .zr-services__inner > div[style] p {
        font-size: 15px !important;
        line-height: 24px !important
    }
}

/* project and article pages: the buttons at the bottom like the site buttons (were 96px high, 32px text) and 64px of
   space under them to the frame (was 32px); the intro of a project: both paragraphs centered like the title */
body.case-page .news-post .content .btns,
body.news-page .news-post .content .btns {
    gap: 16px;
    margin: 48px 0 0 !important
}

body.case-page .news-post .content .btns > .btn,
body.news-page .news-post .content .btns > .btn {
    -ms-flex: 0 0 auto !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 220px;
    max-width: none !important;
    height: 52px !important;
    line-height: 48px !important;
    font-size: 17px !important;
    padding: 0 28px !important;
    margin: 0 !important;
    border-radius: 12px !important
    /* hover: the site one - the theme's shifted second frame (7.20: no lift / shadow of our own) */
}

@media screen and (min-width: 770px) {
    body.case-page .news-post .content > .center,
    body.news-page .news-post .content > .center {
        padding-bottom: 127px !important /* 64px from the buttons to the frame */
    }
}

@media screen and (max-width: 767px) {
    body.case-page .news-post .content .btns > .btn,
    body.news-page .news-post .content .btns > .btn {
        -ms-flex: 1 1 100% !important;
        flex: 1 1 100% !important
    }
}

body.case-page .news-post .content > .center > p {
    text-align: center
}

/* /our-works/ and /articles/ on phones / tablets: 20px side gaps like the rest of the site (was 8px), the grid uses the
   width (theme: max 440px in the middle - a narrow column on tablets), the name and the text no longer lifted 30px over
   the picture (theme: top -30px, centered) - the same card as on desktop; the title 48px under the header */
@media screen and (max-width: 950px) {
    .zr-list-page .all-project > .center {
        padding-left: 20px !important;
        padding-right: 20px !important
    }

    .zr-list-page .all-project .container .items {
        max-width: none !important;
        margin: 0 !important;
        padding-bottom: 0 !important
    }

    .zr-list-page .all-project .container .items .item {
        margin: 0 !important;
        text-align: left !important
    }

    .zr-list-page .all-project .container .items .item .description h3,
    .zr-list-page .all-project .container .items .item .description .text {
        top: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        text-align: left !important
    }
}

@media screen and (max-width: 769px) {
    body.zr-list-page .all-project {
        padding-top: 112px !important
    }

    /* project page: the title closer to its intro (was ~95px of the empty banner box) */
    body.case-page .news-post .banner .container {
        min-height: 0 !important;
        height: auto !important
    }

    body.case-page .news-post .banner .center {
        padding-bottom: 8px !important
    }

    body.case-page .news-post .content > .center {
        padding-top: 16px !important
    }
}

/* ---------- Stage 7.16: home section transitions ---------- */
/* back up from Services to About (body[data-zr-from="services"], js/scripts.js): the orange stays as it is (no new grow
   from the middle, no big background logo shrinking) and the white reveal circle of Services shrinks at once and fast -
   the Services box slides away orange, not as a white band */
body[data-zr-from="services"].fp-viewing-about-us #blotter .bg-logo-wrapper .bg-logo-wrapper-scale,
body[data-zr-from="services"].fp-viewing-about-us #blotter .bg-logo {
    animation: none !important
}

body[data-zr-from="services"].fp-viewing-about-us #blotter .bg-logo {
    width: 0 !important;
    height: 0 !important
}

html.fp-enabled body[data-zr-from="services"].fp-viewing-about-us .zr-services-reveal::before {
    transition: none !important
}

html.fp-enabled body[data-zr-from="services"].fp-viewing-about-us .zr-home-services .zr-home-title,
html.fp-enabled body[data-zr-from="services"].fp-viewing-about-us .zr-home-services .zr-home-intro,
html.fp-enabled body[data-zr-from="services"].fp-viewing-about-us .zr-home-services .zr-services__card,
html.fp-enabled body[data-zr-from="services"].fp-viewing-about-us .zr-home-services .zr-home-more {
    transition: opacity .15s linear, transform .15s linear !important;
    transition-delay: 0s !important
}

/* leaving the first screen: its buttons go with the texts (the theme's .btn:after frame faded out .2s later - two empty
   button frames moved over the orange About) */
body:not(.fp-viewing-index) #index-anchor .services .btn,
body:not(.fp-viewing-index) #index-anchor .services .btn:after {
    visibility: hidden !important;
    transition: none !important
}

/* leaving Write to us (going up): the theme gave its orange waves box position: absolute only while the section is
   shown, so at the first frame of the move it fell into the flow (1105px high) and pushed the form down - an empty
   white frame for ~0.4s. The box stays absolute all the time (the waves fade out on leaving as in the theme). */
@media screen and (min-width: 951px) {
    html.fp-enabled body:not(.fp-responsive) #write-to-us-anchor .bg-write-to-us.desc-section {
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%
    }

}

/* (7.18) the same for the tablet waves box at 769-950 px (fullpage there since 7.18): inactive it stood in the flow of the
   section cell and took 121 px from the content box - zrFit placed the form 410 px too high, it jumped into place a second
   after the section came in (820x1106). Out of the flow always; the content box never shrinks */
@media screen and (min-width: 769px) {
    html.fp-enabled body:not(.fp-responsive) #write-to-us-anchor .bg-write-to-us {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%
    }

    html.fp-enabled body:not(.fp-responsive) #fullpage > .fp-section > .fp-tableCell > .center {
        -ms-flex-negative: 0;
        flex-shrink: 0
    }
}

/* back to the first screen from another section: its texts and buttons appear after the orange shape has shrunk
   (~1s, theme blotter) - they were shown at once, dark text over the orange */
@keyframes zr-hero-back {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@media screen and (min-width: 769px) {
    html.fp-enabled body[data-zr-from]:not([data-zr-from="index"]):not(.fp-responsive).fp-viewing-index #index-anchor .services {
        animation: zr-hero-back .45s ease 1s both
    }
}

/* ---------- Stage 7.17: rotation / resize message (#zr-turn, header.twig + js/scripts.js) ----------
   The screen crossed 769px: "rotate the device back" (touch) or "the window size has changed" (desktop) and a 5 s ring
   countdown before the page reloads */
.zr-turn {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 24px;
    background: rgba(247, 247, 247, .97);
    color: #323232;
    text-align: center;
    opacity: 0;
    transition: opacity .25s ease
}

.zr-turn[hidden] {
    display: none !important
}

.zr-turn.is-on {
    opacity: 1
}

.zr-turn__box {
    box-sizing: border-box;
    width: 100%;
    max-width: 520px;
    padding: 36px 32px 32px;
    background: #fff;
    border-radius: 25px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .08)
}

.zr-turn__phone {
    display: none;
    margin: 0 auto 8px
}

.zr-turn--touch .zr-turn__phone {
    display: block;
    animation: zr-turn-rock 1.6s ease-in-out infinite
}

@keyframes zr-turn-rock {
    0%, 100% { transform: rotate(0) }
    50% { transform: rotate(-90deg) }
}

.zr-turn__ring {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 20px
}

.zr-turn--touch .zr-turn__ring {
    width: 88px;
    height: 88px
}

.zr-turn__ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg)
}

.zr-turn__track,
.zr-turn__bar {
    fill: none;
    stroke-width: 6
}

.zr-turn__track {
    stroke: #f2f2f2
}

.zr-turn__bar {
    stroke: #ff553a;
    stroke-linecap: round;
    stroke-dasharray: 339.3;
    stroke-dashoffset: 0
}

.zr-turn.is-on .zr-turn__bar {
    animation: zr-turn-ring 5s linear forwards
}

@keyframes zr-turn-ring {
    to { stroke-dashoffset: 339.3 }
}

.zr-turn__ring .zr-turn__n {
    position: absolute;
    inset: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-family: Avenir Next Demi, sans-serif;
    font-size: 44px;
    line-height: 1;
    color: #ff553a
}

.zr-turn--touch .zr-turn__ring .zr-turn__n {
    font-size: 34px
}

.zr-turn__title {
    font-family: Avenir Next Demi, sans-serif !important;
    font-size: 26px !important;
    line-height: 32px !important;
    text-transform: uppercase;
    margin: 0 0 10px !important;
    text-align: center !important;
    color: #323232
}

.zr-turn__text {
    font-size: 16px !important;
    line-height: 24px !important;
    margin: 0 0 24px !important;
    color: #555
}

.zr-turn__text .zr-turn__n {
    font-family: Avenir Next Demi, sans-serif;
    color: #ff553a
}

.zr-turn__touch {
    display: none
}

.zr-turn--touch .zr-turn__touch {
    display: inline
}

.zr-turn--touch .zr-turn__desk {
    display: none
}

.zr-turn__now {
    width: auto !important;
    min-width: 220px;
    max-width: 100% !important;
    height: 52px !important;
    line-height: 48px !important;
    font-size: 17px !important;
    padding: 0 28px !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #ff553a !important;
    cursor: pointer
}

.zr-turn__now:after {
    display: none !important
}

/* low landscape phones: everything in one compact column */
@media screen and (max-height: 480px) {
    .zr-turn__box {
        padding: 20px 24px
    }

    .zr-turn--touch .zr-turn__phone {
        width: 44px;
        height: 44px;
        margin-bottom: 4px
    }

    .zr-turn__ring,
    .zr-turn--touch .zr-turn__ring {
        width: 64px;
        height: 64px;
        margin-bottom: 10px
    }

    .zr-turn__ring .zr-turn__n,
    .zr-turn--touch .zr-turn__ring .zr-turn__n {
        font-size: 26px
    }

    .zr-turn__title {
        font-size: 20px !important;
        line-height: 26px !important
    }

    .zr-turn__text {
        margin-bottom: 14px !important
    }
}

@media (prefers-reduced-motion: reduce) {
    .zr-turn--touch .zr-turn__phone,
    .zr-turn.is-on .zr-turn__bar {
        animation: none
    }
}

/* ---------- Stage 7.18: nothing scrolls inside the frame (computers / tablets), home on phones / tablets ---------- */
/* landing slides: a long word without spaces ("возможности\желания", /ru/support/ "Services") breaks inside its card
   instead of going over the card and the frame (960x955) */
body.zr-landing #fullpage .slide p,
body.zr-landing #fullpage .slide li,
body.zr-landing #fullpage .slide h3 {
    overflow-wrap: break-word
}

/* phones: the orange "About us" got 41-47px above its title on wider phones / landscape (the theme pulls the title up by
   2vw) - the same 56px as the other sections */
@media screen and (max-width: 769px) {
    #fullpage > #about-us-anchor h2.shadow {
        margin-top: 0 !important
    }
}

/* home in fullpage on every window >= 769 px and every height (7.18) - 770-950 px windows (tablets in portrait, half-screen
   windows, DevTools at the right): the theme "tablet" layouts are used inside the fitted screens */
@media screen and (min-width: 769px) and (max-width: 950px) {
    /* Reviews: the client logos in rows (they were one long row scrolling sideways inside the frame) */
    .reviews-section .container .wrap-logo-link {
        overflow: visible !important
    }

    .reviews-section .container .logo-link {
        -ms-flex-wrap: wrap !important;
        flex-wrap: wrap !important;
        -ms-flex-pack: center;
        justify-content: center
    }

    .reviews-section .container .logo-link .link-reviews {
        min-width: 0 !important;
        width: calc(20% - 10px) !important
    }

    /* Awards / Articles: the neighbour cards peek out - cut at the frame edge (they went over the grey margin).
       Only sideways: overflow hidden would also cut the top / bottom before zrFit scales the screen down */
    #fullpage #awards-anchor > .fp-tableCell > .center,
    #fullpage #news-anchor > .fp-tableCell > .center {
        overflow-x: clip
    }
}

/* home Services on 770-950 px windows: the three cards in one row (2 + 1 did not fit: 916x643 even at 55 %, iPads in portrait -
   the third card was cut at the frame bottom) */
@media screen and (min-width: 769px) and (max-width: 950px) {
    .zr-services__grid--home {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 16px !important
    }

    /* narrow cards: smaller padding and titles (the long words "Development", "Management" went over the card edge) */
    .zr-services__grid--home .zr-services__link {
        padding: 20px 16px
    }

    .zr-services__grid--home .zr-services__name {
        font-size: 21px;
        line-height: 26px;
        overflow-wrap: break-word;
        -webkit-hyphens: auto;
        hyphens: auto
    }

    /* the service tags wrap inside the narrow cards ("Business Cards & Landing Pages" was cut at the card edge) */
    .zr-services__grid--home .zr-services__tags span {
        white-space: normal
    }
}

/* low computer windows (DevTools open at the bottom, 1920x520 ...): a smaller project picture in Our works and smaller
   client logos in Reviews, so the sections fit at a readable scale (they needed 0.47-0.51) */
@media screen and (min-width: 951px) and (max-height: 640px) {
    #our-works-anchor > .fp-tableCell > .center > .container > .tabs-text {
        -ms-flex: 0 1 480px !important;
        flex: 0 1 480px !important
    }

    /* (index-page.css loads after this file - an id selector to win over its width: 23 %) */
    #reviews-anchor .container .logo-link .link-reviews {
        width: calc(16.66% - 10px)
    }
}

/* Reviews on 770-950 px windows: eight logos in a row; the review list (it scrolls inside, with the orange bar - by design)
   takes the height that is left in the frame - it went below the frame (916x643, iPads in portrait) */
@media screen and (min-width: 769px) and (max-width: 950px) {
    #reviews-anchor .container .logo-link .link-reviews {
        width: calc(12.5% - 10px) !important
    }

    #fullpage #reviews-anchor .container .mCustomScrollBox {
        max-height: calc(100vh - 128px - 360px) !important
    }
}

/* home (fullpage on every window, 7.18): a section is exactly one screen high. fullpage lays a section out as a table, and
   a table grows with its content - zrFit scales the content down with a transform (the layout keeps the full height), so
   a tall section pushed the next ones down and fullpage stopped at a wrong place (916x643: half of the previous screen
   above the Awards). A block of the screen height + the content centred by flex instead (zrFit fits what is taller). */
html.fp-enabled body:not(.fp-responsive) #fullpage > .fp-section.fp-table {
    display: block
}

html.fp-enabled body:not(.fp-responsive) #fullpage > .fp-section > .fp-tableCell {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    height: 100%
}

/* design landing "Customer reviews" on low windows (DevTools at the bottom, 1920x520): the RU / UA review cards made the
   slide too tall even at 55 % - it scrolled inside the frame. Shorter cards: 5 lines of the review, a lower name bar */
@media screen and (min-width: 769px) and (max-height: 640px) {
    #fullpage .slide.customer-reviews .customer-reviews-reviews .item .desc + .text {
        -webkit-line-clamp: 5;
        line-clamp: 5;
        margin-bottom: 16px !important
    }

    .zr-design #fullpage .slide.customer-reviews .customer-reviews-reviews .item .title {
        min-height: 52px
    }
}

/* phones: the "Our works" title and text had no side padding (the section box has none) - "SHOWCASE OF OUR WORK" came
   7 px close to the screen edge at 412 px; the same 20 px as the other sections */
@media screen and (max-width: 769px) {
    #our-works-anchor .navigation,
    #our-works-anchor .navigation + p {
        box-sizing: border-box;
        padding-left: 20px !important;
        padding-right: 20px !important
    }
}

/* home "About us" big title: up to 950 px the theme means it static (top 0, animation none), but the later rule
   ".animation-done .shadow { animation: b }" is stronger - on tablets in portrait (fullpage since 7.18) the title stood in
   place, jumped 600 px up and slid in again. Static as intended. Wider: hidden until its slide-in starts (on tall windows
   its start place, 600 px above, was inside the frame) */
@media screen and (max-width: 950px) {
    .about-us-section.animation-done h2.shadow {
        animation: none !important;
        top: 0 !important
    }
}

@media screen and (min-width: 951px) {
    .about-us-section:not(.animation-done) h2.shadow {
        visibility: hidden
    }

    .about-us-section.animation-done h2.shadow {
        animation-fill-mode: both !important
    }
}

/* ---------- Stage 7.19: small and unusual windows - everything fits in the frame, nothing scrolls inside it ----------
   (900x500, 776x535, 800x600, netbooks, DevTools open, half / quarter screens, foldables). zrFit scales a screen down to 55 %;
   below that it fell back to a scroll inside the frame. These compact layouts keep the screens above 55 %. */

/* home, 770-950 px windows lower than 700 px (the tablet layouts of the theme in a small frame) */
@media screen and (min-width: 769px) and (max-width: 950px) and (max-height: 700px) {
    /* About: the big decorative ZR logo under the text - not on low windows */
    .about-us-section .logo-about {
        display: none !important
    }

    /* Our works: a smaller picture (picture above the text here) */
    .our-work-section .slider-creative {
        max-width: min(550px, 56vh) !important
    }

    /* Articles: a smaller card (one card with the neighbours peeking out) */
    #news-anchor .slick-slider {
        max-width: min(600px, 78vh);
        margin-left: auto !important;
        margin-right: auto !important
    }
}

/* home Services cards on small windows (770-950 px, or lower than 560 px): smaller text, tags and paddings */
@media screen and (min-width: 769px) and (max-width: 950px) and (max-height: 700px),
       screen and (min-width: 769px) and (max-height: 560px) {
    .zr-services__grid--home .zr-services__link {
        padding: 16px 14px
    }

    .zr-services__grid--home .zr-services__text {
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 12px
    }

    .zr-services__grid--home .zr-services__tags {
        margin-bottom: 10px
    }

    .zr-services__grid--home .zr-services__tags span {
        white-space: normal;
        font-size: 11px;
        line-height: 15px;
        padding: 2px 8px
    }

    .zr-home-services .zr-home-intro {
        margin-bottom: 14px !important;
        font-size: 15px !important;
        line-height: 22px !important
    }
}

@media screen and (min-width: 769px) and (max-width: 950px) and (max-height: 700px) {
    /* the stacked project pictures go 30 px below the slider box - they covered the project name */
    .our-work-section .slider-creative {
        margin-bottom: 52px !important
    }
}

/* home Reviews: the review list takes the height left in the frame, but not less than 160 px (on low windows it shrank
   to a few px - the reviews were not visible at all); a taller screen is then scaled by zrFit */
@media screen and (min-width: 769px) and (max-width: 950px) {
    #fullpage #reviews-anchor .container .mCustomScrollBox {
        max-height: max(160px, calc(100vh - 488px)) !important
    }
}

@media screen and (min-width: 951px) and (max-height: 800px) {
    #fullpage .reviews-section .container .mCustomScrollBox {
        max-height: max(160px, calc(100vh - 300px)) !important
    }
}

/* very low windows (lower than 520 px: DevTools open on a half of the screen, small screens; narrow windows up to 1100 px
   lower than 620 px): compact type and pictures on every fitted screen, so nothing has to scroll inside the frame */
@media screen and (min-width: 769px) and (max-height: 520px),
       screen and (min-width: 769px) and (max-width: 1100px) and (max-height: 620px) {
    /* landings */
    .zr-landing #fullpage .slide h2,
    .zr-landing #fullpage .slide .text-slide h2,
    body.zr-support #fullpage .slide h1, /* T-0011: the new H1 of support / design looks like the old h2 */
    body.zr-design #fullpage .slide h1 {
        font-size: 30px !important;
        margin-bottom: 10px !important
    }

    .zr-landing #fullpage .slide h3 {
        font-size: 18px !important;
        line-height: 24px !important;
        margin-bottom: 8px
    }

    .zr-landing #fullpage .slide p,
    .zr-landing #fullpage .slide .elements-text li,
    .zr-landing #fullpage .slide ul.list li {
        font-size: 14px !important;
        line-height: 21px !important
    }

    .zr-landing #fullpage .slide p + p {
        margin-top: 8px !important
    }

    .zr-landing #fullpage .slide .btn {
        height: 42px !important;
        line-height: 38px !important;
        font-size: 15px !important
    }

    #fullpage .slide.customer-reviews .customer-reviews-reviews .item .desc + .text {
        -webkit-line-clamp: 3;
        line-clamp: 3
    }

    /* home: section titles and the short texts under them */
    .zr-home-title,
    .news-section .arrow-news h2.zr-home-title,
    .reviews-section .zr-home-title,
    .our-work-section .navigation .h2.zr-home-title {
        font-size: 30px !important;
        margin-bottom: 6px !important
    }

    .zr-home-intro,
    .our-work-section .navigation + p,
    body:not(.zr-landing) #write-to-us-anchor h2 + p,
    #awards-anchor .arrow-news + p,
    #news-anchor .arrow-news + p {
        font-size: 14px !important;
        line-height: 20px !important;
        margin-bottom: 12px !important
    }

    /* About: the big background title sized by the window height */
    .about-us-section h2.shadow {
        font-size: 26vh !important;
        line-height: 26vh !important
    }

    /* Our works: a smaller project picture */
    #our-works-anchor > .fp-tableCell > .center > .container > .tabs-text {
        -ms-flex: 0 1 320px !important;
        flex: 0 1 320px !important
    }

    /* Articles: lower pictures, 3 lines of text */
    #news-anchor .slick-slider .image {
        aspect-ratio: auto;
        height: 22vh
    }

    #news-anchor .slick-slider .text-paragraph p {
        -webkit-line-clamp: 3;
        line-clamp: 3
    }

    /* Reviews: 8 logos in a row, a lower list */
    #reviews-anchor .container .logo-link .link-reviews {
        width: calc(12.5% - 10px) !important
    }

    #fullpage .reviews-section .container .mCustomScrollBox {
        max-height: 150px !important
    }

    /* forms: lower fields */
    body #write-to-us-anchor form .input input,
    body.zr-landing #fullpage .slide.write-to-us form .input input {
        height: 42px !important;
        padding-top: 14px !important
    }

    body #write-to-us-anchor form .input label:not(.text-danger),
    body.zr-landing #fullpage .slide.write-to-us form .input label:not(.text-danger) {
        top: 21px !important
    }

    body #write-to-us-anchor form .input input:focus + label:not(.text-danger),
    body.zr-landing #fullpage .slide.write-to-us form .input input:focus + label:not(.text-danger),
    body #write-to-us-anchor form .input input.focused + label:not(.text-danger),
    body.zr-landing #fullpage .slide.write-to-us form .input input.focused + label:not(.text-danger) {
        top: 4px !important
    }

    body #write-to-us-anchor form .textarea textarea,
    body.zr-landing #fullpage .slide.write-to-us form .textarea textarea {
        height: 76px !important;
        padding-top: 22px !important
    }

    body #write-to-us-anchor form .input + .input,
    body.zr-landing #fullpage .slide.write-to-us form .input + .input {
        margin-top: 8px !important
    }

    body #write-to-us-anchor form .textarea,
    body.zr-landing #fullpage .slide.write-to-us form .textarea {
        margin-top: 8px !important;
        margin-bottom: 8px !important
    }

    body #write-to-us-anchor form .btns .btn,
    body.zr-landing #fullpage .slide.write-to-us form .btns .btn {
        height: 42px !important;
        line-height: 38px !important
    }
}

/* design "Our work" on narrow desktop windows (951-1020 px: half of a FHD screen ...): the big project picture did not fit
   at the right and fell under the text (the slide became twice as tall) - not shown there; the project thumbnails (and
   "Check project") stay, in one row */
@media screen and (min-width: 951px) and (max-width: 1020px) {
    .zr-design #fullpage .slide.our-work .wrap-slider {
        display: none !important
    }

    .zr-design #fullpage .slide.our-work .projects {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        grid-gap: 10px !important;
        gap: 10px !important
    }
}

/* home, 770-950 px windows lower than 600 px: "Our works" picture at the left of the text (as on desktop), not above it */
@media screen and (min-width: 769px) and (max-width: 950px) and (max-height: 600px) {
    #our-works-anchor .container {
        -ms-flex-direction: row !important;
        flex-direction: row !important;
        -ms-flex-align: center;
        align-items: center
    }

    #our-works-anchor .container > .tabs-text {
        -ms-flex: 0 0 42% !important;
        flex: 0 0 42% !important;
        margin: 0 24px 0 0 !important
    }

    #our-works-anchor .our-work-section .slider-creative,
    #our-works-anchor .slider-creative {
        max-width: none !important;
        margin-bottom: 30px !important
    }

    #our-works-anchor .container > .info {
        -ms-flex: 1 1 auto !important;
        flex: 1 1 auto !important;
        margin: 0 !important;
        text-align: left
    }

    /* Services: the tags of the cards are not shown on such low windows */
    .zr-services__grid--home .zr-services__tags {
        display: none
    }
}

/* 770-950 px windows lower than 520 px: the landing texts one step smaller (support "Services": three narrow columns of text) */
@media screen and (min-width: 769px) and (max-width: 950px) and (max-height: 520px) {
    .zr-landing #fullpage .slide p,
    .zr-landing #fullpage .slide .elements-text li,
    .zr-landing #fullpage .slide ul.list li {
        font-size: 13px !important;
        line-height: 19px !important
    }
}

/* home Services, 770-950 px (three narrow cards): no hyphenation in the names ("графиче-ский"), the card text one step
   smaller and long words wrap ("Профессиональное" was wider than the card and cut at 770 px) */
@media screen and (min-width: 769px) and (max-width: 950px) {
    .zr-services__grid--home .zr-services__name {
        -webkit-hyphens: manual !important;
        hyphens: manual !important
    }

    .zr-services__grid--home .zr-services__text {
        font-size: 14px;
        line-height: 20px;
        overflow-wrap: break-word
    }
}

/* 770-950 px windows lower than 520 px: a little more room (the RU articles and support "Services" were on the 55 % edge) */
@media screen and (min-width: 769px) and (max-width: 950px) and (max-height: 520px) {
    .zr-landing #fullpage .slide h3 {
        font-size: 16px !important;
        line-height: 21px !important
    }

    #news-anchor .slick-slider .image {
        height: 19vh
    }
}

/* the lowest windows (420 px and lower: e.g. 1366x400 / 1280x400 with DevTools): landing type one more step smaller,
   the design project thumbnails in one row */
@media screen and (min-width: 769px) and (max-height: 420px) {
    .zr-landing #fullpage .slide h2,
    .zr-landing #fullpage .slide .text-slide h2,
    body.zr-support #fullpage .slide h1, /* T-0011: the new H1 of support / design looks like the old h2 */
    body.zr-design #fullpage .slide h1 {
        font-size: 26px !important;
        margin-bottom: 6px !important
    }

    .zr-landing #fullpage .slide h3 {
        font-size: 16px !important;
        line-height: 21px !important
    }

    .zr-landing #fullpage .slide p,
    .zr-landing #fullpage .slide .elements-text li,
    .zr-landing #fullpage .slide ul.list li {
        font-size: 13px !important;
        line-height: 19px !important
    }

    .zr-landing #fullpage .slide .btn {
        height: 38px !important;
        line-height: 34px !important;
        font-size: 14px !important
    }

    .zr-design #fullpage .slide.our-work .projects {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        grid-gap: 10px !important;
        gap: 10px !important
    }
}

/* support "Services" (three cards) on low windows: the card name bars were at least 96 px high */
@media screen and (min-width: 769px) and (max-height: 520px) {
    .zr-support #fullpage .slide.our-team .our-team-slider .item .title {
        min-height: 56px;
        padding: 10px
    }

    .zr-support #fullpage .slide.our-team .our-team-slider .item .text {
        padding: 10px
    }
}

/* support "Services" on 770-950 px windows lower than 600 px: the three cards in a row (stacked they made the slide
   1.8 x the frame) */
@media screen and (min-width: 769px) and (max-width: 950px) and (max-height: 600px) {
    .zr-support #fullpage .slide.our-team .our-team-slider {
        -ms-flex-direction: row !important;
        flex-direction: row !important;
        -ms-flex-wrap: nowrap !important;
        flex-wrap: nowrap !important;
        margin-left: -8px !important;
        margin-right: -8px !important
    }

    .zr-support #fullpage .slide.our-team .our-team-slider .item {
        -ms-flex: 1 1 0px !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
        margin: 0 8px 8px !important
    }
}

/* development "Our development process" on low windows: the 80 px gap above the stages (theme padding + margin, >= 952 px)
   was wasted height - the slide is scaled less; on 769-951 px (stages two in a row, three rows) lower gaps between the rows */
@media screen and (min-width: 769px) and (max-height: 520px),
       screen and (min-width: 769px) and (max-width: 1100px) and (max-height: 620px) {
    .zr-development #fullpage .slide.how-we-do .list {
        padding-top: 4px !important
    }
}

@media screen and (min-width: 952px) and (max-height: 520px),
       screen and (min-width: 952px) and (max-width: 1100px) and (max-height: 620px) {
    .zr-development #fullpage .slide.how-we-do .list > * {
        margin-top: 16px !important
    }
}

@media screen and (min-width: 769px) and (max-width: 951px) and (max-height: 620px) {
    .zr-development #fullpage .slide.how-we-do .list > * {
        padding-top: 12px !important
    }
}

/* home Articles, 770-950 px windows (fullpage since 7.18): no 100 px gap above the cards (the theme's margin for its old
   scroll layout) - the cards follow the intro as on desktop and phones */
@media screen and (min-width: 769px) and (max-width: 950px) {
    #fullpage #news-anchor .slick-slider {
        margin-top: 8px !important
    }
}

/* home Our works, 770-950 px: the prev / next buttons beside Check Project are as high as the button (41 vs 52 px, top-aligned -
   their middles were 6 px apart), the same 52 x 52 as on desktop */
@media screen and (min-width: 769px) and (max-width: 950px) {
    #our-works-anchor .info .creative-arrow {
        width: 52px !important;
        min-width: 52px;
        max-width: 52px !important;
        height: 52px !important;
        padding: 0 !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: center;
        justify-content: center
    }

    #our-works-anchor .info .creative-arrow svg {
        width: 13px;
        height: auto
    }
}

/* home Our works, 770-950 px windows higher than 600 px (the picture above the text, as on phones): the project description
   centered like its title and as on phones (it was left-aligned under the centered title) */
@media screen and (min-width: 769px) and (max-width: 950px) and (min-height: 601px) {
    #our-works-anchor .info .creative-slide-text,
    #our-works-anchor .info .creative-slide-text p {
        text-align: center
    }
}

/* zrFit, 7.19: a screen that would be scaled below 62 % (tiny windows, DevTools open, longer texts later) first gets a step
   smaller type and gaps - js/scripts.js adds .zr-fit-tight to the fitted box and measures it again. The screen is scaled
   less (the text is bigger on the screen) and the fallback scroll inside the frame practically never comes.
   Selectors are one class stronger than the landing / home / services rules above. */
.zr-landing #fullpage .slide .zr-fit-tight h1,
.zr-landing #fullpage .slide .zr-fit-tight h2,
.zr-landing #fullpage .slide .zr-fit-tight .text-slide h2,
body #fullpage .fp-section .zr-fit-tight h2:not(.shadow),
body #fullpage .fp-section .zr-fit-tight .h2,
body .zr-frame-scroll > .zr-services__inner.zr-fit-tight .zr-services__title {
    font-size: 26px !important;
    line-height: 32px !important;
    margin-bottom: 6px !important
}

body #fullpage .fp-section .zr-fit-tight .h2.anim-title {
    font-size: 30px !important;
    line-height: 36px !important
}

.zr-landing #fullpage .slide .zr-fit-tight h3,
body #fullpage .fp-section .zr-fit-tight h3,
body #fullpage .fp-section .zr-fit-tight .zr-services__name,
body .zr-frame-scroll > .zr-services__inner.zr-fit-tight .zr-services__name {
    font-size: 16px !important;
    line-height: 21px !important;
    margin-bottom: 6px !important
}

.zr-landing #fullpage .slide .zr-fit-tight p,
.zr-landing #fullpage .slide .zr-fit-tight .elements-text li,
.zr-landing #fullpage .slide .zr-fit-tight ul.list li,
body #fullpage .fp-section .zr-fit-tight p,
body #fullpage .fp-section .zr-fit-tight .zr-services__text,
body .zr-frame-scroll > .zr-services__inner.zr-fit-tight p,
body .zr-frame-scroll > .zr-services__inner.zr-fit-tight .zr-services__intro,
body .zr-frame-scroll > .zr-services__inner.zr-fit-tight .zr-services__text {
    font-size: 13px !important;
    line-height: 19px !important
}

.zr-landing #fullpage .slide .zr-fit-tight p + p,
body #fullpage .fp-section .zr-fit-tight p + p {
    margin-top: 6px !important
}

.zr-landing #fullpage .slide .zr-fit-tight .btn:not(.slick-arrow):not(.slick-prev):not(.slick-next),
body #fullpage .fp-section .zr-fit-tight .btn:not(.slick-arrow):not(.slick-prev):not(.slick-next):not(.creative-arrow),
body .zr-frame-scroll > .zr-services__inner.zr-fit-tight .btn {
    height: 38px !important;
    line-height: 34px !important;
    font-size: 14px !important
}

/* the tags of the service cards (6-7 px on the screen at such a scale) are not shown */
body #fullpage .fp-section .zr-fit-tight .zr-services__tags,
body .zr-frame-scroll > .zr-services__inner.zr-fit-tight .zr-services__tags {
    display: none !important
}

/* support "Our team": lower card heads */
.zr-landing #fullpage .slide .zr-fit-tight .our-team-slider .item .title {
    min-height: 0 !important;
    padding: 8px !important
}

/* home Articles: lower pictures */
body #fullpage #news-anchor .zr-fit-tight .slick-slider .image {
    aspect-ratio: auto !important;
    height: 18vh !important
}

/* zrFit measures the normal type of a tight screen without transitions (links change their size with a transition) */
.zr-fit-measure,
.zr-fit-measure * {
    transition: none !important
}

/* home Services on 951-1100 px windows lower than 800 px (1024x768: iPad in landscape, small laptops): the three narrow cards
   are tall - a little less air, so the section is not scaled (at 0.965 its cards stood 14 px inside the side edges of the
   other sections, 7.14: the same edges as Reviews / Articles) */
@media screen and (min-width: 951px) and (max-width: 1100px) and (max-height: 800px) {
    .zr-home-services .zr-home-intro {
        margin-bottom: 20px !important
    }

    .zr-services__grid--home .zr-services__link {
        padding-top: 22px;
        padding-bottom: 22px
    }
}

/* ---------- Stage 7.20: quick UI/UX test (user's screenshots) ---------- */
/* /our-works/ and /articles/ cards: no empty space at the bottom of the card (empty paragraphs of the descriptions + 14 px for
   the card link, which is the whole card and takes no height) - the text ends 22 px above the card bottom, as at the top */
.zr-list-page .all-project .container .items .item .description {
    padding: 20px 20px 22px !important
}

.zr-list-page .all-project .container .items .item .text {
    margin-bottom: 0
}

.zr-list-page .all-project .container .items .item .text p:empty {
    display: none !important
}

.zr-list-page .all-project .container .items .item .text p {
    margin: 0 !important
}

.zr-list-page .all-project .container .items .item .text p:not(:empty) ~ p:not(:empty) {
    margin-top: 6px !important
}

/* the SEO text under the list: one column (in two the sentence went on at the top of the right column), lines not longer
   than ~110 characters */
.zr-list-page .all-project .container > div[style],
.zr-services .zr-services__inner > div[style] {
    -webkit-columns: auto !important;
    columns: auto !important
}

.zr-list-page .all-project .container > div[style] p,

.zr-services .zr-services__inner > div[style] p {
    max-width: none !important /* 7.22: the full width of the card (a narrow column left an empty right half) */
}

/* home Services = the /services/ page (user, 7.20): the same grid - 1128 px in the middle - and the same cards with the
   tags, so the services added later go on in rows the same way (7.14 had widened it to the side edges of the other sections) */
@media screen and (min-width: 951px) {
    #fullpage #services-anchor > .fp-tableCell > .center,
    #fullpage #services-anchor > .center {
        padding-left: 0 !important;
        padding-right: 0 !important
    }

    #services-anchor .zr-home-inner {
        max-width: 1240px;
        padding: 0 56px
    }
}

/* ...with the side paddings of the /services/ page on low and small windows too (48 px lower than 800 px, 32 px on 951-1100 px
   lower than 900 px and on windows lower than 620 px) */
@media screen and (min-width: 951px) and (max-height: 800px) {
    #services-anchor .zr-home-inner {
        padding: 0 48px
    }
}

@media screen and (min-width: 951px) and (max-width: 1100px) and (max-height: 900px),
       screen and (min-width: 951px) and (max-height: 620px) {
    #services-anchor .zr-home-inner {
        padding: 0 32px
    }
}

/* landings "Write to Us": the form 620 px wide on every landing (support had no id on the slide - the form was 830 px) */
@media screen and (min-width: 951px) {
    .zr-landing #fullpage .slide.write-to-us form.contact-form {
        max-width: 620px
    }
}

/* design "Our work" (user, 7.20 -> 7.23): the big picture of the project whole - the landscape picture of the project (816 x 416,
   the laptop with the site; it was a narrow middle of it stretched to 488 x 952 and shown as a square - the laptop was cut),
   in the middle of the slide height. [<] Check Project [>] under the thumbnails (7.20 put them under the picture - user 7.23:
   under the projects) */
@media screen and (min-width: 1021px) {
    /* one row: [room of the big decorative R] [text, thumbnails, buttons] [picture] */
    .zr-design #fullpage .slide.our-work .elements-text {
        --zr-view: min(33vw, 640px, calc((100vh - 280px) * 816 / 416));
        -ms-flex-wrap: nowrap !important;
        flex-wrap: nowrap !important
    }

    /* the room of the R: the text starts ~48 px right of it (the R ends at ~18.5vw of the slide) */
    .zr-design #fullpage .slide.our-work .logo-left {
        -ms-flex: 0 0 max(0px, calc(12.5vw - 48px)) !important;
        flex: 0 0 max(0px, calc(12.5vw - 48px)) !important;
        max-width: none !important;
        min-width: 0 !important
    }

    .zr-design #fullpage .slide.our-work .elements-text > .item {
        -ms-flex: 1 1 auto !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin-right: 48px !important
    }

    /* the thumbnails: 6 in a row on wide windows, 3 + 3 on narrower ones (auto-fit gave 4 + 2) */
    .zr-design #fullpage .slide.our-work .projects {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 12px !important;
        grid-gap: 12px !important;
        max-width: 460px
    }

    .zr-design #fullpage .slide.our-work .wrap-slider {
        -ms-flex: 0 0 var(--zr-view) !important;
        flex: 0 0 var(--zr-view) !important;
        width: var(--zr-view) !important;
        height: calc(var(--zr-view) * 416 / 816) !important;
        -ms-flex-item-align: center;
        align-self: center;
        margin: 0 !important
    }

    .zr-design #fullpage .slide.our-work .wrap-slider .slide-item {
        background-size: cover !important;
        background-position: 50% 50% !important
    }

    .zr-design #fullpage .slide.our-work .wrap-slider .slide-item h2 {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
        clip: rect(0 0 0 0);
        white-space: nowrap
    }

    .zr-design #fullpage .slide.our-work .btns > .btn {
        white-space: nowrap
    }
}

@media screen and (min-width: 1500px) {
    .zr-design #fullpage .slide.our-work .projects {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        max-width: none
    }
}

/* design "Customer reviews" (user, 7.20): the picture of the client a square too, in the middle of the slide height */
@media screen and (min-width: 951px) {
    .zr-design #fullpage .slide.customer-reviews .container > .text-slide {
        -ms-flex-item-align: center;
        align-self: center
    }

    .zr-design #fullpage .slide.customer-reviews .wrap-slider {
        --zr-view: min(25vw, 520px, calc(100vh - 220px));
        width: var(--zr-view) !important;
        max-width: none !important;
        height: var(--zr-view) !important
    }

    .zr-design #fullpage .slide.customer-reviews .wrap-slider .slide-item {
        background-size: cover !important;
        background-position: 50% 50% !important
    }
}

/* design "Customer reviews": the cards in the style of the site cards - the name and the short description on the left (were
   in the middle), rounded corners; the shown review keeps the orange head */
.zr-design #fullpage .slide.customer-reviews .customer-reviews-reviews .item {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08)
}

.zr-design #fullpage .slide.customer-reviews .customer-reviews-reviews .item .title {
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    min-height: 0 !important;
    padding: 18px 24px !important;
    font-size: 20px !important;
    line-height: 26px !important
}

.zr-design #fullpage .slide.customer-reviews .customer-reviews-reviews .item .desc {
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    padding: 0 24px !important;
    margin-top: 16px !important
}

/* side paddings only: the text is cut at 8 whole lines (overflow hidden) - a bottom padding would show the 9th line */
.zr-design #fullpage .slide.customer-reviews .customer-reviews-reviews .item .text {
    padding: 0 24px !important;
    text-align: left !important
}

/* [<] dots [>] under the review cards (the arrows: js/scripts.js) */
.zr-reviews-nav {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 20px;
    margin-top: 16px
}

.zr-reviews-nav .slick-dots {
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important
}

.zr-reviews-nav > .btn {
    -ms-flex: 0 0 52px;
    flex: 0 0 52px;
    width: 52px !important;
    min-width: 52px;
    max-width: 52px !important;
    height: 52px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 12px !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center
}

.zr-reviews-nav > .btn svg {
    width: 13px;
    height: auto
}

@media screen and (max-width: 769px) {
    .zr-reviews-nav > .btn {
        -ms-flex-preferred-size: 44px;
        flex-basis: 44px;
        width: 44px !important;
        min-width: 44px;
        height: 44px !important
    }
}

/* design "Customer reviews": the short description 14 px on every screen (16/18 px on tablets and phones), the review text on
   770-950 px was 8 px (the theme's 1vw) - 14 px */
.zr-design #fullpage .slide.customer-reviews .customer-reviews-reviews .item .desc {
    font-size: 14px !important;
    line-height: 20px !important
}

@media screen and (min-width: 769px) and (max-width: 950px) {
    .zr-design #fullpage .slide.customer-reviews .customer-reviews-reviews .item .text p {
        font-size: 14px !important;
        line-height: 21px !important
    }
}

/* ...and the cards of the same height on 770-950 px too (as on desktop): the shorter cards left a hole above the arrows */
@media screen and (min-width: 769px) and (max-width: 950px) {
    .zr-design #fullpage .slide.customer-reviews .customer-reviews-reviews .slick-track {
        display: -ms-flexbox !important;
        display: flex !important
    }

    .zr-design #fullpage .slide.customer-reviews .customer-reviews-reviews .slick-slide {
        height: auto !important
    }
}

/* /services/ on 951-1100 px windows: three cards in a row as on the home page (2 + 1 with the tags made the page tall - at
   960x955 it was scaled to 0.64) */
@media screen and (min-width: 951px) and (max-width: 1100px) {
    .zr-frame-scroll .zr-services__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 16px
    }
}

/* home services cards on windows lower than 620 px: no tags - with them the cards were scaled to 0.64 on the
   tiny windows of the user (900x500, 776x535: 0.85-0.89 without them); /services/ scrolls since T-0011 - keeps them */
@media screen and (min-width: 769px) and (max-height: 620px) {
    .zr-services__grid--home .zr-services__tags {
        display: none !important
    }
}

/* ---------- Stage 7.21: support landing "Types of support", "Advantages", "Services" (user) ----------
   Computer: the title in the middle, the tabs in one row under it as the buttons of the site (12 px frame, the second
   frame shifts on hover, the shown tab orange), under them the picture and the text of the tab. Tablet (770-950 px):
   every section open as a card, two in a row. Phone: every section open, one under another - nothing to tap.
   Services: a short text under the title, the cards like the home / services page (dark, the middle one orange). */

/* the tab buttons (computer) */
body.zr-support #fullpage .slide.advantages .list-link,
body.zr-support #fullpage .slide.how-it-works .list-link {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 16px;
    max-width: none !important;
    margin: 0 0 44px !important;
    padding: 0 !important;
    list-style: none;
    font-size: 17px !important;
    line-height: 1 !important
}

body.zr-support #fullpage .slide.advantages .list-link > li,
body.zr-support #fullpage .slide.how-it-works .list-link > * {
    -ms-flex: 0 0 auto !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    list-style: none
}

body.zr-support #fullpage .slide.advantages .list-link .item,
body.zr-support #fullpage .slide.how-it-works .list-link .item {
    position: relative;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
    -ms-flex-align: center;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    height: 56px;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 24px 0 18px !important;
    border: 2px solid #323232;
    border-radius: 12px;
    background: #fff;
    color: #323232;
    font-family: Avenir Next Demi, sans-serif;
    font-size: 17px;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: color .2s linear, border-color .2s linear, background-color .2s linear
}

/* the second frame of the site buttons: shifts on hover */
body.zr-support #fullpage .slide.advantages .list-link .item::after,
body.zr-support #fullpage .slide.how-it-works .list-link .item::after {
    content: "";
    position: absolute;
    top: -2px;
    right: -2px;
    bottom: -2px;
    left: -2px;
    box-sizing: border-box;
    border: 2px solid #323232;
    border-radius: 12px;
    pointer-events: none;
    transition: transform .2s linear, border-color .2s linear
}

body.zr-support #fullpage .slide.advantages .list-link .item:hover::after,
body.zr-support #fullpage .slide.how-it-works .list-link .item:hover::after {
    transform: translate(7px, 7px)
}

body.zr-support #fullpage .slide.advantages .list-link .item.active,
body.zr-support #fullpage .slide.how-it-works .list-link .item.active {
    border-color: #ff553a;
    background: #fff4f1;
    color: #ff553a
}

body.zr-support #fullpage .slide.advantages .list-link .item.active::after,
body.zr-support #fullpage .slide.how-it-works .list-link .item.active::after {
    border-color: #ff553a
}

body.zr-support #fullpage .slide.advantages .list-link .item:focus-visible,
body.zr-support #fullpage .slide.how-it-works .list-link .item:focus-visible {
    outline: 3px solid #ff553a;
    outline-offset: 4px
}

/* the icon in the button (was placed absolute at the left, sized in vw) */
body.zr-support #fullpage .slide.advantages .list-link .item > .list-icon,
body.zr-support #fullpage .slide.how-it-works .list-link .item > .list-icon {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
    -webkit-transform: none !important;
    transform: none !important;
    -ms-flex: 0 0 28px;
    flex: 0 0 28px;
    width: 28px !important;
    height: 28px !important
}

body.zr-support #fullpage .slide.advantages .list-link .item > .list-icon::before,
body.zr-support #fullpage .slide.advantages .list-link .item > .list-icon::after,
body.zr-support #fullpage .slide.how-it-works .list-link .item > .list-icon::before,
body.zr-support #fullpage .slide.how-it-works .list-link .item > .list-icon::after {
    width: 28px !important;
    height: 28px !important
}

/* the titles of the sections with their orange icons (Advantages got the titles in 7.21 - for the open sections) */
body.zr-support #fullpage .slide.advantages .tabs-section .title,
body.zr-support #fullpage .slide.how-it-works .tabs-esction .title {
    position: relative;
    margin: 0 0 14px !important;
    padding-left: 44px !important;
    color: #ff553a;
    font-family: Avenir Next Demi, sans-serif;
    font-size: 26px !important;
    line-height: 32px !important;
    text-align: left
}

body.zr-support #fullpage .slide.advantages .tabs-section .title::after,
body.zr-support #fullpage .slide.how-it-works .tabs-esction .title::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: auto;
    bottom: auto;
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: contain
}

body.zr-support #fullpage .slide.how-it-works .tabs-esction .how-it-works-1 .title::after {
    background-image: url(../image/store-page/icons/consultation-red.svg)
}

body.zr-support #fullpage .slide.how-it-works .tabs-esction .how-it-works-2 .title::after {
    background-image: url(../image/store-page/icons/technical-support-red.svg)
}

body.zr-support #fullpage .slide.how-it-works .tabs-esction .how-it-works-3 .title::after {
    background-image: url(../image/icons/price-red.svg)
}

body.zr-support #fullpage .slide.how-it-works .tabs-esction .how-it-works-4 .title::after {
    background-image: url(../image/store-page/icons/content-red.svg)
}

/* computer: title / tabs / picture + text */
@media screen and (min-width: 951px), screen and (min-width: 769px) and (max-width: 950px) {
    body.zr-support #fullpage .slide.advantages > .fp-tableCell > .container,
    body.zr-support #fullpage .slide.how-it-works > .fp-tableCell > .container {
        /* flex rows, not a grid: in a grid of a fixed height the row of the text was sized smaller than the text on low
           windows - the text went over the tab buttons */
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-direction: row !important;
        flex-direction: row !important;
        -ms-flex-wrap: wrap !important;
        flex-wrap: wrap !important;
        -ms-flex-pack: center;
        justify-content: center !important;
        -ms-flex-line-pack: center;
        align-content: center !important;
        -ms-flex-align: center;
        align-items: center !important;
        column-gap: 64px;
        /* no side margins (the theme's -2vw gutters made the container wider than the frame - the text reached the frame
           edge); the top / bottom margins of the theme stay: they place the container at the frame (with 0 zrFit moved it) */
        margin-left: 0 !important;
        margin-right: 0 !important
    }

    body.zr-support #fullpage .slide.advantages .text-link > h2,
    body.zr-support #fullpage .slide.how-it-works > .fp-tableCell > .container > .text-section > h2,
    body.zr-support #fullpage .slide.how-it-works > .fp-tableCell > .container > .text-section > h3,
    body.zr-support #fullpage .slide.advantages .list-link,
    body.zr-support #fullpage .slide.how-it-works .list-link {
        -ms-flex: 0 0 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important
    }

    body.zr-support #fullpage .slide.advantages .text-link .anim-image,
    body.zr-support #fullpage .slide.advantages .tabs-section,
    body.zr-support #fullpage .slide.how-it-works .tabs-esction,
    body.zr-support #fullpage .slide.how-it-works .wrap-image {
        /* basis 0: the picture and the text always share one line (a 620 px basis wrapped them on narrower windows) */
        -ms-flex: 1 1 0px !important;
        flex: 1 1 0 !important;
        max-width: 620px !important;
        min-width: 0 !important
    }

    body.zr-support #fullpage .slide.advantages > .fp-tableCell > .container > *,
    body.zr-support #fullpage .slide.how-it-works > .fp-tableCell > .container > * {
        margin: 0 !important
    }

    body.zr-support #fullpage .slide.advantages .text-link,
    body.zr-support #fullpage .slide.how-it-works > .fp-tableCell > .container > .text-section,
    body.zr-support #fullpage .slide.how-it-works .wrap-tabs {
        display: contents !important
    }

    body.zr-support #fullpage .slide.advantages .text-link > h2,
    body.zr-support #fullpage .slide.how-it-works > .fp-tableCell > .container > .text-section > h2 {
        grid-column: 1 / -1;
        text-align: center !important;
        margin: 0 0 28px !important
    }

    body.zr-support #fullpage .slide.how-it-works > .fp-tableCell > .container > .text-section > h2 {
        margin-bottom: 10px !important
    }

    body.zr-support #fullpage .slide.how-it-works > .fp-tableCell > .container > .text-section > h3 {
        grid-column: 1 / -1;
        text-align: center !important;
        margin: 0 0 28px !important
    }

    body.zr-support #fullpage .slide.advantages .list-link,
    body.zr-support #fullpage .slide.how-it-works .list-link {
        grid-column: 1 / -1
    }

    /* Types of support: the animated picture at the left, the text at the right */
    body.zr-support #fullpage .slide.advantages .text-link .anim-image {
        grid-column: 1;
        -ms-grid-column-align: center;
        justify-self: center;
        position: relative !important;
        width: 100% !important;
        max-width: 560px !important;
        min-width: 0 !important;
        height: auto !important;
        max-height: calc(100vh - 400px);
        margin: 0 !important;
        overflow: hidden
    }

    body.zr-support #fullpage .slide.advantages .text-link .anim-image svg {
        display: block;
        width: 100% !important;
        height: auto !important;
        max-height: calc(100vh - 400px)
    }

    body.zr-support #fullpage .slide.advantages .tabs-section {
        grid-column: 2;
        padding: 0 !important
    }

    /* Advantages: the text at the left, the picture of the tab at the right */
    body.zr-support #fullpage .slide.how-it-works .tabs-esction {
        grid-column: 1;
        width: auto !important
    }

    body.zr-support #fullpage .slide.how-it-works .wrap-image {
        grid-column: 2;
        -ms-grid-column-align: center;
        justify-self: center;
        position: relative !important;
        top: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        height: calc(100vh - 430px) !important;
        max-height: 520px;
        opacity: 1 !important;
        -webkit-transform: none !important;
        transform: none !important
    }

    body.zr-support #fullpage .slide.how-it-works .wrap-image .tabs-sesction,
    body.zr-support #fullpage .slide.how-it-works .wrap-image .tab-anchor {
        height: 100%
    }

    body.zr-support #fullpage .slide.how-it-works .wrap-image .tab-anchor img {
        position: static !important;
        top: auto !important;
        display: block;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        object-fit: contain
    }
}

/* tablet (770-950 px): every section open, two cards in a row; no tabs, no pictures */
@media not all { /* 7.25: tablets in portrait use the tabs too (the open 2 x 2 cards were scaled to 11 px text - iPad 810 x 1080) */
    body.zr-support #fullpage .slide.advantages > .fp-tableCell > .container,
    body.zr-support #fullpage .slide.how-it-works > .fp-tableCell > .container {
        display: block !important
    }

    body.zr-support #fullpage .slide.advantages .text-link,
    body.zr-support #fullpage .slide.advantages .tabs-section,
    body.zr-support #fullpage .slide.how-it-works > .fp-tableCell > .container > .text-section {
        margin: 0 !important;
        padding: 0 !important
    }

    body.zr-support #fullpage .slide.advantages .text-link > h2,
    body.zr-support #fullpage .slide.how-it-works > .fp-tableCell > .container > .text-section > h2,
    body.zr-support #fullpage .slide.how-it-works > .fp-tableCell > .container > .text-section > h3 {
        text-align: center !important
    }

    body.zr-support #fullpage .slide.advantages .list-link,
    body.zr-support #fullpage .slide.how-it-works .list-link,
    body.zr-support #fullpage .slide.advantages .text-link .anim-image,
    body.zr-support #fullpage .slide.how-it-works .wrap-image {
        display: none !important
    }

    body.zr-support #fullpage .slide.advantages .tabs-section,
    body.zr-support #fullpage .slide.how-it-works .tabs-esction {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        margin-top: 24px !important
    }

    body.zr-support #fullpage .slide.how-it-works .wrap-tabs {
        display: block !important;
        margin: 0 !important
    }

    body.zr-support #fullpage .slide.advantages .tabs-section .tab-anchor,
    body.zr-support #fullpage .slide.how-it-works .tabs-esction .tab-anchor {
        display: block !important;
        opacity: 1 !important;
        -webkit-animation: none !important;
        animation: none !important;
        margin: 0 !important;
        padding: 20px 20px 22px;
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 6px 18px rgba(0, 0, 0, .08)
    }

    body.zr-support #fullpage .slide.advantages .tabs-section .title,
    body.zr-support #fullpage .slide.how-it-works .tabs-esction .title {
        font-size: 20px !important;
        line-height: 26px !important;
        padding-left: 38px !important;
        margin-bottom: 10px !important
    }

    body.zr-support #fullpage .slide.advantages .tabs-section .title::after,
    body.zr-support #fullpage .slide.how-it-works .tabs-esction .title::after {
        width: 28px !important;
        height: 28px !important
    }

    body.zr-support #fullpage .slide.advantages .tabs-section p,
    body.zr-support #fullpage .slide.how-it-works .tabs-esction p {
        font-size: 14px !important;
        line-height: 21px !important
    }
}

/* phone: every section open one under another (the tabs are not needed) */
@media screen and (max-width: 768px) {
    body.zr-support #fullpage .slide.advantages .list-link,
    body.zr-support #fullpage .slide.how-it-works .list-link {
        display: none !important
    }

    body.zr-support #fullpage .slide.advantages .tabs-section .tab-anchor,
    body.zr-support #fullpage .slide.how-it-works .tabs-esction .tab-anchor {
        display: block !important;
        opacity: 1 !important;
        -webkit-animation: none !important;
        animation: none !important;
        margin: 0 !important
    }

    body.zr-support #fullpage .slide.advantages .tabs-section .tab-anchor + .tab-anchor,
    body.zr-support #fullpage .slide.how-it-works .tabs-esction .tab-anchor + .tab-anchor {
        margin-top: 28px !important
    }

    body.zr-support #fullpage .slide.advantages .tabs-section,
    body.zr-support #fullpage .slide.how-it-works .tabs-esction {
        margin-top: 24px !important
    }

    body.zr-support #fullpage .slide.advantages .tabs-section .title,
    body.zr-support #fullpage .slide.how-it-works .tabs-esction .title {
        font-size: 20px !important;
        line-height: 26px !important;
        padding-left: 38px !important;
        margin-bottom: 10px !important
    }

    body.zr-support #fullpage .slide.advantages .tabs-section .title::after,
    body.zr-support #fullpage .slide.how-it-works .tabs-esction .title::after {
        width: 28px !important;
        height: 28px !important
    }
}

/* Services: title in the middle, a short text, the cards of the site */
body.zr-support #fullpage .slide.our-team .wrap-slider > h2 {
    text-align: center !important
}

body.zr-support #fullpage .slide.our-team .zr-slide-intro {
    max-width: 760px;
    margin: 0 auto 36px !important;
    text-align: center;
    font-size: 17px !important;
    line-height: 26px !important
}

body.zr-support #fullpage .slide.our-team .our-team-slider {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin: 0 !important;
    padding: 0 !important
}

body.zr-support #fullpage .slide.our-team .our-team-slider .item {
    position: relative;
    margin: 0 !important;
    padding: 32px !important;
    border-radius: 16px;
    background: #323232;
    color: #fff;
    box-shadow: none;
    overflow: hidden;
    min-width: 0 !important
}

body.zr-support #fullpage .slide.our-team .our-team-slider .item:nth-child(3n+2) {
    background: linear-gradient(119.36deg, #ff5228 0%, #ff4007 100%)
}

body.zr-support #fullpage .slide.our-team .our-team-slider .item .title {
    display: block !important;
    min-height: 0 !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    background: none !important;
    color: #fff !important;
    font-family: Avenir Next Demi, sans-serif;
    font-size: 26px !important;
    line-height: 32px !important;
    text-align: left !important
}

body.zr-support #fullpage .slide.our-team .our-team-slider .item .title::after {
    display: none !important
}

body.zr-support #fullpage .slide.our-team .our-team-slider .item .text {
    padding: 0 !important;
    max-height: none !important;
    overflow: visible !important
}

body.zr-support #fullpage .slide.our-team .our-team-slider .item .text p {
    color: #fff !important;
    opacity: .85;
    font-size: 16px !important;
    line-height: 24px !important;
    text-align: left !important
}

@media screen and (min-width: 769px) {
    body.zr-support #fullpage .slide.our-team > .fp-tableCell > .container > .text-slide {
        display: none !important
    }

    body.zr-support #fullpage .slide.our-team .wrap-slider {
        -ms-flex: 0 1 1240px !important;
        flex: 0 1 1240px !important;
        max-width: 1240px;
        margin: 0 auto !important
    }

    body.zr-support #fullpage .slide.our-team > .fp-tableCell > .container {
        -ms-flex-pack: center !important;
        justify-content: center !important
    }
}

@media screen and (min-width: 769px) and (max-width: 950px) {
    body.zr-support #fullpage .slide.our-team .our-team-slider {
        gap: 12px
    }

    body.zr-support #fullpage .slide.our-team .our-team-slider .item {
        padding: 20px 16px !important
    }

    body.zr-support #fullpage .slide.our-team .our-team-slider .item .title {
        font-size: 20px !important;
        line-height: 25px !important
    }

    body.zr-support #fullpage .slide.our-team .our-team-slider .item .text p {
        font-size: 14px !important;
        line-height: 21px !important
    }
}

@media screen and (max-width: 768px) {
    body.zr-support #fullpage .slide.our-team .our-team-slider {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px
    }

    body.zr-support #fullpage .slide.our-team .our-team-slider .item {
        padding: 24px !important
    }

    body.zr-support #fullpage .slide.our-team .our-team-slider .item .title {
        font-size: 22px !important;
        line-height: 28px !important
    }

    body.zr-support #fullpage .slide.our-team .zr-slide-intro {
        font-size: 16px !important;
        line-height: 24px !important;
        margin-bottom: 24px !important
    }
}

@media screen and (min-width: 951px), screen and (min-width: 769px) and (max-width: 950px) {
    /* the text of the tab in the middle of the picture height */
    body.zr-support #fullpage .slide.advantages .tabs-section,
    body.zr-support #fullpage .slide.how-it-works .tabs-esction {
        -ms-flex-item-align: center;
        align-self: center
    }

    body.zr-support #fullpage .slide.advantages .list-link,
    body.zr-support #fullpage .slide.how-it-works .list-link {
        margin-bottom: 36px !important
    }

    /* Advantages: the vertical SOCIAL label was white (it stood on the dark full-height picture) - on white now */
    body.zr-support.fp-viewing-slide-how-it-works .share .btn-social {
        color: #323232 !important
    }

    body.zr-support.fp-viewing-slide-how-it-works .share .btn-social:before {
        -webkit-filter: none !important;
        filter: none !important
    }
}

/* the tab buttons: always one row - on narrow windows / long labels (RU, UA) the buttons shrink and the label goes to
   two lines inside the button; the theme's ::before / ::after of .list-link .item (2vw squares) are not used here */
body.zr-support #fullpage .slide.advantages .list-link,
body.zr-support #fullpage .slide.how-it-works .list-link {
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important
}

body.zr-support #fullpage .slide.advantages .list-link > li,
body.zr-support #fullpage .slide.how-it-works .list-link > * {
    -ms-flex: 0 1 auto !important;
    flex: 0 1 auto !important;
    min-width: 0 !important
}

body.zr-support #fullpage .slide.advantages .list-link > li > .item {
    width: 100%
}

body.zr-support #fullpage .slide.advantages .list-link .item,
body.zr-support #fullpage .slide.how-it-works .list-link .item {
    height: auto;
    min-height: 56px;
    padding: 8px 24px 8px 18px !important;
    white-space: normal;
    line-height: 1.2;
    text-align: left
}

body.zr-support #fullpage .slide.advantages .list-link .item::before,
body.zr-support #fullpage .slide.how-it-works .list-link .item::before {
    content: none !important;
    display: none !important
}

body.zr-support #fullpage .slide.advantages .list-link .item::after,
body.zr-support #fullpage .slide.how-it-works .list-link .item::after {
    width: auto !important;
    height: auto !important
}

@media screen and (min-width: 951px) and (max-width: 1279px), screen and (min-width: 769px) and (max-width: 950px) {
    body.zr-support #fullpage .slide.advantages .list-link,
    body.zr-support #fullpage .slide.how-it-works .list-link {
        gap: 10px
    }

    body.zr-support #fullpage .slide.advantages .list-link .item,
    body.zr-support #fullpage .slide.how-it-works .list-link .item {
        gap: 8px;
        min-height: 52px;
        padding: 6px 14px 6px 12px !important;
        font-size: 15px
    }

    body.zr-support #fullpage .slide.advantages .list-link .item > .list-icon,
    body.zr-support #fullpage .slide.how-it-works .list-link .item > .list-icon,
    body.zr-support #fullpage .slide.advantages .list-link .item > .list-icon::before,
    body.zr-support #fullpage .slide.advantages .list-link .item > .list-icon::after,
    body.zr-support #fullpage .slide.how-it-works .list-link .item > .list-icon::before,
    body.zr-support #fullpage .slide.how-it-works .list-link .item > .list-icon::after {
        -ms-flex-preferred-size: 24px;
        flex-basis: 24px;
        width: 24px !important;
        height: 24px !important
    }
}

/* tablet and phone: the open sections - the gaps between the paragraphs as in the text of the site (were 30-50 px) */
@media screen and (max-width: 950px) {
    body.zr-support #fullpage .slide.advantages .tabs-section .tab-anchor p,
    body.zr-support #fullpage .slide.how-it-works .tabs-esction .tab-anchor p {
        margin: 0 !important
    }

    body.zr-support #fullpage .slide.advantages .tabs-section .tab-anchor p + p,
    body.zr-support #fullpage .slide.how-it-works .tabs-esction .tab-anchor p + p {
        margin-top: 10px !important
    }
}

/* tablet: the open sections in the middle of the frame height (the container is as high as the frame) */
@media not all { /* 7.25: tablets in portrait use the tabs too (the open 2 x 2 cards were scaled to 11 px text - iPad 810 x 1080) */
    body.zr-support #fullpage .slide.advantages > .fp-tableCell > .container,
    body.zr-support #fullpage .slide.how-it-works > .fp-tableCell > .container {
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-pack: center;
        justify-content: center !important;
        -ms-flex-align: stretch;
        align-items: stretch !important
    }

    body.zr-support #fullpage .slide.advantages > .fp-tableCell > .container > *,
    body.zr-support #fullpage .slide.how-it-works > .fp-tableCell > .container > * {
        -ms-flex: 0 0 auto !important;
        flex: 0 0 auto !important
    }
}

/* design "Customer reviews" (7.21, found on tall screens - 4K, 1920x1200): the reviews column stood at the top of the slide
   and the picture in the middle - both columns in the middle of the slide height */
@media screen and (min-width: 951px) {
    .zr-design #fullpage .slide.customer-reviews > .fp-tableCell > .container {
        -ms-flex-align: center !important;
        align-items: center !important
    }
}

/* design "Our work" (7.21, found on tall screens): the big decorative "ZR CODE" is as high as the slide - on 4K / 1920x1200 /
   portrait monitors it grew over the text and the buttons ("Check Project" red on red). Not higher than on a 1920x1080
   screen (912 px = 47.5vw of 1920), in the middle of the slide height */
@media screen and (min-width: 951px) {
    .zr-design #fullpage .slide.our-work .anim-image {
        top: 0 !important;
        bottom: 0 !important;
        height: min(100%, 47.5vw) !important;
        margin-top: auto !important;
        margin-bottom: auto !important
    }
}

/* ...and on >1920 px screens at its 1920 px place: the theme pushed it right there (-17vw) for its larger 4K size - with the
   1080p size it covered "OUR WORK" */
@media screen and (min-width: 1921px) {
    .zr-design #fullpage .slide.our-work .our-work-img {
        left: -614.4px !important
    }
}

/* support "Services": in the middle of the frame height on tablets too (stood at the top) */
@media screen and (min-width: 769px) {
    body.zr-support #fullpage .slide.our-team > .fp-tableCell > .container {
        -ms-flex-align: center !important;
        align-items: center !important
    }
}

@media screen and (min-width: 769px) and (max-width: 950px) {
    /* (the container is a column here and the block took the 1240 px basis as its height) */
    body.zr-support #fullpage .slide.our-team > .fp-tableCell > .container {
        -ms-flex-pack: center !important;
        justify-content: center !important
    }

    body.zr-support #fullpage .slide.our-team .wrap-slider {
        -ms-flex: 0 0 auto !important;
        flex: 0 0 auto !important
    }
}

/* 770-950 px windows lower than 800 px (half a laptop screen, DevTools at the side): the 4 open cards did not fit (the
   slide would be scaled to 40 %) - the tabs as on the computer, in one column: title, tabs, the text of the tab (no picture) */
@media screen and (min-width: 769px) and (max-width: 950px) {
    body.zr-support #fullpage .slide.advantages .tabs-section,
    body.zr-support #fullpage .slide.how-it-works .tabs-esction {
        -ms-flex: 0 0 100% !important;
        flex: 0 0 100% !important
    }

    body.zr-support #fullpage .slide.advantages .text-link .anim-image,
    body.zr-support #fullpage .slide.how-it-works .wrap-image {
        display: none !important
    }

    body.zr-support #fullpage .slide.advantages .tabs-section,
    body.zr-support #fullpage .slide.how-it-works .tabs-esction {
        grid-column: 1 !important;
        margin: 0 !important;
        padding: 0 !important
    }

    body.zr-support #fullpage .slide.advantages .list-link,
    body.zr-support #fullpage .slide.how-it-works .list-link {
        margin-bottom: 24px !important
    }
}

/* support "Services" on low windows (lower than 620 px; DevTools open, small laptops): compact cards and text - the new
   cards with the intro were too tall (1280x400 RU would scroll inside the frame) */
@media screen and (min-width: 769px) and (max-height: 620px) {
    body.zr-support #fullpage .slide.our-team .wrap-slider > h2 {
        margin-bottom: 6px !important
    }

    body.zr-support #fullpage .slide.our-team .zr-slide-intro {
        font-size: 14px !important;
        line-height: 20px !important;
        margin-bottom: 16px !important
    }

    body.zr-support #fullpage .slide.our-team .our-team-slider {
        gap: 12px
    }

    body.zr-support #fullpage .slide.our-team .our-team-slider .item {
        padding: 16px !important
    }

    body.zr-support #fullpage .slide.our-team .our-team-slider .item .title {
        font-size: 19px !important;
        line-height: 24px !important;
        margin-bottom: 8px !important
    }

    body.zr-support #fullpage .slide.our-team .our-team-slider .item .text p {
        font-size: 13px !important;
        line-height: 19px !important
    }
}

/* the smaller type of zrFit (.zr-fit-tight) reaches the cards too */
body.zr-support #fullpage .slide.our-team .zr-fit-tight .our-team-slider .item .title {
    font-size: 16px !important;
    line-height: 21px !important;
    margin-bottom: 6px !important
}

body.zr-support #fullpage .slide.our-team .zr-fit-tight .our-team-slider .item .text p,
body.zr-support #fullpage .slide.our-team .zr-fit-tight .zr-slide-intro {
    font-size: 12px !important;
    line-height: 17px !important
}

body.zr-support #fullpage .slide.our-team .zr-fit-tight .our-team-slider .item {
    padding: 12px !important
}

/* ---------- Stage 7.22 ---------- */
/* service cards: the tags one step smaller (the 2nd service in 2 lines with its shorter tags, migration 010) */
.zr-services__tags {
    margin: -3px -3px 18px
}

.zr-services__tags span {
    margin: 3px;
    padding: 2px 8px;
    font-size: 11px;
    line-height: 16px
}

/* /our-works/ and /articles/: the short text under the title */
.zr-list-page .all-project .navigation .zr-home-title {
    margin-bottom: 10px !important
}

.zr-list-page .zr-list-intro {
    max-width: 760px;
    margin: 0 auto 16px !important;
    text-align: center
}

/* support "Types of support" / "Advantages" (user, 7.22) */
/* the short text under the title */
body.zr-support #fullpage .slide.advantages .zr-slide-intro {
    max-width: 720px;
    margin: 0 auto 22px !important;
    text-align: center;
    font-size: 17px !important;
    line-height: 26px !important
}

/* the tab buttons a little smaller */
body.zr-support #fullpage .slide.advantages .list-link,
body.zr-support #fullpage .slide.how-it-works .list-link {
    gap: 12px
}

body.zr-support #fullpage .slide.advantages .list-link .item,
body.zr-support #fullpage .slide.how-it-works .list-link .item {
    min-height: 46px;
    gap: 9px;
    padding: 6px 18px 6px 14px !important;
    font-size: 15px
}

body.zr-support #fullpage .slide.advantages .list-link .item > .list-icon,
body.zr-support #fullpage .slide.how-it-works .list-link .item > .list-icon,
body.zr-support #fullpage .slide.advantages .list-link .item > .list-icon::before,
body.zr-support #fullpage .slide.advantages .list-link .item > .list-icon::after,
body.zr-support #fullpage .slide.how-it-works .list-link .item > .list-icon::before,
body.zr-support #fullpage .slide.how-it-works .list-link .item > .list-icon::after {
    -ms-flex-preferred-size: 22px;
    flex-basis: 22px;
    width: 22px !important;
    height: 22px !important
}

@media screen and (min-width: 951px), screen and (min-width: 769px) and (max-width: 950px) {
    /* Types of support: the place of the animation is kept from the start (682 x 528) - it is drawn only when the slide is
       shown; before it the box had no height and the title and the text jumped */
    body.zr-support #fullpage .slide.advantages .text-link .anim-image {
        aspect-ratio: 682 / 528;
        height: auto !important
    }

    /* Advantages: the text and the picture side by side in the middle (the picture stood in the middle of the right
       half, far from the text), the picture as high as there is room */
    body.zr-support #fullpage .slide.how-it-works .tabs-esction {
        -ms-flex: 0 1 560px !important;
        flex: 0 1 560px !important;
        max-width: 560px !important
    }

    body.zr-support #fullpage .slide.how-it-works .wrap-image {
        -ms-flex: 0 0 auto !important;
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        height: min(calc(100vh - 400px), 600px) !important;
        max-height: none !important;
        aspect-ratio: 576 / 952
    }

    body.zr-support #fullpage .slide.how-it-works .wrap-image .tab-anchor img {
        height: 100% !important;
        width: 100% !important;
        object-fit: contain
    }
}

/* design "Write to us": the white circle of the theme had no start position - for the first 1.5 s (before its slide-in
   animation from right: -100%) it stood at the left, over the frame and the grey margins. Starts where its animation
   starts, like the red one */
body.zr-landing #fullpage .slide.write-to-us .anim .white-ellipse {
    right: -100%
}

/* design: the big "ZR CODE" of "Our work" is split between two slides - "Z" at the right of "What we do?", "R" at the left
   of "Our work". It stood over the texts of both slides (the "?" of the title on the Z, the "O" of "OUR WORK" on the R).
   A little smaller and placed so that the slide border goes between the Z and the R: each letter beside its text */
@media screen and (min-width: 1021px) {
    .zr-design #fullpage .slide.our-work .anim-image {
        height: min(100%, 34vw) !important
    }

    .zr-design #fullpage .slide.our-work .our-work-img {
        left: -20vw !important
    }
}

@media screen and (min-width: 1921px) {
    .zr-design #fullpage .slide.our-work .anim-image {
        height: min(100%, 652.8px) !important
    }

    .zr-design #fullpage .slide.our-work .our-work-img {
        left: -384px !important
    }
}

/* ---------- 7.22 quick test fixes ---------- */
@media screen and (min-width: 769px) and (max-width: 950px) {
    /* home "Our works": the pictures of the stack as wide as their column (the third one took the natural width of its
       picture and lay over the project name and "Check Project" on low windows - 900x500, 790x450) */
    #our-works-anchor .slider-creative .slides .item {
        right: 0
    }

    /* (the stack offsets of the theme stay) */
    #our-works-anchor .slider-creative .slides .item.slide-position {
        right: -15px
    }

    #our-works-anchor .slider-creative .slides .item.slide-position + .item {
        right: -30px
    }

    #our-works-anchor .slider-creative .slides .item img {
        display: block;
        width: 100%;
        min-width: 0 !important; /* the theme's 48vw - wider than the column of the row layout */
        height: auto
    }

    /* landings "Write to us": the red ZR CODE logo above the form keeps its height (its box was squeezed by the column
       and the logo went over the title - 776x535) */
    .zr-landing #fullpage .slide.write-to-us > .fp-tableCell > .container > div {
        -ms-flex-negative: 0;
        flex-shrink: 0
    }

    /* /services/: three cards in a row like the home Services (was 2 + 1 on tablets in portrait) */
    .zr-frame-scroll .zr-services__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 12px !important
    }
}

/* ...and not shown on low ones (a decoration; the form must fit the frame) */
@media screen and (min-width: 769px) and (max-width: 950px) and (max-height: 700px) {
    .zr-landing #fullpage .slide.write-to-us .red-logo {
        display: none !important
    }
}

/* /services/ on 770-950 px (three cards in a row since 7.22): the narrow cards like the home ones - smaller paddings and
   names (the names "Development", "Management" were cut at the card edge), the text 14 px */
@media screen and (min-width: 769px) and (max-width: 950px) {
    .zr-frame-scroll .zr-services__link {
        padding: 20px 16px !important
    }

    .zr-frame-scroll .zr-services__name {
        font-size: 20px !important;
        line-height: 25px !important;
        overflow-wrap: break-word;
        -webkit-hyphens: manual;
        hyphens: manual
    }

    .zr-frame-scroll .zr-services__text {
        font-size: 14px !important;
        line-height: 20px !important;
        overflow-wrap: break-word
    }

    .zr-frame-scroll .zr-services__tags span {
        white-space: normal
    }
}

/* ---------- Stage 7.23: landings (user) ---------- */
/* Every slide of a landing (computer) with side room inside the frame like the home blocks (was 20 px - the texts, the forms
   and the pictures stood at the left / right side of the grey frame): 115 px (6vw) on 1920 px as on the home page, growing with
   the window - a stretched window gets a narrower content. Less on small laptops (58 px on 1280, 66 on 1366): with the full
   6vw the text slides were scaled down a lot there (development first screen 0.92 -> 0.76 on 1280 x 720) */
@media screen and (min-width: 951px) {
    body.zr-landing #fullpage .fp-slide > .fp-tableCell > .container {
        padding-left: calc(64px + clamp(20px, 9vw - 57px, 115.2px)) !important;
        padding-right: calc(64px + clamp(20px, 9vw - 57px, 115.2px)) !important
    }

    /* development "Our development process" / design "What we do?" (.how-we-do): the 7.6 rule set its own right padding
       (84px + 2vw); the text column there is pulled out by the theme (box -2vw, column -1.4vw) - the same edge as the others */
    body.main-page #fullpage .fp-slide.how-we-do > .fp-tableCell > .container {
        padding-right: calc(64px + clamp(20px, 9vw - 57px, 115.2px) + 3.4vw) !important
    }

    /* design "How we do?": the illustration at the right ends where the content ends (it stood ~50 px from the frame side) */
    .zr-design #fullpage .slide.what-we-do .anim-image .what-we-do-img {
        right: calc(64px + clamp(20px, 9vw - 57px, 115.2px));
        max-width: 33vw
    }

    /* design "Customer reviews": the picture of the client a little smaller - the three review cards got narrow with the
       side room (130 px of text per line on 1366 px) */
    .zr-design #fullpage .slide.customer-reviews .wrap-slider {
        --zr-view: min(20vw, 440px, calc(100vh - 220px))
    }
}

/* support "Advantages" and "Work for free?": (7.23: the whole slide white, without the grey frame -> 7.26, user: with the menu
   open the white slide moved right with the sections and the frame was gone - the page looked broken) the frame stays; near the
   right edge, behind the picture, the grey of the frame fades into white (an overlay inside the slide - it moves with the slide) */
@media screen and (min-width: 951px) {
    body.zr-support #fullpage .slide.how-it-works,
    body.zr-support #fullpage .slide.why-us {
        position: relative
    }

    body.zr-support #fullpage .slide.how-it-works::before,
    body.zr-support #fullpage .slide.why-us::before {
        content: "";
        position: absolute;
        z-index: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, #fff 220px);
        pointer-events: none
    }

    /* from 220 px before the picture of the tab to the right edge */
    body.zr-support #fullpage .slide.how-it-works::before {
        width: calc(84px + min(60.5vh, 40vw) + 220px)
    }

    /* the big orange circle takes the right half */
    body.zr-support #fullpage .slide.why-us::before {
        left: 48%
    }

    /* the texts above the overlay */
    body.zr-support #fullpage .slide.why-us > .fp-tableCell > .container {
        position: relative;
        z-index: 2
    }
}

/* > 1920: the site is 1920 px in the middle, grey around it - the white must not end in a hard edge at the slide side:
   over the outer 64 px (the frame's grey margin) it fades back into the grey */
@media screen and (min-width: 1921px) {
    body.zr-support #fullpage .slide.how-it-works::before,
    body.zr-support #fullpage .slide.why-us::before {
        background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, #fff 220px, #fff calc(100% - 64px), rgba(255, 255, 255, 0) 100%)
    }
}

/* the tab buttons (Types of support, Advantages): the icon stays dark on hover - only the shown tab is orange (the theme
   painted the icon orange on hover, the text and the frame stayed dark). No fade animations: the theme replayed the fade of
   the orange icon when the mouse left the button (an orange flash) */
body.zr-support #fullpage .slide .list-link .item > .list-icon::before,
body.zr-support #fullpage .slide .list-link .item > .list-icon::after {
    animation: none !important;
    transition: none !important
}

body.zr-support #fullpage .slide .list-link .item:not(.active) > .list-icon::before {
    opacity: 1 !important
}

body.zr-support #fullpage .slide .list-link .item:not(.active) > .list-icon::after {
    opacity: 0 !important
}

body.zr-support #fullpage .slide .list-link .item.active > .list-icon::before {
    opacity: 0 !important
}

body.zr-support #fullpage .slide .list-link .item.active > .list-icon::after {
    opacity: 1 !important
}

/* support "Types of support": the short text under the title in one line */
body.zr-support #fullpage .slide.advantages .zr-slide-intro {
    max-width: none
}

/* support first screen: two buttons - "Types of support" and "Services" (the buttons of the home first screen) */
.zr-hero-btns {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 16px 20px;
    margin-top: 28px
}

body.zr-landing #fullpage .slide .zr-hero-btns > .btn {
    /* up to 220 px each, as wide as their text when the text column is narrow - one row on 1024 px too (a 220 px basis made
       the row wrap: flex wraps by the basis, not by the smallest size) */
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: auto !important;
    max-width: 220px !important;
    height: 52px !important;
    margin: 0 !important;
    padding: 0 22px !important;
    font-size: 17px !important;
    line-height: 48px !important;
    white-space: nowrap
}

/* tablet and phone: the text of the first screen is centered - the buttons too */
@media screen and (max-width: 950px) {
    .zr-hero-btns {
        -ms-flex-pack: center;
        justify-content: center
    }
}

@media screen and (max-width: 767px) {
    .zr-hero-btns {
        gap: 12px
    }

    body.zr-landing #fullpage .slide .zr-hero-btns > .btn {
        -ms-flex: 1 1 160px;
        flex: 1 1 160px
    }
}

/* support first screen and "Work for free?": the text a readable column that ends before the picture (it ran into it on
   narrower windows - the picture is ~ the right half of the slide) */
@media screen and (min-width: 951px) {
    body.zr-support #fullpage .slide.home-page .text-section,
    body.zr-support #fullpage .slide.why-us .text-section {
        max-width: max(360px, min(640px, calc(50vw - 64px - clamp(20px, 9vw - 57px, 115.2px) - 40px)))
    }
}

/* support "Advantages": the picture of the tab at the right as on the old site - the whole height of the slide (its white
   background is the white of the slide), outside the scaled container: it does not move when the screen is fitted, the menu
   opens or the slide changes. The title, the tab buttons and the text in the middle of the room left of it */
.zr-adv-pic {
    display: none
}

@media screen and (min-width: 951px) {
    body.zr-support #fullpage .slide.how-it-works {
        position: relative
    }

    body.zr-support #fullpage .slide.how-it-works .zr-adv-pic {
        display: block;
        position: absolute;
        z-index: 0;
        top: 0;
        bottom: 0;
        right: 84px;
        height: min(100%, calc(40vw * 952 / 576));
        aspect-ratio: 576 / 952;
        margin: auto 0;
        pointer-events: none
    }

    body.zr-support #fullpage .slide.how-it-works .zr-adv-pic .tabs-sesction,
    body.zr-support #fullpage .slide.how-it-works .zr-adv-pic .tab-anchor.active-tab {
        height: 100%
    }

    body.zr-support #fullpage .slide.how-it-works .zr-adv-pic img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover
    }

    body.zr-support #fullpage .slide.how-it-works > .fp-tableCell > .container {
        position: relative;
        z-index: 1;
        padding-right: calc(84px + min(60.5vh, 40vw) + 4vw) !important
    }

    body.zr-support #fullpage .slide.how-it-works .tabs-esction {
        -ms-flex: 0 1 640px !important;
        flex: 0 1 640px !important;
        max-width: 640px !important
    }

    /* the room left of the picture is narrower than the frame: the buttons go to a second row when they do not fit (7.21
       shrank them in one row - on 1100 px the labels went out of the buttons) */
    body.zr-support #fullpage .slide.how-it-works .list-link {
        -ms-flex-wrap: wrap !important;
        flex-wrap: wrap !important
    }

    body.zr-support #fullpage .slide.how-it-works .list-link > * {
        -ms-flex: 0 0 auto !important;
        flex: 0 0 auto !important;
        min-width: auto !important;
        white-space: nowrap !important
    }
}

/* design "Customer reviews": [<] dots [>] at the left under the cards (user: arrow to the left) */
@media screen and (min-width: 951px) {
    .zr-design #fullpage .slide.customer-reviews .zr-reviews-nav {
        -ms-flex-pack: start;
        justify-content: flex-start
    }
}

/* header "Back" arrow next to the logo ( < | ZR CODE ), only while fullpage works (home, landings on the computer / tablet):
   one step back to the page of the site the visitor came from, else home (common/header.php). Hover: the site link style -
   orange, the arrow moves a little to the left (as the old "Back" of the menu) */
.zr-hback {
    display: none
}

@media screen and (min-width: 769px) {
    html.fp-enabled .main-header .header-left {
        position: relative
    }

    html.fp-enabled .main-header .zr-hback {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        right: 100%;
        box-sizing: content-box;
        width: 26px;
        height: 26px;
        margin: -13px 14px 0 0;
        padding-right: 10px;
        border-right: 1px solid #d9d9d9;
        text-decoration: none
    }

    html.fp-enabled .main-header .zr-hback svg {
        transition: transform .2s linear
    }

    html.fp-enabled .main-header .zr-hback svg path {
        transition: stroke .2s linear
    }

    html.fp-enabled .main-header .zr-hback:hover svg,
    html.fp-enabled .main-header .zr-hback:focus-visible svg {
        transform: translateX(-3px)
    }

    html.fp-enabled .main-header .zr-hback:hover svg path,
    html.fp-enabled .main-header .zr-hback:focus-visible svg path {
        stroke: #ff553a
    }
}

/* contacts (7.23, small and muted since T-0009): the note under the Toronto address and the status of the Kharkiv office */
.zr-contact .zr-contact__office .zr-contact__note {
    margin-top: 8px; /* a div: the theme forces <p> to 16px !important on phones */
    font-size: 13px;
    line-height: 18px;
    color: #6b6b6b
}

.zr-contact__status {
    display: inline-block;
    padding: 2px 10px;
    border: 1px solid #ececec;
    border-radius: 12px;
    background: #f7f7f7;
    font-size: 13px;
    line-height: 18px;
    color: #6b6b6b
}

/* contacts, round 2 (T-0009): the Kharkiv status - a smaller pill right of the office title (wraps under it only when there is
   no room); the Toronto note on one line (12px); both phones in the pills row with a small grey country mark */
.zr-contact .zr-contact__office-title {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    row-gap: 4px
}

.zr-contact__office-title .zr-contact__status {
    margin-left: 8px;
    padding: 0 7px;
    border-radius: 10px;
    font-family: Avenir Next Regular, sans-serif;
    font-size: 11px;
    line-height: 16px;
    letter-spacing: .2px;
    white-space: nowrap
}

.zr-contact .zr-contact__office .zr-contact__note {
    margin-top: 6px;
    font-size: 12px;
    line-height: 16px
}

/* T-0010: Toronto «By appointment» - the same small pill as the Kharkiv status, in the site's red (open, call first);
   Kharkiv stays grey (closed). The full sentence is the pill's title */
.zr-contact__office-title .zr-contact__status--open {
    border-color: #ffd2c9;
    background: #fff4f1;
    color: #ff553a;
    cursor: help
}

.zr-contact__quick .zr-contact__cc {
    margin-right: 6px;
    font-size: 11px;
    line-height: 16px;
    letter-spacing: .5px;
    color: #8a8a8a;
    transition: color .2s linear
}

.zr-contact__quick a:hover .zr-contact__cc,
.zr-contact__quick a:focus-visible .zr-contact__cc {
    color: inherit
}

/* contacts, round 2 (T-0009): no theme gap under the form (.write-to-us gets 55px on phones) - 40px form -> map, as between
   the other blocks */
.zr-contact .zr-contact__form.write-to-us {
    padding-bottom: 0 !important
}

/* contacts, round 3 (T-0009): row 1 = the two phone pills on one line (a bit smaller on phones so they fit at 360); row 2 = the
   email pill + Telegram / WhatsApp / Instagram as round icon-only buttons (the header SOCIAL icons in red, the pill border and
   hover, as high as the pills) */
.zr-contact__quick--phones {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    margin-bottom: 8px
}

.zr-contact__quick a.zr-contact__round {
    -ms-flex-pack: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%
}

.zr-contact__quick .zr-contact__round svg {
    margin-right: 0
}

.zr-contact__quick--phones a {
    white-space: nowrap
}

/* the phone pills need 434px at 15px: 14px in the 397-413px desktop column and at 441-479px, 12px up to 440px; below 390 the
   country mark goes (the +1 / +38 code shows it, the aria-label keeps it); below 360 the 2nd pill may wrap */
@media screen and (min-width: 1201px), screen and (max-width: 479px) {
    .zr-contact__quick--phones a {
        padding-left: 10px;
        padding-right: 10px;
        font-size: 14px
    }

    .zr-contact__quick--phones svg {
        margin-right: 6px
    }

    .zr-contact__quick--phones .zr-contact__cc {
        margin-right: 5px
    }
}

@media screen and (max-width: 440px) {
    .zr-contact__quick--phones a {
        padding-left: 8px;
        padding-right: 8px;
        font-size: 12px
    }

    .zr-contact__quick--phones svg {
        margin-right: 4px
    }

    .zr-contact__quick--phones .zr-contact__cc {
        margin-right: 4px
    }
}

@media screen and (max-width: 389px) {
    .zr-contact__quick--phones .zr-contact__cc {
        display: none
    }
}

@media screen and (max-width: 359px) {
    .zr-contact__quick--phones {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }
}

/* desktop: the space under the map = the side space (64px frame + 40px); two columns (1201+): a bit less air above, so the
   page fits 1920 x 1080 without the 50px scroll that cut the map at the frame edge (qa B-1) */
@media screen and (min-width: 769px) {
    .zr-contact__inner {
        padding-top: 104px;
        padding-bottom: 104px
    }
}

@media screen and (min-width: 1201px) {
    .zr-contact .zr-home-intro {
        margin-bottom: 24px !important /* the 36px !important of the intros (stage 7.x) */
    }

    .zr-contact__map iframe {
        height: 240px
    }
}

/* the menu of a landing (7.23): + its first screen and the "Other services" row (2 lines in RU / UA on narrow windows) - the font
   one step smaller, so the list still fits the height (it scrolled 2 px on 1024 x 680: /ru/design/, /ua/support/) */
.main-navigation:has(.zr-svc-switch) {
    --zr-menu-font: clamp(22px, min(3.2vw, (100vh - 340px) / 11.2), 61px)
}

@media screen and (max-width: 950px) {
    .main-navigation:has(.zr-svc-switch) {
        --zr-menu-font: clamp(22px, (100vh - 340px) / 11.2, 44px)
    }
}

/* ...and on the lowest windows down to 19 px (6 items did not fit at 22 px on 900 x 500) */
@media screen and (max-height: 600px) {
    .main-navigation:has(.zr-svc-switch) {
        --zr-menu-font: clamp(19px, (100vh - 340px) / 8.6, 22px)
    }
}

/* support "Advantages": the tab buttons 2 + 2 when one row does not fit (class set by js/scripts.js) */
@media screen and (min-width: 951px) {
    body.zr-support #fullpage .slide.how-it-works .list-link.zr-tabs-2x2 {
        display: grid !important;
        /* a column may be narrower than its longest label - the label then takes 2 lines inside its button (UA on 1024 px) */
        grid-template-columns: repeat(2, minmax(-webkit-min-content, -webkit-max-content));
        grid-template-columns: repeat(2, minmax(min-content, max-content));
        -ms-flex-pack: center;
        justify-content: center;
        gap: 12px
    }

    /* the buttons of a column are as wide as the widest one - their icon and label in the middle */
    body.zr-support #fullpage .slide.how-it-works .list-link.zr-tabs-2x2 > * {
        -ms-flex-pack: center;
        justify-content: center;
        white-space: normal !important;
        text-align: left
    }
}

/* ---------- Stage 7.24: invented visitors test, round 1 (qa/personas-2026-10-06.md) ----------
   (the small grey texts - crumbs, menu bottom row, "Other services", contact labels, copyright - #8a8a8a -> #6e6e6e above:
   contrast 3.4 -> 5.1) */

/* R1-9: form errors - #f00 had a low contrast; on phones the error stood above the field over its border and, two lines long,
   over the label of the message field -> under the field, as a normal line */
.text-danger {
    color: #d32f2f !important
}

/* (round 2: on tablets and narrow form columns the error at the top of the field lay over the small label of the field -
   under the field on every screen) */
@media screen {
    form .input label.text-danger,
    form .textarea label.text-danger {
        position: static !important;
        display: block !important;
        width: auto !important;
        height: auto !important;
        margin: 6px 0 0 2px !important;
        padding: 0 !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        transform: none !important;
        font-size: 13px !important;
        line-height: 18px !important;
        text-align: left;
        white-space: normal
    }

    form .textarea textarea {
        margin-top: 0 !important
    }
}

/* R1-7: home first screen - the text columns end before the orange shape (the long RU word "Профессиональная" and the right
   paragraph lay on it: 1280 x 800). The shape is 44vw high (46.6vw wide, its visible part starts at 33.2vw) */
@media screen and (min-width: 951px) {
    #index-anchor .services > .container {
        max-width: calc(33.2vw - 100px) !important
    }

    html[lang="ru"] #index-anchor .services .item h1 {
        font-size: min(2.9vw, calc(3.34vw - 10.1px)) !important;
        line-height: 1.2 !important
    }
}

/* R1-8: landings on tablets in portrait / unfolded foldables (770-950): room to the frame sides (the content touched them:
   2 px), the line under the title of the form readable (11 px), one logo on "Write to us" of development (two overlapped) */
@media screen and (min-width: 769px) and (max-width: 950px) {
    body.zr-landing #fullpage .fp-slide > .fp-tableCell > .container {
        padding-left: 120px !important;
        padding-right: 120px !important
    }

    body.zr-landing #fullpage .slide.write-to-us .text-slide > h3,
    body.zr-landing #fullpage .slide.write-to-us .text-slide > p {
        font-size: 16px !important;
        line-height: 24px !important
    }

    body.zr-development #fullpage .slide.write-to-us .red-logo {
        display: none !important
    }
}

/* R1-10: the title of the first screen of the landings on phones - one size on the three landings (development 40/58 px:
   5 lines on a folded phone, support 30 px) */
@media screen and (max-width: 767px) {
    body.zr-landing #fullpage .fp-slide:first-child h1,
    body.zr-landing #fullpage .fp-slide:first-child h2,
    body.zr-landing #fullpage .slide:first-child h1,
    body.zr-landing #fullpage .slide:first-child h2 {
        font-size: 32px !important;
        line-height: 38px !important
    }
}

/* R1-11: home first screen on phones - the title 15.6 px and the text 12 px were too small */
@media screen and (max-width: 768px) {
    #index-anchor .services .item h1 {
        font-size: 19px !important;
        line-height: 25px !important
    }

    #index-anchor .services .item p {
        font-size: 14px !important;
        line-height: 20px !important
    }
}

/* R1-13: touch screens - bigger tap areas without changing the look: the links of the menu bottom row / crumbs and the dots of
   the sliders get an invisible area around them (a finger needs ~40 px) */
@media (hover: none), screen and (max-width: 950px) {
    .zr-menu-foot a,
    .zr-crumbs__item a {
        position: relative
    }

    .zr-menu-foot a::after,
    .zr-crumbs__item a::after {
        content: "";
        position: absolute;
        top: -6px;
        right: -4px;
        bottom: -6px;
        left: -4px
    }

    /* (7.24 round 2: the rows of the bottom row (2 lines on phones / in RU, UA) 12 px apart - the areas of the 2nd line
       covered the 1st one: a tap on "Contacts" could open "Terms") */
    .zr-menu-foot {
        row-gap: 12px
    }

    .slick-dots button {
        position: relative
    }

    .slick-dots button::after {
        content: "";
        position: absolute;
        top: -14px;
        right: -6px;
        bottom: -14px;
        left: -6px
    }
}

/* R1-14: case page - the lead paragraphs in the middle had ~118 characters in a line on a wide screen */
.news-post .content > .center > p {
    max-width: 760px;
    margin-left: auto !important;
    margin-right: auto !important
}

/* R1-15: home "Write to us" - the line under the title was as wide as the frame (1562 px on 1920) */
#write-to-us-anchor .center > p {
    max-width: 760px;
    margin-left: auto !important;
    margin-right: auto !important
}

/* R1-16: keyboard focus visible (links, buttons, fields - Tab); mouse clicks are not outlined (:focus-visible) */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid #ff553a !important;
    outline-offset: 3px
}

/* ---------- Stage 7.24: invented visitors test, round 2 ---------- */
/* R2: case / article pages on laptops - the text was in vw of the theme: 9.8 px on 1024, headings 10-15 px */
@media screen and (min-width: 769px) {
    .news-post .content p,
    .news-post .content li {
        font-size: max(15px, .96vw) !important;
        line-height: 1.55 !important
    }

    .news-post .content .text h2 {
        font-size: max(21px, 1.5vw) !important;
        line-height: 1.25 !important
    }

    .news-post .content .text h3 {
        font-size: max(18px, 1.35vw) !important;
        line-height: 1.3 !important
    }

    .news-post .content .text h4 {
        font-size: max(15px, 1vw) !important;
        line-height: 1.35 !important
    }
}

/* R2: home "About us" - the text was 10.6 px with tight lines on windows 951-1100 wide (1.1vw) */
@media screen and (min-width: 951px) {
    .about-us-section .text-paragraph p {
        font-size: max(14px, 1.1vw) !important;
        line-height: 1.5 !important
    }
}

/* R2: development "Our development process" - the lines of its text up to ~120 characters on wide screens */
body.zr-development #fullpage .slide.how-we-do .elements-text .item > p {
    max-width: 880px
}

/* R2: the tags of the home services cards on windows lower than 700 px (/services/ scrolls since T-0011): scaled there, the tags
   were 9 px - not readable (they were hidden below 620 px since 7.20) */
@media screen and (min-width: 769px) and (max-height: 700px) {
    .zr-services__grid--home .zr-services__tags {
        display: none !important
    }
}

/* (R2: landing "Write to us" on phones - 12 px to the screen edge -> 7.25: all the blocks of the landings 20 px, below) */

/* ---------- Stage 7.25: phones - one rhythm of the blocks, side room, titles; the text under the lists; (user) ---------- */
/* /our-works/, /articles/: the SEO text under the list was a big grey card (16 px text, 32 x 40 px padding, 408 px high on a
   phone) - clumsy. Now a quiet text under a thin line: 14 px grey, in the middle, not wider than 880 px */
.zr-list-page .all-project .container > div[style],
.zr-services .zr-services__inner > div[style] {
    max-width: 880px !important;
    margin: 56px auto 19px !important;
    padding: 28px 0 0 !important;
    background: none !important;
    border-radius: 0 !important;
    border-top: 1px solid #ececec;
    text-align: center !important;
    -webkit-columns: auto !important;
    columns: auto !important
}

.zr-list-page .all-project .container > div[style] p,

.zr-services .zr-services__inner > div[style] p {
    font-size: 14px !important;
    line-height: 23px !important;
    color: #6e6e6e !important;
    text-align: center !important
}

@media screen and (max-width: 769px) {
    .zr-list-page .all-project .container > div[style],
    .zr-services .zr-services__inner > div[style] {
        margin-top: 40px !important;
        padding-top: 24px !important
    }

    .zr-list-page .all-project .container > div[style] p,

    .zr-services .zr-services__inner > div[style] p {
        font-size: 14px !important;
        line-height: 22px !important;
        text-align: left !important /* a long centered text is hard to read on a phone */
    }
}

/* landings on phones: the blocks follow the rhythm of the home page - 56 px above and below the content of each block (112 px
   between two blocks; it was 170-240 px: + 25 px of the theme's container + margins of the inner wrappers), the texts 20 px from
   the screen sides (were 8 / 12 / 16 / 26 / 28 / 40 px from block to block) */
@media screen and (max-width: 767px) {
    body.zr-landing #fullpage .slide {
        padding-left: 0 !important;
        padding-right: 0 !important
    }

    body.zr-landing #fullpage .slide .container {
        padding: 0 20px !important;
        margin: 0 !important
    }

    body.zr-landing #fullpage .slide .container > *,
    body.zr-landing #fullpage .slide .text-section,
    body.zr-landing #fullpage .slide .text-slide,
    body.zr-landing #fullpage .slide .text-link,
    body.zr-landing #fullpage .slide .elements-text,
    body.zr-landing #fullpage .slide .elements-text > .item,
    body.zr-landing #fullpage .slide .wrap-slider,
    body.zr-landing #fullpage .slide .tabs-section,
    body.zr-landing #fullpage .slide .tabs-esction {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
        max-width: none !important;
        box-shadow: none !important
    }

    /* the first and the last thing of a block: no margins of their own (the block gives 56 px) */
    body.zr-landing #fullpage .slide .container > :first-child,
    body.zr-landing #fullpage .slide .container > :first-child > :first-child,
    body.zr-landing #fullpage .slide .container > :first-child > :first-child > :first-child {
        margin-top: 0 !important
    }

    body.zr-landing #fullpage .slide .container > :last-child,
    body.zr-landing #fullpage .slide .container > :last-child > :last-child,
    body.zr-landing #fullpage .slide .container > :last-child > :last-child > :last-child {
        margin-bottom: 0 !important
    }

    body.zr-landing #fullpage .slide h2:first-child,
    body.zr-landing #fullpage .slide .item > h2:first-child {
        margin-top: 0 !important
    }

    /* titles of the blocks: one size (development / design 40 px, support 30 px; the home page 30 px) */
    body.zr-landing #fullpage .slide:not(:first-child) h2 {
        font-size: 30px !important;
        line-height: 36px !important;
        margin-bottom: 16px !important
    }

    /* "Write to us": the line under the title as the intros of the site (it was 22 px demi in 3 lines) and room before the form
       (it touched the first field) */
    body.zr-landing #fullpage .slide.write-to-us .text-slide > h3,
    body.zr-landing #fullpage .slide.write-to-us .text-slide > p {
        font-family: Avenir Next Regular, sans-serif !important;
        font-size: 17px !important;
        line-height: 26px !important;
        margin: 0 0 24px !important;
        text-align: center
    }

    body.zr-landing #fullpage .slide.write-to-us .text-slide > h2 {
        text-align: center
    }

    /* a text and the button / form under it: 24 px */
    body.zr-landing #fullpage .slide .container form,
    body.zr-landing #fullpage .slide .container .zr-hero-btns {
        margin-top: 24px !important
    }

    body.zr-landing #fullpage .slide .container p + .btn,
    body.zr-landing #fullpage .slide .container ul.list + .btn,
    body.zr-landing #fullpage .slide .container p + .btns {
        margin-top: 24px !important
    }

    /* the titles of the blocks with a line under them (Advantages, Our work, Customer reviews): that line as a subtitle -
       18 / 26 px (was 22 px demi in 3-4 lines) */
    body.zr-landing #fullpage .slide h2 + h3 {
        font-size: 18px !important;
        line-height: 26px !important;
        margin-bottom: 12px !important
    }
}

/* the lists of the landings: the wrapped lines start under the text, not under the dot (every screen) */
#fullpage ul.list li {
    padding-left: 14px !important;
    text-indent: 0 !important
}

/* phones: the same 20 px side room on the other pages (case / article 30-31 px, /services/ 16 px) */
@media screen and (max-width: 768px) {
    .news-post .content > .center,
    .news-post .banner .container {
        padding-left: 20px !important;
        padding-right: 20px !important
    }

    .zr-frame-scroll .zr-services__inner {
        padding-left: 20px !important;
        padding-right: 20px !important
    }

    /* home "Write to us": the line under the title and the form - 24 px (18) */
    #write-to-us-anchor .center > p {
        margin-bottom: 24px !important
    }
}

/* home first screen on phones: the title and the text 20 px from the sides like the other blocks (60 px: the title took 3
   lines with one word on the last one) */
@media screen and (max-width: 768px) {
    #index-anchor .services.mob-hide {
        padding-left: 20px !important;
        padding-right: 20px !important
    }
}

/* article on phones: the section label ("1. About", "2. Details") stood 15 px left of the text - in line with the text */
@media screen and (max-width: 768px) {
    .news-post .content .text:after {
        left: 0 !important
    }
}

/* phones: the first title of every page 40 px under the fixed header (64 px) - it was 16-48 px, and on /design/ 14 px UNDER the
   header (its body had 34 px on top instead of the header height) */
@media screen and (max-width: 767px) {
    body.zr-landing {
        padding-top: 64px !important
    }

    body.zr-landing #fullpage .slide:first-child {
        padding-top: 40px !important
    }

    .zr-list-page section.all-project {
        padding-top: 104px !important
    }

    .zr-contact .zr-contact__inner,
    .zr-frame-scroll .zr-services__inner {
        padding-top: 104px !important
    }
}

/* support tabs on tablets (770-950 px): the 4 buttons 2 + 2, each half of the row - in one row the labels went out of their
   buttons (iPad 810 px, RU / UA) */
@media screen and (min-width: 769px) and (max-width: 950px) {
    body.zr-support #fullpage .slide.advantages .list-link,
    body.zr-support #fullpage .slide.how-it-works .list-link,
    body.zr-support #fullpage .slide.how-it-works .list-link.zr-tabs-2x2 {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        max-width: 560px !important;
        margin-left: auto !important;
        margin-right: auto !important
    }

    body.zr-support #fullpage .slide.advantages .list-link > *,
    body.zr-support #fullpage .slide.how-it-works .list-link > * {
        width: auto !important;
        min-width: 0 !important;
        white-space: normal !important
    }

    body.zr-support #fullpage .slide.advantages .list-link .item,
    body.zr-support #fullpage .slide.how-it-works .list-link .item {
        width: 100% !important;
        -ms-flex-pack: start;
        justify-content: flex-start
    }
}

/* design "Customer reviews" on laptops (lower than 800 px: 1366 x 657, 1280 x 720): the slide was scaled to 0.71 - the review
   text 10.6 px. 6 lines of a review (the whole one opens in the card on wider screens), the line under the title 18 px, a lower
   name bar -> the slide is scaled less */
@media screen and (min-width: 951px) and (max-height: 800px) {
    #fullpage .slide.customer-reviews .customer-reviews-reviews .item .desc + .text {
        -webkit-line-clamp: 6;
        line-clamp: 6;
        margin-bottom: 16px !important
    }

    .zr-design #fullpage .slide.customer-reviews .customer-reviews-reviews .item .title {
        padding-top: 12px !important;
        padding-bottom: 12px !important
    }

    .zr-design #fullpage .slide.customer-reviews .text-slide > h3,
    .zr-design #fullpage .slide.customer-reviews h2 + h3 {
        font-size: 18px !important;
        line-height: 25px !important
    }
}

/* design "Customer reviews" on windows lower than 700 px (1366 x 657): 5 lines of a review (12 px text at 6 lines) */
@media screen and (min-width: 951px) and (max-height: 700px) {
    #fullpage .slide.customer-reviews .customer-reviews-reviews .item .desc + .text {
        -webkit-line-clamp: 5;
        line-clamp: 5
    }
}

/* the forms on computers (951 px and wider): the error of a field at the top right inside the field, as the theme had it -
   under the field it made the form taller and the screen was scaled down (1366 x 657: the labels 8.7 px). On tablets and phones
   (narrow fields: it lay over the label) - under the field */
@media screen and (min-width: 951px) {
    form .input label.text-danger,
    form .textarea label.text-danger {
        position: absolute !important;
        display: block !important;
        top: 6px !important;
        right: 14px !important;
        left: auto !important;
        width: auto !important;
        max-width: calc(100% - 120px);
        margin: 0 !important;
        padding: 0 !important;
        font-size: 11px !important;
        line-height: 14px !important;
        text-align: right;
        white-space: normal;
        pointer-events: none
    }

    form .input,
    form .textarea {
        position: relative
    }
}

/* contacts: the title "Write to us" right on the first field (0 px on tablets) */
.zr-contact__form-title {
    margin-bottom: 20px !important
}

/* ---------- Stage 7.26 (user) ---------- */
/* titles and the short texts under them: the lines balanced (no lonely last word: "Reach out / to us today!", "... for Business
   / Growth"); long paragraphs - no single word on the last line */
h1, h2, h3, h4,
.zr-home-title,
.zr-home-intro,
.zr-slide-intro,
.zr-list-intro,
#fullpage .slide.write-to-us .text-slide > h2 + h3,
#fullpage .slide.write-to-us .text-slide > h2 + p {
    text-wrap: balance
}

p, li {
    text-wrap: pretty
}

/* landings "Write to us" (computer): the line under the title on the left like the title (development: centered by a
   rule of the home form - same id), as wide as the form, the same type on the three landings */
@media screen and (min-width: 951px) {
    body.zr-landing #fullpage .slide.write-to-us .text-slide > h2 + h3,
    body.zr-landing #fullpage .slide.write-to-us .text-slide > h2 + p {
        max-width: 620px;
        margin: 0 0 28px !important;
        font-family: Avenir Next Demi, sans-serif !important;
        font-size: 18px !important;
        line-height: 27px !important;
        text-align: left !important
    }

    body.zr-landing #fullpage .slide.write-to-us .text-slide > h2 + h3 + br,
    body.zr-landing #fullpage .slide.write-to-us .text-slide > h2 + p + br {
        display: none
    }
}

/* /our-works/, /articles/: the SEO text under the list - the full width (it was squeezed to 880 px in the middle with empty sides),
   shown in full (T-0012: the 3 lines + "Read more" of 7.26 are removed) */
.zr-list-page .all-project .container > div[style],
.zr-services .zr-services__inner > div[style] {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important
}

.zr-list-page .all-project .container > div[style] p,

.zr-services .zr-services__inner > div[style] p {
    text-align: left !important
}

/* screens wider than 1920 px: the theme sets every paragraph of the home page to 21 px !important there (index-page.css) - our
   intros and texts (17 / 15 / 16 px on 1920) became 21 px: on 2560 the page did not look like on 1920. The 1920 sizes back */
@media screen and (min-width: 1921px) and (min-height: 701px) {
    .zr-home-intro,
    .news-section .arrow-news + p,
    .news-section .arrow-news + .zr-home-intro,
    .our-work-section .navigation + p,
    .our-work-section .creative-slide-text .text-paragraph p,
    .zr-list-page .zr-list-intro {
        font-size: 17px !important;
        line-height: 26px !important
    }

    #news-anchor .slick-slider .text-paragraph p {
        font-size: 15px !important;
        line-height: 22px !important
    }

    body:not(.zr-landing) #write-to-us-anchor h2 + p {
        font-size: 16px !important;
        line-height: 24px !important
    }
}

/* centered paragraphs (case / article intros, the intros of the pages): balanced lines - no short tail on the last line */
.news-post .content > .center > p,
.text-center,
.zr-contact .zr-home-intro,
.zr-services__intro {
    text-wrap: balance
}

/* landings on tablets and phones (950 px and narrower): a title and the text under it aligned the same way. The theme centers
   the titles there, the texts stay on the left - a title followed by a text (or a list) goes to the left too; a title with a
   short line under it ("Types of support", "Write to us", "Advantages") stays a centered heading with its line */
@media screen and (max-width: 950px) {
    body.zr-landing #fullpage .slide :is(h1, h2):has(+ p:not(.zr-slide-intro)),
    body.zr-landing #fullpage .slide :is(h1, h2):has(+ ul) {
        text-align: left !important
    }

    body.zr-landing #fullpage .slide.write-to-us .text-slide > h2,
    body.zr-landing #fullpage .slide.write-to-us .text-slide > h2 + h3,
    body.zr-landing #fullpage .slide.write-to-us .text-slide > h2 + p,
    body.zr-landing #fullpage .slide h2 + h3 + p {
        text-align: center !important
    }
}

/* tablets 770-950 lower than 800 px (Pixel Fold 841 x 701, landscape tablets): the services cards are scaled - the tags were
   9.8 px, not readable: hidden there (as below 700 px) */
@media screen and (min-width: 769px) and (max-width: 950px) and (max-height: 800px) {
    .zr-services__grid--home .zr-services__tags {
        display: none !important
    }
}

/* articles: the text column 760 px in the middle (lines of 117-127 characters on 1366-1600 px - hard to read) */
@media screen and (min-width: 769px) {
    .news-post .content .text {
        max-width: 760px;
        margin-left: auto !important;
        margin-right: auto !important
    }
}

/* the menu bottom row in 2 lines: no dot at the start of the 2nd line (js/scripts.js marks the first link of a line). Invisible,
   but it keeps its width: with display none the link got narrower, went back up to the 1st line, lost the mark and wrapped
   again - a loop */
.zr-menu-foot a.zr-line-start::before,
#menu-popup .zr-menu-foot a.zr-line-start::before {
    visibility: hidden !important
}

/* the mobile menu on phones in landscape (the page is 740 px wide, ~340 px high): the items in two columns (in one column the
   7 items of the menu did not fit - "Write to us" was cut, 844 x 390) */
@media screen and (max-width: 769px) and (max-height: 500px) and (min-width: 560px) {
    #menu-popup .main-menu {
        /* two columns read top to bottom (the order of the menu), each item whole */
        display: block !important;
        -webkit-columns: 2;
        columns: 2;
        -webkit-column-gap: 56px;
        column-gap: 56px;
        width: -webkit-max-content;
        width: max-content;
        max-width: 100%;
        margin: auto !important;
        text-align: left
    }

    #menu-popup .main-menu > li {
        -webkit-column-break-inside: avoid;
        break-inside: avoid;
        padding-bottom: 0
    }

    /* the 8 px between the items belong to the links (a tap area of 32 px instead of 24, the same rows) */
    #menu-popup .main-menu > li > a {
        display: inline-block;
        padding: 4px 0
    }

    #menu-popup .main-menu > li,
    #menu-popup .main-menu > li + li,
    #menu-popup .main-menu > li:first-child,
    #menu-popup .main-menu > li:last-child {
        margin: 0 !important
    }

    #menu-popup {
        --zr-pop-font: 20px
    }
}

/* 7.26 round B (Ольга, iPad mini 744): design "How we do?" on tablets / phones - the theme's translucent white box under the text
   (.elements-text::after, opacity .7) had hard edges over the orange circle and its picture: a white rectangle cut into the circle.
   Tablets (770-950): the box stays (the picture behind the text would hurt reading), its edges fade out; phones (<= 769):
   no picture behind the text (only the pale circle) - no box */
@media screen and (max-width: 950px) {
    .zr-design #fullpage .slide .elements-text::after {
        box-shadow: 0 0 36px 18px #fff
    }
}

@media screen and (max-width: 769px) {
    .zr-design #fullpage .slide .elements-text::after {
        display: none
    }
}

/* 7.26 round B: a title and the text under it, tablets / phones (the geometry check: start of the lines / middles) -
   770-950: a title with a subtitle (h2 + h3: design "What we do?", "Our work", "Customer reviews") - the subtitle centered with
   the title, as on phones (the theme left it on the left under the centered title); development "Projects powered by our
   expertise" - a centered block (title, text, button): the title centered too (the text is centered there) */
@media screen and (max-width: 950px) {
    body.zr-landing #fullpage .slide :is(h1, h2) + h3 {
        text-align: center !important
    }
}

@media screen and (min-width: 770px) and (max-width: 950px) {
    body.zr-development #fullpage .slide.our-works .item > h2 {
        text-align: center !important
    }
}

/* phones: the item there is a centered flex column - the title (left, as its text) took its own width in the middle and started
   100 px right of the text (744): the full width */
@media screen and (max-width: 769px) {
    body.zr-development #fullpage .slide.our-works .item > h2 {
        -ms-flex-item-align: stretch;
        align-self: stretch
    }
}

/* ---------- Stage 7.27 (user) ---------- */

/* support "Types of support" / "Advantages", computer and tablet (the tab buttons): switching a tab moved the title, the
   buttons and the text up / down - the sections have different heights (the theme shows only the active one, display:none
   for the others) and the block stands in the middle of the slide (+ zrFit scaled it again). All sections stand in one grid
   cell now - the place of the tallest one, the others invisible: nothing moves. The title of a section is not shown under the
   buttons (the active button names it); phones (no buttons, every section open) keep the titles */
@media screen and (min-width: 769px) {
    body.zr-support #fullpage .slide.advantages .tabs-section,
    body.zr-support #fullpage .slide.how-it-works .tabs-esction {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        -ms-flex-align: start;
        align-items: start
    }

    body.zr-support #fullpage .slide.advantages .tabs-section > .tab-anchor,
    body.zr-support #fullpage .slide.how-it-works .tabs-esction > .tab-anchor {
        display: block !important;
        grid-area: 1 / 1;
        visibility: hidden
    }

    body.zr-support #fullpage .slide.advantages .tabs-section > .tab-anchor.active-tab,
    body.zr-support #fullpage .slide.how-it-works .tabs-esction > .tab-anchor.active-tab {
        visibility: visible
    }

    body.zr-support #fullpage .slide.advantages .tabs-section > .tab-anchor > .title,
    body.zr-support #fullpage .slide.how-it-works .tabs-esction > .tab-anchor > .title {
        display: none !important
    }
}

/* development "Our development process": the first showing of the slide lights the stages up one by one as on hover (js:
   .zr-lit on the item; .zr-lit-run on the list only while it runs - the smooth fades in and out, the hover stays as it was) */
body.zr-development .slide.how-we-do .list.zr-lit-run > .item > h3 {
    -webkit-transition: color .6s ease;
    transition: color .6s ease
}

body.zr-development .slide.how-we-do .list.zr-lit-run > .item > h3 > .list-icon::before,
body.zr-development .slide.how-we-do .list.zr-lit-run > .item > h3 > .list-icon::after {
    -webkit-transition: opacity .6s ease;
    transition: opacity .6s ease
}

body.zr-development .slide.how-we-do .list > .item.zr-lit > h3 {
    color: #ff553a
}

body.zr-development .slide.how-we-do .list > .item.zr-lit > h3 > .list-icon::before {
    opacity: 0
}

body.zr-development .slide.how-we-do .list > .item.zr-lit > h3 > .list-icon::after {
    opacity: 1
}

/* /our-works/, /articles/: the SEO text did not reach the right end (user) - the centered-paragraph rule (.text-center: balanced
   lines, 7.26) made its lines shorter. Normal lines, on computers / tablets justified - every line to the end, the last one left */
.zr-list-page .all-project .container > div[style] p,
.zr-services .zr-services__inner > div[style] p {
    text-wrap: wrap !important
}

@media screen and (min-width: 769px) {
    .zr-list-page .all-project .container > div[style] p,
    .zr-services .zr-services__inner > div[style] p {
        text-align: justify !important;
        -moz-text-align-last: left;
        text-align-last: left
    }
}

/* T-0001 B10 (conversion test): phones - one main button on the first screen (Q3, Саша 2026-10-07), the theme buttons as
   they are: home "Get a Free Quote" (the theme hid the second .item of the hero on phones, and the first-screen rule above
   hid its buttons while fullpage is off), development "Let's Build Your Website" (theme class mob-hide). The second button
   of home ("See Our Work") stays hidden; development block 1 "How We Deliver Projects" is shown since G1. Nothing changes
   at >= 769 px */
@media screen and (max-width: 768px) {
    #index-anchor .services .container:not(.right) .item-3 {
        display: block !important
    }

    body:not(.fp-viewing-index) #index-anchor .services .container:not(.right) .item-3 .btn,
    body:not(.fp-viewing-index) #index-anchor .services .container:not(.right) .item-3 .btn:after {
        visibility: visible !important
    }

    /* full colour (the theme shows it at 0.5 until the mouse is over it - phones have no hover); right under the title
       (the <br> of the text is for computers) */
    #index-anchor .services .container:not(.right) .item-3 .btn {
        opacity: 1
    }

    #index-anchor .services .container:not(.right) .item-3 br {
        display: none
    }

    /* G1 (Саша): like on the computer - block 1 shows its own "How We Deliver Projects" too */
    body.zr-development #fullpage .slide.home-page .btn.mob-hide,
    body.zr-development #our-developers-anchor .btn.mob-hide {
        display: inline-flex !important
    }
}

/* T-0007 BUG-1: below 336 px the button is 280-290 px wide and its 24 px label (257 px) wrapped into 2 lines of the theme's
   56 px line-height and stuck out of the frame. Without the theme's 15 px side padding the label fits on one line (276 px
   inside at 320); same font, frame and height, the label stays centred */
@media screen and (max-width: 335px) {
    body.zr-development #fullpage .slide.home-page .btn.mob-hide,
    body.zr-development #our-developers-anchor .btn.mob-hide {
        padding-left: 0;
        padding-right: 0
    }
}

/* the big logo of the home first screen 40 px lower so the button does not cover it (there were 100-160 px free between
   the logo and the text under it). Only on the tall screens: above the 320/480 proportion the theme moves the logo down
   itself (margin-top 28%), landscape phones (fixed 560 px first screen) have the room already */
@media screen and (max-width: 768px) and (max-aspect-ratio: 2/3) {
    #index-anchor .red-logo svg {
        transform: translateY(40px)
    }
}

/* ---------- T-0012 (user) ---------- */
/* development "What We Build": the H3 right after the list got 0 px (the theme gives only p + h3 its 2vw) - the same gap */
body.zr-development .slide .elements-text .item ul.list + h3 {
    margin-top: 2vw
}

/* development "How We Work": the closing line was glued to the 6 stages - the same 50 px as between the intro and the list */
body.zr-development .slide.how-we-do .list + p {
    margin-top: 50px
}

/* support "How We Price": the question H3 was glued to the paragraph above - the theme's p + h3 gap */
body.zr-support #fullpage .slide.why-us .text-section p + h3 {
    margin-top: 2vw
}

/* contacts: the map taller (240/260 -> 320 px) on computers; phones keep 200 px */
@media screen and (min-width: 770px) {
    .zr-contact__map iframe {
        height: 320px
    }
}

/* phones (T-0012 qa B1, B2): "How We Price" - 2vw is only 8 px at 390, the question H3 gets the desktop 26 px;
   "After launch..." - the theme's inline-block link wrapped as a block and left the closing "." alone on a line */
@media screen and (max-width: 768px) {
    body.zr-support #fullpage .slide.why-us .text-section p + h3 {
        margin-top: 26px
    }

    body.zr-development .slide.how-we-do .list + p a {
        display: inline
    }
}

/* development "Projects Built by Our Team" (T-0012): the theme puts 18vh (138-194 px) above the first paragraph - the gap
   under the title becomes the H2's 18 px, as on the other slides. Computers only (the theme rule is >= 951 px) */
@media screen and (min-width: 951px) {
    body.zr-development #fullpage .slide.our-works .elements-text .item > h2 + p {
        margin-top: 0
    }
}

/* ---------- T-0013 C1 (studio): fuller texts on /development/ and /support/ ---------- */
/* support "Platforms We Support": 4 own generic icons (code, cart, page, bag) in the style of the theme set; the tab titles get
   the icon of their platform (the theme gave them by position, the order differs per language) */
.list-link .item > .list-icon#pf-code::before { background-image: url(../image/store-page/icons/pf-code.svg) }
.list-link .item > .list-icon#pf-bag::before { background-image: url(../image/store-page/icons/pf-bag.svg) }
.list-link .item > .list-icon#pf-page::before { background-image: url(../image/store-page/icons/pf-page.svg) }
.list-link .item > .list-icon#pf-cart::before { background-image: url(../image/store-page/icons/pf-cart.svg) }
.list-link .item.active > .list-icon#pf-code::after, .list-link .item:hover > .list-icon#pf-code::after,
body.zr-support #fullpage .slide.advantages .tabs-section .zr-pf-laravel .title::after { background-image: url(../image/store-page/icons/pf-code-red.svg) }
.list-link .item.active > .list-icon#pf-bag::after, .list-link .item:hover > .list-icon#pf-bag::after,
body.zr-support #fullpage .slide.advantages .tabs-section .zr-pf-shopify .title::after { background-image: url(../image/store-page/icons/pf-bag-red.svg) }
.list-link .item.active > .list-icon#pf-page::after, .list-link .item:hover > .list-icon#pf-page::after,
body.zr-support #fullpage .slide.advantages .tabs-section .zr-pf-wordpress .title::after { background-image: url(../image/store-page/icons/pf-page-red.svg) }
.list-link .item.active > .list-icon#pf-cart::after, .list-link .item:hover > .list-icon#pf-cart::after,
body.zr-support #fullpage .slide.advantages .tabs-section .zr-pf-opencart .title::after { background-image: url(../image/store-page/icons/pf-cart-red.svg) }

/* development "How We Work": the "After launch" line is a quiet hint under a thin line (the look of the texts under the lists) */
body.zr-development #fullpage .slide.how-we-do .elements-text .item > p.zr-hint {
    margin-top: 16px !important;
    padding-top: 14px;
    border-top: 1px solid #ececec;
    font-size: 14px !important;
    line-height: 23px !important;
    color: #6e6e6e
}

body.zr-development .slide.how-we-do p.zr-hint a {
    display: inline
}

/* development "Platforms" (new slide, the text markup of "What We Build" without its picture and background): the four platforms in 2 columns */
/* the picture of "What We Build" reaches 20vw into the next slide (theme: right -20vw) - the text starts after it, as the theme
   did for "How We Work" when that slide came next (its column was 80 % at the right) */
@media screen and (min-width: 769px) {
    body.zr-development #fullpage .slide.zr-platforms-slide .container {
        -ms-flex-pack: end;
        justify-content: flex-end
    }

    body.zr-development #fullpage .slide.zr-platforms-slide .text-slide {
        -ms-flex: 0 1 80%;
        flex: 0 1 80%;
        max-width: 80%
    }
}

body.zr-development .zr-platforms {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 48px
}

body.zr-development .zr-platforms__item > h3 {
    margin-top: 2vw
}

@media screen and (max-width: 768px) {
    body.zr-development .zr-platforms {
        grid-template-columns: minmax(0, 1fr)
    }

    body.zr-development .zr-platforms__item > h3 {
        margin-top: 26px
    }
}

/* support "What Website Maintenance Includes": 8 cards - 4 columns x 2 rows on computers (3 columns gave 3 rows, the last one
   half empty); the orange card stays in the 2nd column */
@media screen and (min-width: 951px) {
    body.zr-support #fullpage .slide.our-team .our-team-slider {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    body.zr-support #fullpage .slide.our-team .our-team-slider .item:nth-child(3n+2) {
        background: #323232
    }

    body.zr-support #fullpage .slide.our-team .our-team-slider .item:nth-child(4n+2) {
        background: linear-gradient(119.36deg, #ff5228 0%, #ff4007 100%)
    }

    /* the compact card of the 769-950 px windows (4 narrower cards in a row) */
    body.zr-support #fullpage .slide.our-team .our-team-slider {
        gap: 16px
    }

    body.zr-support #fullpage .slide.our-team .our-team-slider .item {
        padding: 20px 16px !important
    }

    body.zr-support #fullpage .slide.our-team .our-team-slider .item .title {
        font-size: 20px !important;
        line-height: 25px !important
    }

    body.zr-support #fullpage .slide.our-team .our-team-slider .item .text p {
        font-size: 14px !important;
        line-height: 21px !important
    }
}

/* development "How We Work" (T-0013): the fuller step texts - the column of the stages uses the whole width of the frame on
   computers (was 80 %: the left fifth was the room for the picture of "What We Build"; Platforms comes next now), so the
   stage texts take 2-3 lines instead of 3-4 */
@media screen and (min-width: 952px) {
    body.zr-development #fullpage .slide.how-we-do .container .elements-text {
        max-width: 100%
    }
}

/* support "How We Price" (T-0013): three questions now - the gap above each question 18 px (2vw = 27 px at 1366) */
@media screen and (min-width: 769px) {
    body.zr-support #fullpage .slide.why-us .text-section p + h3 {
        margin-top: 18px
    }
}

/* development "How We Work" (T-0013): the fuller texts - on windows up to 740 px high the smaller gaps above and between the
   stages of the low windows (above), not only up to 620 px */
@media screen and (min-width: 952px) and (max-height: 740px) {
    .zr-development #fullpage .slide.how-we-do .list {
        padding-top: 4px !important
    }

    .zr-development #fullpage .slide.how-we-do .list > * {
        margin-top: 16px !important
    }
}

/* /services/ «How to start» (T-0013 C2): a lead and 4 real steps instead of one inline paragraph - the grey rounded card
   of the text under the page (#f7f7f7, 16 px), the number in the site red, the title in the card-title font; 4 in a row,
   2 on 770-1100 px, 1 on phones */
.zr-services .zr-services__steps {
    counter-reset: zr-step;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    list-style: none;
    margin: 0 0 40px;
    padding: 0;
    text-align: left
}

.zr-services .zr-services__steps > li {
    counter-increment: zr-step;
    box-sizing: border-box;
    margin: 0;
    padding: 24px;
    background: #f7f7f7;
    border-radius: 16px;
    font-size: 16px;
    line-height: 24px;
    color: #555
}

.zr-services .zr-services__steps > li::before {
    content: counter(zr-step);
    display: block;
    font-family: Avenir Next Demi, sans-serif;
    font-size: 28px;
    line-height: 34px;
    color: #ff553a;
    margin-bottom: 8px
}

.zr-services .zr-services__steps > li > strong {
    display: block;
    font-family: Avenir Next Demi, sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 26px;
    color: #323232;
    margin-bottom: 8px
}

@media screen and (max-width: 1100px) {
    .zr-services .zr-services__steps {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media screen and (max-width: 769px) {
    .zr-services .zr-services__steps {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        margin-bottom: 28px
    }

    .zr-services .zr-services__steps > li {
        padding: 20px
    }
}

/* /design/ «How We Design» (T-0013 C3): the fuller text (lead, 4 steps, Design with Development) - the text column takes
   the free room up to the illustration at the right (the empty second column of the theme gets less), same type */
@media screen and (min-width: 769px) {
    body.zr-design #fullpage .slide.what-we-do .container > .text-slide {
        flex-grow: 1.5
    }
}

/* /design/ (T-0013 C3): the fuller texts - on windows up to 800 px high smaller gaps between the steps of «How We Design»
   and around the list of «What We Design» (the type stays) */
@media screen and (min-width: 769px) and (max-height: 800px) {
    body.zr-design #fullpage .slide.what-we-do .elements-text .item > h2,
    body.zr-design #fullpage .slide.how-we-do .elements-text .item > h2 {
        margin-bottom: 12px !important
    }

    body.zr-design #fullpage .slide.what-we-do .elements-text .item > p + p {
        margin-top: 6px !important
    }

    body.zr-design #fullpage .slide.what-we-do .elements-text .item > h3 {
        margin-top: 14px !important
    }

    body.zr-design #fullpage .slide.how-we-do .elements-text .item > ul.list {
        margin: 8px 0 !important
    }
}

/* /articles/ (T-0013 C3): the topics in the SEO text under the list are a real list - the type of its paragraphs, a quiet bullet */
.zr-list-page .all-project .container > div[style] ul {
    margin: 6px 0 12px !important;
    padding-left: 20px !important;
    list-style: disc !important
}

.zr-list-page .all-project .container > div[style] li {
    list-style: disc !important;
    font-size: 14px !important;
    line-height: 23px !important;
    color: #6e6e6e !important;
    text-align: left !important
}

@media screen and (max-width: 769px) {
    .zr-list-page .all-project .container > div[style] li {
        line-height: 22px !important
    }
}

/* development "How We Work" (T-0014): the six stages as an aligned 3 x 2 grid on computers - the theme flex row put 4 in a
   row and 2 stretched under them on wide screens (1920; from about 1100 px); equal columns, the titles of a row on one line */
@media screen and (min-width: 1101px) {
    body.zr-development #fullpage .slide.how-we-do .list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        -webkit-column-gap: 32px;
        column-gap: 32px;
        margin-left: 0;
        margin-right: 0
    }

    body.zr-development #fullpage .slide.how-we-do .list > * {
        margin-left: 0;
        margin-right: 0;
        min-width: 0
    }
}

/* support "How We Price" (T-0014): no last lines of one or two words in the paragraphs */
body.zr-support #fullpage .slide.why-us .text-section p,
body.zr-support #fullpage .slide.why-us .text-section h3 {
    text-wrap: pretty
}

/* the answers are 2-3 lines: lines of even length (no 1-2 word last lines on wide screens either) */
@media screen and (min-width: 769px) {
    body.zr-support #fullpage .slide.why-us .text-section p,
    body.zr-support #fullpage .slide.why-us .text-section h3 {
        text-wrap: balance
    }
}

/* support "How Support Works" (T-0014): on computers the four steps open together as numbered cards in one row (the card
   of the site: white, 16 px corners, soft shadow; the number in the site red, the title with its icon, the text, the
   points) instead of the tabs with one picture; tablets and phones keep their layouts */
@media screen and (min-width: 1101px) {
    body.zr-support #fullpage .slide.how-it-works .zr-adv-pic,
    body.zr-support #fullpage .slide.how-it-works .list-link {
        display: none !important
    }

    body.zr-support #fullpage .slide.how-it-works > .fp-tableCell > .container {
        padding-right: calc(64px + clamp(20px, 9vw - 57px, 115.2px)) !important
    }

    body.zr-support #fullpage .slide.how-it-works > .fp-tableCell > .container > .text-section {
        width: 100%;
        max-width: none !important
    }

    body.zr-support #fullpage .slide.how-it-works > .fp-tableCell > .container > .text-section > h2,
    body.zr-support #fullpage .slide.how-it-works > .fp-tableCell > .container > .text-section > h3 {
        text-align: center !important
    }

    body.zr-support #fullpage .slide.how-it-works .wrap-tabs {
        display: block !important;
        margin: 0 !important
    }

    body.zr-support #fullpage .slide.how-it-works .tabs-esction {
        counter-reset: zr-hiw;
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        -ms-flex-align: stretch;
        align-items: stretch;
        gap: 24px;
        width: auto !important;
        max-width: none !important;
        margin: 32px 0 0 !important;
        padding: 0 !important
    }

    body.zr-support #fullpage .slide.how-it-works .tabs-esction > .tab-anchor {
        counter-increment: zr-hiw;
        position: relative;
        grid-area: auto;
        visibility: visible;
        display: block !important;
        opacity: 1 !important;
        -webkit-animation: none !important;
        animation: none !important;
        min-width: 0;
        margin: 0 !important;
        padding: 24px 24px 26px;
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 6px 18px rgba(0, 0, 0, .08)
    }

    body.zr-support #fullpage .slide.how-it-works .tabs-esction .tab-anchor::before {
        content: counter(zr-hiw);
        position: absolute;
        top: 18px;
        right: 22px;
        font-family: Avenir Next Demi, sans-serif;
        font-size: 28px;
        line-height: 34px;
        color: #ff553a
    }

    body.zr-support #fullpage .slide.how-it-works .tabs-esction > .tab-anchor > .title {
        font-size: 20px !important;
        line-height: 26px !important;
        min-height: 52px;
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-align: center;
        align-items: center;
        padding-left: 38px !important;
        padding-right: 28px !important;
        margin-bottom: 10px !important
    }

    body.zr-support #fullpage .slide.how-it-works .tabs-esction .title::after {
        width: 28px !important;
        height: 28px !important
    }

    body.zr-support #fullpage .slide.how-it-works .tabs-esction p {
        font-size: 15px !important;
        line-height: 23px !important
    }
}

/* home "Customers & Reviews" (T-0014): every review with its own client logo in the card row - no big block of logos at the
   left; the cards fill the frame in 2 columns (3 on wide screens), the cards of a row of the same height */
@media screen and (min-width: 951px) {
    #reviews-anchor .container .wrap-logo-link {
        display: none !important
    }

    #reviews-anchor .reviews-scroll .mCSB_container,
    #reviews-anchor .reviews-scroll:not(.mCustomScrollbar) {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(460px, 1fr));
        gap: 8px 16px
    }

    #reviews-anchor .reviews-scroll .wrap-item {
        display: -ms-flexbox;
        display: flex;
        min-width: 0
    }

    #reviews-anchor .reviews-scroll .wrap-item > .item {
        -ms-flex: 1;
        flex: 1;
        margin: 0
    }
}

/* design "Customer reviews" (T-0014 B1): like the home block - every review card with its client logo in the name row, no big
   client picture at the left on computers; the cards are wider and show the whole review (no lines cut at 6-8 lines) */
.zr-design #fullpage .slide.customer-reviews .customer-reviews-reviews .item .title {
    gap: 12px
}

.zr-review-logo {
    -ms-flex: 0 0 44px;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    overflow: hidden;
    background: #fff
}

.zr-review-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

@media screen and (min-width: 951px) {
    .zr-design #fullpage .slide.customer-reviews .container > .text-slide {
        display: none !important
    }

    .zr-design #fullpage .slide.customer-reviews .container > div:not(.text-slide) {
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        min-width: 0
    }

    .zr-design #fullpage .slide.customer-reviews .customer-reviews-reviews .item .desc + .text {
        display: block !important;
        -webkit-line-clamp: unset !important;
        line-clamp: none !important;
        overflow: visible !important;
        padding-bottom: 20px !important;
        margin-bottom: 0 !important
    }
}

/* T-0014 F4: below 951 px the 8-line clamp cut the restored full quotes (phones, 767-768) -> the whole quote shows */
@media screen and (max-width: 950px) {
    .zr-design #fullpage .slide.customer-reviews .customer-reviews-reviews .item .desc + .text {
        display: block !important;
        -webkit-line-clamp: unset !important;
        line-clamp: none !important;
        overflow: visible !important
    }
}

/* development "Platforms" (T-0014 F1) on laptops (lower than 800 px: 1366 x 768, 1280 x 720, 1024 x 768): the longer platform
   texts scaled the slide to 0.85 (0.64 at 1024) - wider columns, less room above the platform names, the text 16/24 px as the
   other laptop steps of the site */
@media screen and (min-width: 951px) and (max-height: 800px) {
    body.zr-development .zr-platforms {
        gap: 0 32px
    }

    body.zr-development .zr-platforms__item > h3 {
        margin-top: 16px
    }

    body.zr-development #fullpage .slide.zr-platforms-slide .zr-platforms__item > p {
        font-size: 16px !important;
        line-height: 24px !important
    }
}

/* home "Awards" (T-0014 F1): on 1366 px the UA / RU captions take 4 lines - the 3-line clamp cut "/ IT Рейтинг UA" with an
   ellipsis; from 1281 px the whole caption (4 lines) */
@media screen and (min-width: 1281px) {
    #awards-anchor .slick-slider .item h4 {
        -webkit-line-clamp: 4;
        line-clamp: 4
    }
}

/* T-0014 F2 (B7): the smaller type of zrFit (.zr-fit-tight) on the two slides that still scrolled inside the frame in tiny
   windows (776 x 535, 1366 x 400): it now reaches them, so zrFit scales them like their neighbours.
   development "Platforms": the laptop step of F1 (16/24 px) was stronger than the tight type; below 951 px the column takes the
   whole width (the "What We Build" picture ends left of the text there) and the gaps are smaller */
body.zr-development #fullpage .slide.zr-platforms-slide .zr-fit-tight .zr-platforms__item > p {
    font-size: 13px !important;
    line-height: 19px !important
}

body.zr-development #fullpage .slide.zr-platforms-slide .zr-fit-tight .zr-platforms {
    gap: 0 24px
}

body.zr-development #fullpage .slide.zr-platforms-slide .zr-fit-tight .zr-platforms__item > h3 {
    margin-top: 8px
}

@media screen and (min-width: 769px) and (max-width: 950px) {
    body.zr-development #fullpage .slide.zr-platforms-slide .zr-fit-tight .text-slide {
        -ms-flex: 0 1 100%;
        flex: 0 1 100%;
        max-width: 100%
    }
}

/* support "How Support Works" cards (T-0014 L1, from 1101 px): the tight type inside the cards too, lower titles and paddings */
@media screen and (min-width: 1101px) {
    body.zr-support #fullpage .slide.how-it-works .zr-fit-tight .tabs-esction {
        gap: 16px;
        margin-top: 16px !important
    }

    body.zr-support #fullpage .slide.how-it-works .zr-fit-tight .tabs-esction > .tab-anchor {
        padding: 14px 16px 16px
    }

    body.zr-support #fullpage .slide.how-it-works .zr-fit-tight .tabs-esction .tab-anchor::before {
        top: 10px;
        right: 14px;
        font-size: 22px;
        line-height: 28px
    }

    body.zr-support #fullpage .slide.how-it-works .zr-fit-tight .tabs-esction > .tab-anchor > .title {
        font-size: 16px !important;
        line-height: 21px !important;
        min-height: 42px;
        margin-bottom: 6px !important
    }

    body.zr-support #fullpage .slide.how-it-works .zr-fit-tight .tabs-esction p {
        font-size: 13px !important;
        line-height: 19px !important
    }
}

/* T-0014 F3: list bullets centred on the first line at every line-height (the theme put them at a fixed .8vw / 9px) */
@supports (top: 1lh) {
    ul.list li:after {
        top: .5lh !important;
        bottom: auto !important;
        transform: translateY(-50%)
    }
}

/* T-0014 F3: text links inside body text of the landings and simple pages - site orange, as in the articles
   (not buttons, menus, cards, tabs) */
#fullpage .slide p a:not(.btn):not([class]),
#fullpage .slide ul.list li a:not(.btn):not([class]),
.zr-simple p a:not([class]) {
    color: #ff553a;
    border-bottom-color: transparent
}

#fullpage .slide p a:not(.btn):not([class]):hover,
#fullpage .slide ul.list li a:not(.btn):not([class]):hover,
.zr-simple p a:not([class]):hover {
    border-bottom-color: #ff553a
}

/* ---------- T-0017: home first screen (Саша 2026-10-18: smaller logo, the text placed better) ----------
   Computers (>= 951 px): one text column on the left - H1, the lead (2 lines), both buttons in a row; the orange shape is
   smaller and stands on the right. Phones (<= 768 px): one centred column - small logo, H1, lead, the main button.
   769-950 px (tablets, H1 hidden by the theme) unchanged. Markup and texts unchanged (CSS order only).
   Rollback: ~/backups/2026-10-18-T-0017-before/ROLLBACK.md */
@media screen and (min-width: 951px) {
    /* the shape: 44vw -> 30vw high, centre moved from 50vw to 73vw (only while the first screen is shown - the theme's
       inline translateX(0) on leaving needs !important; leaving, it slides back to the middle as it grows) */
    body.fp-viewing-index #blotter {
        transform: translateX(23vw) !important
    }

    .fp-viewing-index #blotter .bg-logo {
        height: 30vw;
        max-height: 66vh
    }

    .fp-viewing-index #blotter .logo-blotter {
        max-height: 8.2vw
    }

    /* the text column: the two theme columns become one (their blocks in the order H1, lead, buttons) */
    #index-anchor .services {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -ms-flex-line-pack: center;
        align-content: center;
        -ms-flex-pack: start;
        justify-content: flex-start;
        max-width: calc(54vw - 84px)
    }

    #index-anchor .services > .container {
        display: contents
    }

    #index-anchor .services .item {
        max-width: none
    }

    #index-anchor .services .container .item-1 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%
    }

    #index-anchor .services .container.right .item-1 {
        -ms-flex-order: 1;
        order: 1
    }

    #index-anchor .services .container .item-3 {
        -ms-flex-order: 2;
        order: 2;
        margin: 1.6vw 1.2vw 0 0
    }

    #index-anchor .services .container.right .item-3 {
        margin-right: 0
    }

    #index-anchor .services .item h1 {
        padding-right: 0;
        margin-bottom: 1.4vw;
        opacity: 1
    }

    #index-anchor .services .container.right {
        text-align: left
    }

    #index-anchor .services .item p {
        font-size: max(16px, 1.3vw);
        line-height: 1.5;
        margin-bottom: 0;
        opacity: .7
    }

    #index-anchor .services .item p br,
    #index-anchor .services .item-3 br {
        display: none
    }

    /* the hero buttons compact (Саша: the theme's 22vw x 5vw were too big) - as wide as their text, the size of the
       home "more" buttons (.zr-home-more .btn) and the landing first-screen buttons */
    #index-anchor .services .btn {
        width: auto;
        min-width: 220px;
        max-width: none;
        height: 52px;
        padding: 0 28px;
        font-size: 17px;
        line-height: 48px;
        white-space: nowrap;
        opacity: 1
    }
}

@media screen and (max-width: 768px) {
    /* one column centred between the header and "scroll down": logo, H1, lead, button */
    #index-anchor > .center {
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-pack: center;
        justify-content: center;
        position: relative;
        padding: 64px 0 56px !important
    }

    #index-anchor > .center > .mob-section,
    #index-anchor > .center > .mob-section > .container {
        display: contents !important
    }

    #index-anchor .mob-section .middle-container {
        -ms-flex-order: 1;
        order: 1;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        margin-bottom: 3.5vh
    }

    #index-anchor .mob-section .red-logo {
        -ms-flex: 1;
        flex: 1;
        padding: 0
    }

    #index-anchor .mob-section .red-logo svg {
        display: block;
        height: 13vh !important;
        min-height: 64px;
        max-height: 150px;
        width: auto !important;
        max-width: none !important;
        margin: 0 auto !important;
        transform: none !important
    }

    #index-anchor .services.mob-hide {
        -ms-flex-order: 2;
        order: 2;
        position: relative;
        height: auto;
        min-height: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        -ms-flex-pack: start;
        justify-content: flex-start;
        width: 100%;
        max-width: 600px;
        margin: 0 auto
    }

    #index-anchor .services > .container {
        display: contents
    }

    #index-anchor .services .container.right .item-1 {
        -ms-flex-order: 1;
        order: 1
    }

    #index-anchor .services .container .item-3 {
        -ms-flex-order: 2;
        order: 2
    }

    #index-anchor .services .item h1 {
        font-size: 22px !important;
        line-height: 28px !important;
        margin: 0 0 12px
    }

    #index-anchor .services .item p {
        font-size: 15px !important;
        line-height: 22px !important;
        margin: 0 0 20px
    }

    #index-anchor .mob-section .scroll-down {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 12px
    }
}

/* T-0017: landscape phones (the theme's fixed 560 px first screen on a ~360 px high screen): the column from the top and a
   smaller logo, so the button stays on the first screen */
@media screen and (max-width: 768px) and (orientation: landscape) {
    #index-anchor > .center {
        -ms-flex-pack: start;
        justify-content: flex-start;
        padding-top: 72px !important
    }

    #index-anchor .mob-section .red-logo svg {
        height: 48px !important;
        min-height: 0
    }
}

/* T-0017: portrait tablets in the phone layout (600-768 px): the title and the text a step bigger */
@media screen and (min-width: 600px) and (max-width: 768px) {
    #index-anchor .services .item h1 {
        font-size: 28px !important;
        line-height: 36px !important
    }

    #index-anchor .services .item p {
        font-size: 17px !important;
        line-height: 26px !important
    }
}

/* T-0019 (1) support "How Support Works" cards (from 1101 px): compact - the number moves from the corner of the card into the
   title row (the icon at the left, the number at the right, both on the middle of the title), the titles / texts / points of
   the 4 cards in common rows (subgrid: the points start on one line, no tall empty bottoms), smaller text, paddings and gaps */
@media screen and (min-width: 1101px) {
    body.zr-support #fullpage .slide.how-it-works .tabs-esction {
        gap: 0 16px;
        margin-top: 24px !important
    }

    body.zr-support #fullpage .slide.how-it-works .tabs-esction > .tab-anchor {
        display: grid !important;
        grid-row: span 3;
        grid-template-rows: subgrid;
        row-gap: 0;
        align-content: start;
        padding: 18px 18px 14px
    }

    body.zr-support #fullpage .slide.how-it-works .tabs-esction .tab-anchor::before {
        content: none
    }

    body.zr-support #fullpage .slide.how-it-works .tabs-esction > .tab-anchor > .title {
        font-size: 18px !important;
        line-height: 23px !important;
        min-height: 0;
        padding-left: 36px !important;
        padding-right: 30px !important;
        margin-bottom: 8px !important
    }

    body.zr-support #fullpage .slide.how-it-works .tabs-esction > .tab-anchor > .title::before {
        content: counter(zr-hiw);
        position: absolute;
        top: 50%;
        right: 0;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        font-family: Avenir Next Demi, sans-serif;
        font-size: 24px;
        line-height: 28px;
        color: #c4c4c4 /* F2: a soft grey (the menu-foot dot grey), was the site orange */
    }

    body.zr-support #fullpage .slide.how-it-works .tabs-esction .title::after {
        width: 26px !important;
        height: 26px !important
    }

    body.zr-support #fullpage .slide.how-it-works .tabs-esction p {
        font-size: 14px !important;
        line-height: 21px !important;
        margin: 0 0 10px !important
    }

    body.zr-support #fullpage .slide.how-it-works .tabs-esction ul.list {
        margin: 0 !important
    }

    body.zr-support #fullpage .slide.how-it-works .tabs-esction ul.list li {
        font-size: 14px !important;
        line-height: 20px !important;
        margin: 0 0 4px !important
    }

    body.zr-support #fullpage .slide.how-it-works .zr-fit-tight .tabs-esction > .tab-anchor > .title::before {
        font-size: 20px;
        line-height: 24px
    }
}

/* T-0019 (2) development first screen: the H1 on 2 lines on laptops and computers (EN took 3 lines below ~1900 px, UA / RU at
   every width) - a smaller step of this H1 only, per language (the theme 3.08vw); the words stay */
@media screen and (min-width: 1101px) {
    body.zr-development #fullpage .slide.home-page h1 {
        font-size: 2.96vw
    }

    html[lang="uk"] body.zr-development #fullpage .slide.home-page h1 {
        font-size: 2.7vw
    }

    html[lang="ru"] body.zr-development #fullpage .slide.home-page h1 {
        font-size: 2.5vw
    }
}

/* T-0019 (3) development "Platforms": each platform title on one line on laptops (EN "Shopify Development: Themes, Apps,
   Integrations" took 2 lines below ~1700 px) - the H3 a step smaller with the column (a column is ~32.8vw), 22 px at most;
   windows up to 520 px high keep their own smaller steps */
@media screen and (min-width: 1101px) and (min-height: 521px) {
    body.zr-development #fullpage .slide.zr-platforms-slide .zr-platforms__item > h3 {
        font-size: max(17px, min(22px, 1.36vw)) !important
    }
}

/* T-0019 (4) design "What We Design": the big "Z" / "C O" of the next slide ("Our work" - its letters reach into this slide)
   lay solid under the list - while this slide is open they are a pale background, the list reads cleanly; on "Our work"
   they are bright again */
@media screen and (min-width: 769px) {
    .zr-design #fullpage .slide.our-work .anim-image {
        -webkit-transition: opacity .4s linear;
        transition: opacity .4s linear
    }

    .zr-design #fullpage .slide[data-anchor="what-we-do"].active ~ .slide.our-work .anim-image {
        opacity: .14
    }
}

/* T-0019 (5) /services/ "How to start": the step number on the line of the card title ("1.  Tell us"), not on its own line;
   F2: "1." in the size and line of the title (20 / 26 px, same font) - one baseline, the number in the site orange */
.zr-services .zr-services__steps > li::before {
    content: counter(zr-step) ".";
    float: left;
    margin: 0 8px 0 0;
    font-size: 20px;
    line-height: 26px
}

/* T-0020 D2 phones (<= 769 px, where libs.min.css centres h1/h2/h3): a title over left-aligned running text is left too;
   a header that is centred is centred as a whole (qa-mobile.md A1-A4, B1-B3) */
@media screen and (max-width: 769px) {
    body.zr-development #fullpage .slide.zr-platforms-slide .zr-platforms__item > h3,
    body.zr-design #fullpage .slide.what-we-do .elements-text .item > h3,
    body.zr-support #fullpage .slide.why-us .text-section > h3,
    body.zr-support #fullpage .slide.advantages .text-link > h2,
    body.zr-support #fullpage .slide.advantages .zr-slide-intro,
    body.zr-support #fullpage .slide.how-it-works .text-section > h2,
    body.zr-support #fullpage .slide.how-it-works .text-section > h3,
    main.zr-services .zr-services__cta .zr-services__steps-lead {
        text-align: left !important
    }

    body.zr-design #fullpage .slide.our-work .elements-text .item > .top > p {
        text-align: center !important
    }

    /* title -> first text 18 px as on the landings (it was 9-13 px on home, the lists and contacts) */
    body #services-anchor .zr-home-title,
    body #reviews-anchor .zr-home-title,
    body.zr-list-page .all-project .navigation .zr-home-title {
        margin-bottom: 17px !important
    }

    body #awards-anchor .arrow-news,
    body #news-anchor .arrow-news {
        margin-bottom: 15px !important
    }

    body #write-to-us-anchor .zr-home-title {
        margin-bottom: 16px !important
    }

    body .zr-contact .zr-home-title {
        margin-bottom: 18px !important
    }

    /* /services/: the line over the SEO text right under the cards - the gap before it was 96 px, the others 54 */
    main.zr-services .zr-services__inner > div[style] {
        margin-top: 0 !important
    }
}

/* T-0020 D2 /design/ "How we design" on tablets in portrait (fullpage on, 768 x 1024): the UA title runs to 4 lines and
   the last paragraph went 8 px below the screen - the gaps between the steps 20 px instead of 30 */
@media screen and (min-width: 700px) and (max-width: 769px) {
    html.fp-enabled body.zr-design #fullpage .slide.what-we-do .elements-text .item p + p {
        margin-top: 20px !important
    }
}

/* T-0022 A1 phones: a word longer than the screen broke out of its heading and the whole page scrolled sideways
   (/ru/privacy-policy/ H1 «конфиденциальности» 397 px wide at 30 px: +27 px at 390, +97 px at 320; UA +14 px at 320).
   Long words now wrap inside the heading; on the legal/contact pages with a hyphen where the browser can hyphenate. */
@media screen and (max-width: 769px) {
    h1,
    h2,
    h3,
    .h2,
    .zr-home-title,
    .zr-info {
        overflow-wrap: break-word
    }

    .zr-info .zr-home-title {
        -webkit-hyphens: auto;
        hyphens: auto
    }
}

/* T-0022 A1 the open phone menu fills the visible screen also when the address bar hides or comes back:
   magnific popup sets the height from $(window).height(), which Chrome Android keeps at the "bar shown" size
   (gap at the bottom). 100dvh follows the bar; browsers without dvh / :has keep the old height. */
.mfp-wrap:has(#menu-popup) {
    height: 100dvh !important
}

@media (hover: none) {
    .main-navigation {
        height: 100dvh
    }
}