@font-face {
    font-family: Mulish;
    src: url('../fonts/Mulish-VariableFont_wght.ttf');
}

@font-face {
    font-family: Bebas Neue Cyrillic;
    src: url('../fonts/Bebas\ Neue\ Cyrillic.ttf');
}

@font-face {
    font-family: BebasNeue-Regular;
    src: url('../fonts/BebasNeue-Regular.ttf');
}

/* styles for all of components start */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: rgba(250, 250, 250, 1);
    font-family: Mulish;
}

.section {
    width: 100%;
    padding: 0 130px;
}

button {
    font-family: Mulish;
    outline: none;
    cursor: pointer;
    border: none;
}

.yellow-btn {
    white-space: nowrap;
    background: rgba(255, 187, 4, 1);
    font-weight: 600;
    font-size: 20px;
    color: rgba(30, 30, 30, 1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 22px 40px;
    position: relative;
}

.all-services-link {
    display: flex;
    justify-content: center;
    padding-top: 20px;
    padding-bottom: 70px;
}

.all-services-link .yellow-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.services-catalog {
    padding-top: 70px;
    padding-bottom: 100px;
}

.services-catalog__lead {
    max-width: 760px;
    margin: 20px 0 45px;
    font-size: 18px;
    line-height: 1.5;
}

.services-catalog__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.services-catalog__group {
    padding: 28px 24px;
    border-radius: 20px;
    background: #f5f5f5;
}

.services-catalog__group h2 {
    margin: 0 0 20px;
    font-size: 22px;
    line-height: 1.25;
}

.services-catalog__group ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.services-catalog__group li + li {
    margin-top: 13px;
}

.services-catalog__group a {
    color: #1e1e1e;
    line-height: 1.35;
    text-decoration: none;
}

.services-catalog__group a:hover {
    text-decoration: underline;
}

.service-detail {
    padding-top: 70px;
    padding-bottom: 100px;
}

.service-detail__back {
    display: inline-block;
    margin-bottom: 30px;
    color: #1e1e1e;
}

.service-detail__content {
    max-width: 850px;
    margin: 30px 0;
    font-size: 18px;
    line-height: 1.6;
}

/* Service detail: Figma node 50:451 */
.service-page__hero {
    padding-top: 54px;
}

.site-breadcrumbs {
    padding-top: 58px;
}

.site-breadcrumbs__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    min-height: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
}

.site-breadcrumbs__link {
    color: #646464;
    text-decoration: none;
}

.site-breadcrumbs__item:first-child .site-breadcrumbs__link {
    color: #252525;
    font-weight: 700;
}

.site-breadcrumbs__current {
    color: #9b9b9b;
}

.site-breadcrumbs__separator {
    display: block;
    width: 5px;
    height: 8px;
}

.service-page__hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 737px) minmax(430px, 520px);
    justify-content: space-between;
    gap: 42px;
    padding-top: 54px;
    padding-bottom: 60px;
}

.service-page__intro {
    padding-top: 0;
}

.service-page__intro h1 {
    max-width: 650px;
    margin: 0;
}

.service-page__lead {
    max-width: 615px;
    margin-top: 23px;
    color: rgba(30, 30, 30, 1);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
}

.service-page__actions {
    display: flex;
    gap: 22px;
    margin-top: 28px;
}

.service-page__facts {
    overflow: hidden;
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 9px 26px rgba(0, 0, 0, 0.05);
}

.service-page__fact {
    min-height: 95px;
    padding: 22px 30px;
    display: flex;
    align-items: center;
    gap: 34px;
    border-bottom: 1px solid #e7e7e7;
}

.service-page__fact:last-child {
    border-bottom: 0;
}

.service-page__fact-icon {
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d8d8d8;
    border-radius: 6px;
}

.service-page__fact-icon img {
    width: 23px;
    height: 23px;
    object-fit: contain;
}

.service-page__fact-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.service-page__fact-label {
    color: #3a3a3a;
    font-size: 12px;
    font-weight: 400;
    line-height: 17px;
}

.service-page__fact-value {
    color: #151515;
    font-size: 16px;
    line-height: 28px;
}

.service-page__work {
    padding-top: 6px;
    padding-bottom: 66px;
}

.service-page__work .section {
    padding-top: 21px;
    border-top: 1px solid #e6e6e6;
}

.service-page__work h2 {
    margin: 0;
    font-size: 29px;
    font-weight: 900;
    line-height: 29px;
}

.service-page__heading-line {
    width: 50px;
    height: 3px;
    display: block;
    margin-top: 14px;
    background: #ffb800;
}

.service-page__work-list {
    margin: 23px 0 0;
    padding: 0;
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(5, 18px);
    column-gap: 72px;
    row-gap: 16px;
    list-style: none;
}

.service-page__work-list li {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 16px;
    font-weight: 700;
    line-height: 18px;
    white-space: normal;
}

.service-page__work-list img {
    width: 11px;
    height: 12px;
    flex: 0 0 11px;
    object-fit: contain;
}

.service-page__text {
    padding: 54px 0 72px;
    border-top: 1px solid #e6e6e6;
}

.service-page__text-content {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.65;
}

.service-page__text-content > * {
    max-width: 960px;
}

.service-page__text-content p {
    margin-bottom: 15px;
}

.service-page__text-content ul {
    padding-left: 20px;
}

.politika-page .text ul {
    padding-left: 20px;
}

.html-sitemap {
    padding-top: 70px;
    padding-bottom: 100px;
}

.html-sitemap__section {
    margin-top: 48px;
}

.html-sitemap__section h2 {
    margin-bottom: 24px;
    font-size: 32px;
}

.html-sitemap__list {
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px 32px;
    list-style: none;
}

.html-sitemap__list--pages {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.html-sitemap__list--services {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.html-sitemap__list a {
    color: #252525;
    font-size: 16px;
    line-height: 1.4;
    text-decoration: none;
}

.html-sitemap__list a:hover {
    color: #c58b00;
}

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

.about-company__image {
    float: right;
    width: 42%;
    max-width: 560px;
    height: auto;
    margin: 0 0 28px 40px;
    border-radius: 24px;
}

.about-company__content {
    margin-top: 48px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.65;
}

.about-company__content::after {
    content: "";
    display: block;
    clear: both;
}

.about-company__content p {
    margin-bottom: 20px;
}

.about-company__content p:last-child {
    margin-bottom: 0;
}

.service-page__faq {
    padding-top: 70px;
    padding-bottom: 70px;
}

.service-page__related {
    padding-top: 30px;
    padding-bottom: 100px;
}

.service-page__related-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 36px;
}

.service-page__related-list a {
    padding: 14px 20px;
    border-radius: 10px;
    background: #f1f1f1;
    color: #1e1e1e;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .2s ease;
}

.service-page__related-list a:hover {
    background: #ffbb04;
}

@media (max-width: 1000px) {
    .service-page__hero-grid {
        grid-template-columns: 1fr;
    }

    .service-page__facts {
        max-width: 620px;
    }

    .service-page__work-list {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
    }
}

@media (max-width: 600px) {
    .site-breadcrumbs {
        padding-top: 30px;
    }

    .service-page__hero {
        padding-top: 30px;
    }

    .service-page__hero-grid {
        padding-top: 36px;
    }

    .service-page__actions {
        flex-direction: column;
    }

    .service-page__actions .yellow-btn,
    .service-page__actions .white-btn {
        width: 100%;
    }

    .service-page__fact {
        padding: 20px;
        gap: 20px;
    }

    .service-page__work-list {
        grid-template-columns: 1fr;
    }

    .service-page__work-list li {
        white-space: normal;
    }
}

@media (max-width: 1100px) {
    .services-catalog__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .services-catalog__grid {
        grid-template-columns: 1fr;
    }

    .services-catalog {
        padding-top: 40px;
    }
}

.btn-with-arrow::before {
    content: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="9" height="10" viewBox="0 0 9 10" fill="none"><path d="M0.409123 8.00531C0.11623 8.29821 0.11623 8.77308 0.409123 9.06597C0.702016 9.35887 1.17689 9.35887 1.46978 9.06597L0.409123 8.00531ZM8.76052 1.46458C8.76052 1.05036 8.42473 0.714577 8.01052 0.714577L1.26052 0.714577C0.846307 0.714577 0.510521 1.05036 0.510521 1.46458C0.510521 1.87879 0.846307 2.21458 1.26052 2.21458H7.26052V8.21458C7.26052 8.62879 7.59631 8.96458 8.01052 8.96458C8.42473 8.96458 8.76052 8.62879 8.76052 8.21458L8.76052 1.46458ZM1.46978 9.06597L8.54085 1.99491L7.48019 0.934247L0.409123 8.00531L1.46978 9.06597Z" fill="%231E1E1E"/></svg>');
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 21px;
}

.white-btn {
    background: rgba(245, 245, 245, 1);
    border-radius: 10px;
    font-size: 20px;
    font-weight: 600;
    padding: 22px 40px;
    position: relative;
    white-space: nowrap;
    text-decoration: none;
    color: black;

}

.black-btn {
    padding: 22px 40px;
    background-color: rgba(30, 30, 30, 1);
    border-radius: 10px;
    color: #fff;
    font-weight: 600;
    font-size: 20px;
}

.title {
    line-height: 100%;
    font-size: 90px;
    font-weight: 400;
    color: rgba(30, 30, 30, 1);
    font-family: Bebas Neue Cyrillic;
    text-transform: uppercase;
    z-index: 1;
}

.title span {
    width: auto;
    display: inline-block;
    position: relative;
    z-index: 1;
}

.title span::after {
    content: '';
    width: 100%;
    height: 35px;
    position: absolute;
    left: 0px;
    bottom: 0px;
    z-index: 0;
    background: rgba(255, 187, 4, 1);
    border-radius: 10px;
    mix-blend-mode: multiply;
}

.swiper {
    width: 100%;
}

.burger-btn {
    display: none;
}


/* styles for all of components end */


/* head start */

.head-cont {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 130px;
}

.head-cont-block {
    width: 100%;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(55, 52, 53, 1);
    border-radius: 10px;

    a {
        svg {
            transition: 0.4s;
        }

        &:hover {
            svg {
                fill: #ffba03;
                stroke: #ffba03;
            }
        }
    }
}

.head-cont-block div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.head-cont-block img {
    width: 20px;
    height: 20px;
    fill: #6E6C6C;
}


.head-cont-block img path {
    fill: #6E6C6C;
}

.phone-contact {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.phone-contact__trigger {
    display: inline-flex;
}

.phone-contact__tooltip {
    position: absolute;
    top: calc(100% + 14px);
    right: -12px;
    z-index: 1000;
    display: flex;
    width: max-content;
    min-width: 220px;
    padding: 16px 18px;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 35px rgba(30, 30, 30, 0.18);
    color: #1e1e1e;
    font-size: 14px;
    line-height: 1.35;
    opacity: 0;
    visibility: hidden;
    pointer-events: auto;
    user-select: text;
    transform: translateY(-6px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}

.phone-contact__tooltip::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 100%;
    width: 100%;
    height: 14px;
}

.phone-contact__tooltip::before {
    content: "";
    position: absolute;
    right: 16px;
    bottom: 100%;
    border-right: 8px solid transparent;
    border-bottom: 9px solid #fff;
    border-left: 8px solid transparent;
}

.phone-contact__tooltip > a {
    color: inherit;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.phone-contact:hover .phone-contact__tooltip,
.phone-contact:focus-within .phone-contact__tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.footer-contacts .phone-contact__tooltip {
    top: auto;
    bottom: calc(100% + 14px);
    transform: translateY(6px);
}

.footer-contacts .phone-contact__tooltip::before {
    top: 100%;
    bottom: auto;
    border-top: 9px solid #fff;
    border-right: 8px solid transparent;
    border-bottom: 0;
    border-left: 8px solid transparent;
}

.footer-contacts .phone-contact__tooltip::after {
    top: 100%;
    bottom: auto;
}

.footer-contacts .phone-contact:hover .phone-contact__tooltip,
.footer-contacts .phone-contact:focus-within .phone-contact__tooltip {
    transform: translateY(0);
}

@media (max-width: 1000px) {
    .phone-contact__tooltip {
        display: none;
    }
}

.header {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header nav {
    position: relative;
}

.header nav > ul {
    display: flex;
    align-items: center;
    gap: 16px;
    list-style: none;
}

header nav button {
    display: none !important;
}

.navbar-dropdown {
    list-style: none;
    z-index: 1;
}

.header nav li {
    width: fit-content;
    padding: 16px 20px;
    background: #fff;
    border-radius: 10px;
    transition: .3s;
}


.header nav > ul > li {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    background: rgba(245, 245, 245, 1);
}

.header nav > ul > li:hover {
    color: #fff;
    background: rgba(55, 52, 53, 1);
}

.header nav > ul > li:hover > a {
    color: #fff;
}

.header nav > ul > li svg path {
    transition: .3s;
}

.header nav > ul > li:hover svg path {
    fill: #fff;
}

.header nav li,
.header nav a {
    font-size: 18px;
    font-weight: 600;
    color: rgba(30, 30, 30, 1);
    text-decoration: none;
    cursor: pointer;
}

.navbar-dropdown {
    transition: .3s;
    width: 100%;
    padding: 20px;
    background: rgba(55, 52, 53, 1);
    border-radius: 10px;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    gap: 10px;
    display: flex;
    flex-direction: column;
    backface-visibility: hidden;
    transform-origin: top;
    transform: rotateX(180deg);
    z-index: 999;
}

.navbar-services:hover .navbar-dropdown {
    transform: rotateX(0);
}

/* 
header nav>ul>li.active-li .navbar-dropdown {
    transform: rotateX(0);
} */

/* head end */

/* intro start */

.intro {
    padding-top: 150px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.intro-block {
    display: flex;
    position: relative;
}

.intro-block img {
    width: 100%;
    height: 810px;
}

h1 {
    font-size: 110px;
    font-weight: 400;
    font-family: Bebas Neue Cyrillic;
    color: rgba(30, 30, 30, 1);
    z-index: 2;
}

.intro h1 span {
    width: 425px;
    position: relative;
}

.intro h1 span::after {
    content: '';
    width: 100%;
    height: 35px;
    position: absolute;
    left: 0px;
    bottom: 0px;
    z-index: -1;
    background: rgba(255, 187, 4, 1);
    border-radius: 10px;
}

.intro-content {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    gap: 15px;
}

.intro-content div {
    margin-top: 35px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.intro-content p {
    width: 417px;
    color: rgba(30, 30, 30, 0.5);
    font-size: 20px;
    font-weight: 600;
}

.intro-content span {
    color: rgba(30, 30, 30, 0.5);
    font-size: 16px;
    font-weight: 400;
}

/* intro end */

/* work-types start */

.work-types {
    display: flex;
    flex-direction: column;
    gap: 50px;
    padding: 150px 130px;
}

.work-types .title {
    max-width: 1100px;
}

.work-types-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.work-types-item {
    width: 100%;
    border-radius: 10px;
    background-image: url(../image/worktype1.jpeg);
    background-size: cover;
    position: relative;
}

.work-types-item:nth-of-type(2) {
    background-image: url(../image/worktype2.jpeg);
}

.work-types-item:nth-of-type(3) {
    background-image: url(../image/worktype3.jpeg);
}

.work-types-item::after {
    content: '';
    border-radius: 10px;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: linear-gradient(119.48deg, #1E1E1E 0.16%, rgba(30, 30, 30, 0) 101.31%);
}

.work-types-item > div {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    gap: 20px;
    padding: 30px 40px;
    position: relative;
    padding-right: 0;
    padding-bottom: 0;
    z-index: 1;
}

.work-types-item h2 {
    font-family: Bebas Neue Cyrillic;
    font-weight: 400;
    font-size: 50px;
    text-transform: uppercase;
    color: #fff;
}


.work-types-item ul {
    flex-grow: 1;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.work-types-item li {
    position: relative;
    font-weight: 600;
    font-size: 20px;
    padding-left: 21px;
    color: #fff;
}

.work-types-item li::before {
    content: '';
    width: 13px;
    height: 10px;
    background: url('../image/check.png');
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.work-types-item_button {
    background: #fff;
    padding: 10px 0 0 10px;
    border-radius: 10px 0 0 0;
    width: fit-content;
    align-self: flex-end;
    margin-right: -1px;
    margin-bottom: -1px;
}

.work-types-item_button a,
.page-type-item-bottom a {
    display: block;
    transition: .3s;
}

.work-types-item_button a:hover,
.page-type-item-bottom a:hover {
    background: rgba(255, 187, 4, 1);
}

/* work-types end */

/* portfolio start */

.portfolio {
    padding-bottom: 150px;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

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

.swiper-change-block {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.swiper-change-button {
    position: relative !important;
    width: 50px !important;
    height: 40px !important;
    border-radius: 10px;
    margin: 0 !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    background: rgba(235, 235, 235, 1);
    transition: .3s;
}

.swiper-change-button::after {
    display: none;
}

.swiper-change-button:hover {
    background: rgba(255, 187, 4, 1);
}

.swiper-change-block .swiper-pagination {
    width: fit-content !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    display: flex;
    align-items: center;
    gap: 10px;
}

.swiper-change-block .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: rgba(235, 235, 235, 1);
    opacity: 1;
}

.swiper-change-block .swiper-pagination-bullet-active {
    background: rgba(255, 187, 4, 1);
}

.work-slide {
    width: 100%;
    position: relative;
    height: 500px;
}

.work-name {
    padding: 10px;
    background: #fff;
    border-radius: 0 0 10px 0;
    position: absolute;
    left: 0;
    top: 0;
}

.work-name p {
    font-size: 30px;
    font-weight: 400;
    font-family: Bebas Neue Cyrillic;
    color: rgba(30, 30, 30, 1);
    text-transform: uppercase;
}

.work-slide img {
    max-width: 100%;
    border-radius: 10px;
}

/* portfolio end */

/* feedback start */

.feedback {
    width: 100%;
    padding: 100px 270px;
    background: rgba(245, 245, 245, 1);
}

.feedback-cont {
    display: flex;
    align-items: center;
    gap: 280px;
}

.feedback-left {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.dev-feedback-cont {
    gap: 20px;
}

.dev-feedback {
    padding-left: 100px;
}

.dev-feedback-cont .feedback-left {
    position: relative;
}

.dev-feedback-cont .feedback-left div span {
    position: absolute;
    width: 55%;
    top: 215px;
    left: 320px;
}

.dev-feedback-cont .title {
    white-space: pre-line;
}

.dev-feedback-cont .feedback-right {
    width: 540px;
    flex-shrink: 0;
}

.feedback p {
    color: rgba(30, 30, 30, 1);
    font-size: 24px;
    font-weight: 600;
}

.feedback-left > div span {
    color: rgba(30, 30, 30, 0.5);
    font-weight: 400;
    font-size: 20px;
}

.feedback-left > div {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.feedback-right {
    background: rgba(240, 240, 240, 1);
    border-radius: 10px;
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}


.feedback-right span {
    color: rgba(30, 30, 30, 0.5);
}

.feedback-right label {
    color: rgba(30, 30, 30, 0.5);
    font-weight: 400;
    font-size: 18px;
}

.feedback-form-top {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.feedback-form-top input {
    width: 100%;
}

.agreement-checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
}

.agreement-checkbox-control {
    display: inline-flex;
    flex: 0 0 auto;
}

.agreement-checkbox-text a {
    color: inherit;
    text-decoration: underline;
}

.agreement-check:invalid + .custom-checkbox {
    box-shadow: 0 0 0 1px rgba(180, 40, 40, 0.15);
}

.agreement-check[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.agreement-check[type="checkbox"]:focus + .custom-checkbox {
    outline: 2px solid rgba(30, 30, 30, 0.75);
    outline-offset: 2px;
}

.custom-checkbox {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 187, 4, 1);
    border-radius: 4px;
    position: relative;
    cursor: pointer;
}

.custom-checkbox::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background-color: rgba(255, 187, 4, 1);
    border-radius: 50%;
    opacity: 0;
}

.agreement-check[type="checkbox"]:checked + .custom-checkbox::after {
    opacity: 1;
}

.feedback-input-item {
    position: relative;
}

.feedback-input-item span {
    position: absolute;
    top: 20px;
    left: 20px;
    color: rgba(30, 30, 30, 0.5);
    font-size: 16px;
    font-weight: 400;
}

.feedback-form-top input,
.feedback-form-top textarea {
    padding: 46px 20px 20px 20px;
    background: rgba(235, 235, 235, 1);
    outline: none;
    border: 1px solid transparent;
    border-radius: 10px;
    color: rgba(30, 30, 30, 1);
    font-size: 20px;
    font-weight: 600;
    font-family: Mulish;
}

.feedback-form-top textarea {
    resize: none;
    width: 100%;
}

.feedback-form-top input:focus,
.feedback-form-top textarea:focus {
    border: 1px solid rgba(255, 187, 4, 1);
}

/* feedback end */

/* history start */

.history {
    padding-top: 150px;
    padding-bottom: 150px;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.history-block {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 500px 500px;
    gap: 20px;
}

.history-block > img {
    width: 100%;
    max-height: 500px;
    object-fit: cover;
    grid-column: 1/3;
    border-radius: 10px;
}

.history-item {
    padding: 20px 20px 50px 50px;
    border-radius: 10px;
    background: rgba(245, 245, 245, 1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.history-item > div {
    display: flex;
    flex-direction: column;
}

.history-item p {
    font-size: 100px;
    font-weight: 400;
    font-family: BebasNeue-Regular;
}

.history-item span {
    max-width: 440px;
    font-size: 22px;
    font-weight: 400;
    color: rgba(30, 30, 30, 0.5);
}

.history-href {
    align-self: flex-end;
    border-radius: 10px;
    background: rgba(30, 30, 30, 1);
    width: 50px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.history-href-first {
    background: rgba(255, 187, 4, 1);
}

.history-item > a {
    font-size: 22px;
    font-weight: 400;
    color: rgba(30, 30, 30, 1);
    text-decoration: none;
}

.running-line-block {
    width: 100%;
    height: 325px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.running-line {
    overflow: hidden;
    display: flex;
    --gap: 147px;
    gap: var(--gap);
}

.running-line ul {
    min-width: 100%;
    flex-wrap: nowrap;
    list-style: none;
    flex-shrink: 0;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    gap: var(--gap);
    animation: marquee 20s linear infinite;
}

.running-line ul li {
    color: #fff;
    font-family: Bebas Neue Cyrillic;
    font-weight: 400;
    font-size: 100px;
}

@keyframes marquee {
    to {
        transform: translateX(calc(-100% - var(--gap)));
    }
}

.running-line1 {
    background: rgba(255, 187, 4, 1);
    transform: rotate(2deg);
}

.running-line2 {
    background: rgba(30, 30, 30, 1);
    transform: rotate(-3deg);
}

.running-line1 ul li {
    color: rgba(30, 30, 30, 1);
}

/* history end */

/* priorites start */

.priorites {
    padding-top: 150px;
    padding-bottom: 150px;
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.priorites-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid rgba(30, 30, 30, 1);
    padding-bottom: 80px;
}

.priorites-top > div {
    display: flex;
    align-items: center;
    gap: 140px;
}

.priorites-top p {
    color: rgba(30, 30, 30, 0.8);
    font-weight: 600;
    font-size: 20px;
}

.priorites-block {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.priorites-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 50px;
}

.priorites-item > div {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    gap: 18px;
}

.priorites-item h3 {
    font-size: 50px;
    font-weight: 400;
    font-family: Bebas Neue Cyrillic;
}

.priorites-item p {
    font-weight: 600;
    font-size: 25px;
    color: rgba(30, 30, 30, 1);
}

.priorites-item span {
    color: rgba(30, 30, 30, 0.5);
    font-weight: 400;
    font-size: 20px;
}

.priorites-item a {
    width: 165px;
    font-size: 20px;
    font-weight: 600;
    text-decoration: none;
    padding-bottom: 10px;
    border-bottom: 3px solid rgba(30, 30, 30, 1);
    color: rgba(30, 30, 30, 1);
    position: relative;
    transition: 0.4s;

    &:hover {
        border-color: rgba(255, 187, 4, 1);
    }
}

.priorites-item a::before {
    right: 0;
    top: 0;
    transform: translateY(0);
}

/* priorites end */

/* page-type start */

.page-type {
    padding: 100px 130px;
    display: flex;
    flex-direction: column;
    gap: 50px;
    background: rgba(240, 242, 244, 1);
}

.page-type-picture-block {
    overflow: hidden;
    width: 100%;
}

.page-type-picture-block img {
    max-width: 100%;
    object-fit: cover;
}

.page-type-block {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.page-type .page-type-swiper,
.page-type .swiper-change-block {
    display: none;
}

.page-type-item {
    padding: 10px;
    background: #fff;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.page-type-substitle {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.page-type-item-bottom {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 50px;
    padding: 20px;
}

.page-type-item h3 {
    font-size: 50px;
    font-weight: 400;
    font-family: Bebas Neue Cyrillic;
    text-transform: uppercase;
}

.page-type-item span,
.page-type-item li {
    font-weight: 400;
    font-size: 22px;
    color: rgba(30, 30, 30, 0.5);
}

.page-type-item-info {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.page-type-item-info h4 {
    font-size: 25px;
    font-weight: 600;
    color: rgba(30, 30, 30, 1);
}

.page-type-item ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.page-type-item li {
    font-size: 20px;
    position: relative;
    padding-left: 49px;
}

.page-type-item li::before {
    content: '';
    width: 22px;
    height: 22px;
    background-image: url('../image/Галочка.png');
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
}

/* page-type end */

/* individual start */

.individual {
    padding-top: 150px;
    padding-bottom: 150px;
    background: rgba(245, 245, 245, 1);
    display: flex;
    flex-direction: column;
    gap: 50px;
    position: relative;
}

.individual-top {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.individual-top > span {
    max-width: 820px;
    font-weight: 400;
    font-size: 20px;
    color: rgba(30, 30, 30, 0.5);
}

.individual-bottom {
    max-width: 820px;
    display: flex;
    gap: 20px;
}

.individual-item {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.individual-item > img {
    object-fit: cover;
    width: 50px;
}

.individual-item p {
    font-weight: 600;
    font-size: 25px;
    color: rgba(30, 30, 30, 1);
    margin-top: 10px;
    white-space: pre-line;
}

.individual-item span {
    font-size: 20px;
    font-weight: 400;
    color: rgba(30, 30, 30, 0.5);
}

.individual .feedback-right {
    width: 540px;
    position: absolute;
    top: 223px;
    right: 14%;
    z-index: 111;
}

.individual .feedback-right p {
    font-size: 24px;
    color: rgba(30, 30, 30, 1);
    font-weight: 600;
}


.custom-file-upload {
    cursor: pointer;
    font-weight: 600;
    font-size: 20px;
    border-radius: 12px;
    outline: none;
    color: rgba(30, 30, 30, 1) !important;
    background: url('../image/attachment.png') no-repeat left 10px center;
    background-size: 20px;
    padding-left: 40px;
}

/* Hide the default input */
.custom-file-upload input {
    display: none;
}

/* individual end */

/* whywe start */

.whywe {
    display: flex;
    flex-direction: column;
    gap: 50px;
    padding-top: 150px;
    padding-bottom: 150px;
}

.whywe-block {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
}

.whywe-item {
    padding: 40px 30px;
    display: flex;
    gap: 30px;
    background: rgba(245, 245, 245, 1);
    border-radius: 10px;
}

.whywe-item-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.whywe-item p {
    font-weight: 600;
    font-size: 25px;
    color: rgba(30, 30, 30, 1);
}

.whywe-item span {
    color: rgba(30, 30, 30, 0.5);
    font-size: 20px;
    font-weight: 400;
}

.whywe-item1 {
    flex-direction: column;
    justify-content: space-between;
    grid-column: 1/3;
    grid-row: 1/3;
    padding-bottom: 0;
}

.whywe-item2 {
    grid-column: 3/5;
    flex-direction: row;
    padding-right: 0;
    padding-bottom: 0;
}

.whywe-item1 .whywe-item-picture {
    margin-top: 10px;
    align-self: center;
    width: 370px;
    background: url('../image/Слой00.png');
    background-size: 100% 85%;
    background-repeat: no-repeat;
    background-position: bottom;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.whywe-item1 .whywe-item-picture img {
    width: 77%;
}

.whywe-item3 {
    grid-row: 1/3;
    grid-column: 5/7;
    flex-direction: column;
    background: rgba(255, 187, 4, 1);
}

.whywe-item3 .whywe-item-picture img {
    width: 100%;
    object-fit: cover;
}

.whywe-item3 .whywe-item-picture {
    position: relative;
}

.whywe-item3 span {
    color: rgba(30, 30, 30, 1);
}

.whywe-icon-1 {
    position: absolute;
    top: 20px;
    left: 20px;
}

.whywe-icon-2 {
    position: absolute;
    top: -25px;
    right: 30px;
}

.whywe-icon-3 {
    position: absolute;
    left: -15px;
    bottom: 15px;
}

.whywe-icon-4 {
    position: absolute;
    right: -15px;
    bottom: 55px;
}

.whywe-item4 {
    grid-column: 3/5;
    padding-right: 0;
    padding-bottom: 0;
}

.whywe-item5 {
    padding-right: 0;
    padding-bottom: 0;
    grid-column: 1/4;
}

.whywe-item6 {
    padding-right: 50px;
    grid-column: 4/6;
}

/* whywe end */

/* comments start */

.comments {
    padding-bottom: 150px;
    display: flex;
    flex-direction: column;
    gap: 50px;
    position: relative;
}

.comments-padding {
    margin-top: 200px;
}

.comments .swiper-change-block {
    position: absolute;
    right: 130px;
    top: 150px;
    transform: translateY(-50%);
}

.comments-top {
    position: relative;
    display: flex;
}

.comments-top h2 {
    width: 681px;
}

.comments-top > span {
    max-width: 820px;
    position: absolute;
    left: 500px;
    top: 11px;
    font-weight: 400;
    font-size: 20px;
    color: rgba(30, 30, 30, 0.5);
}

.comments-slide {
    display: flex;
    flex-direction: column;
    padding: 10px;
    background: rgba(245, 245, 245, 1);
    border-radius: 10px;
}

.comments-slide-top {
    position: relative;
}

.comments-slide-top > img {
    width: 100%;
}

.comments-user {
    position: absolute;
    top: 0px;
    left: 0px;
    width: calc(100% - 128px);
    display: flex;
    gap: 10px;
}

.com-user-pic {
    padding: 5px;
    border-radius: 10px;
    background: rgba(235, 235, 235, 1);
}

.com-user-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.comments-slide p {
    font-size: 20px;
    font-weight: 600;
    color: rgba(30, 30, 30, 1);
}

.comments-slide span {
    font-size: 18px;
    font-weight: 400;
    color: rgba(30, 30, 30, 0.5);
}

.comments-item-href {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 98px;
    height: 95px;
    background: rgba(255, 187, 4, 1);
    border-radius: 10px;
}

.comments-slide-bottom {
    padding: 10px;
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.comments-slide-bottom p {
    font-size: 22px;
}

.comments-slide-bottom span {
    font-size: 20px;
}

.comments-rating {
    margin-top: 10px;
    display: flex;
    align-items: center;
}

/* comments end */

/* project discuss start */


.project-discuss {
    padding-bottom: 150px;
}

.project-discuss-block {
    padding: 150px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: rgba(255, 187, 4, 1);
    gap: 30px;
    text-align: center;
}

.project-discuss-block button {
    margin-top: 20px;
}

.project-discuss-block span {
    font-size: 20px;
    font-weight: 400;
    color: rgba(30, 30, 30, 0.5);
    white-space: pre-line;
}

.project-discuss-block h2 {
    width: 940px;
}

/* project discuss end */

/* foot start */

.foot {
    width: 100%;
    padding-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.foot a {
    font-weight: 400;
    font-size: 16px;
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-offset: 0%;
    text-decoration-thickness: 0%;
    text-decoration-skip-ink: auto;
    color: rgba(30, 30, 30, 0.5);
}

.foot p {
    color: rgba(30, 30, 30, 0.5);
    font-family: Mulish;
    font-weight: 400;
    font-size: 16px;
}

footer .navbar-dropdown {
    top: auto;
    bottom: calc(100% + 10px);
    transform-origin: bottom;
    transform: rotateX(0) scale(0);
}

/* foot end */

/* modals start */

.body-filter,
.burger-menu-filter {
    background: rgba(30, 30, 30, 0.8);
    width: 100%;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 111;
    transform: scale(0);
    transition: .3s;
}

.body-filter {
    z-index: 1111;
}

.body-filter-active,
.burger-menu-filter-active {
    transform: scale(1);
}

.modal {
    transform: translateX(-50%) translateY(-50%) scale(0);
}

.modal-active {
    transform: translateX(-50%) translateY(-50%) scale(1);
}

.feedback-modal {
    width: 540px;
    position: fixed;
    top: 50%;
    left: 50%;
    transition: .3s;
    z-index: 111111;
}

.feedback-modal .feedback-right > span {
    font-size: 20px;
    margin-top: -10px;
}

.feedback-modal .feedback-right > p {
    font-size: 30px;
    font-weight: 700;
    color: rgba(30, 30, 30, 1);
}

/* modals end */

.cookie-consent[hidden] {
    display: none;
}

.cookie-consent {
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 1111111;
    width: min(620px, calc(100% - 40px));
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border: 1px solid rgba(30, 30, 30, 0.12);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 15px 50px rgba(30, 30, 30, 0.2);
}

.cookie-consent__content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cookie-consent__content p {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
}

.cookie-consent__content span {
    font-size: 14px;
    line-height: 1.45;
    color: rgba(30, 30, 30, 0.7);
}

.cookie-consent__content a {
    color: inherit;
    text-decoration: underline;
}

.cookie-consent__actions {
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 8px;
    flex: 0 0 auto;
}

.cookie-consent__decline {
    padding: 8px 12px;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-decoration: underline;
    color: rgba(30, 30, 30, 0.7);
}

@media (max-width: 650px) {
    .cookie-consent {
        right: 20px;
        bottom: 20px;
        flex-direction: column;
        align-items: stretch;
    }

    .cookie-consent__actions {
        flex-direction: column-reverse;
    }
}

/* dev site cms start */

.dev-site-cms {
    display: flex;
    flex-direction: column;
    gap: 50px;
    padding-top: 150px;
    padding-bottom: 150px;
}

.dev-site-cms-block {
    position: relative;
}

.dev-site-cms-left {
    width: 75%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dev-site-cms-left img {
    width: calc((100% / 3) * 2);
    object-fit: cover;
}

.dev-site-cms-left img:last-of-type {
    width: 100%;
}

.dev-site-cms-right {
    width: calc(50% - 20px);
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.dev-site-cms .individual-item span {
    font-size: 18px;
}

.dev-site-cms .individual-item {
    padding: 30px;
    background: rgba(245, 245, 245, 1);
    border-radius: 10px;
}

.dev-site-cms .individual-item:last-of-type {
    grid-column: 2/3;
}

.dev-site-cms .individual-item p,
.dev-site-cms .individual-item span {
    line-height: 114%;
}

/* dev site cms end */

/* questions start */

.questions {
    width: 1100px;
    padding: 0;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 50px;
    align-items: center;
    padding-bottom: 150px;
}

.questions-block {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.questions-item {
    height: 90px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
}


.questions-item-active {
    height: fit-content;
}

.questions-item p {
    color: rgba(30, 30, 30, 1);
    font-weight: 600;
    font-size: 25px;
}

.questions-item span {
    font-weight: 400;
    font-size: 20px;
    color: rgba(30, 30, 30, 0.5);
}

.questions-top {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(245, 245, 245, 1);
    border-radius: 10px;
}

.questions-bottom {
    padding: 30px 70px 30px 30px;
    background: rgba(245, 245, 245, 1);
    border-radius: 10px;
    backface-visibility: hidden;
    transform-origin: top;
    transition: .3s;
}

.questions-btn {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(240, 240, 240, 1);
    transition: .3s;
    cursor: pointer;
}

.questions-btn svg {
    transition: .3s;
}

.questions-item-active .questions-btn,
.questions-btn:hover {
    background: rgba(255, 187, 4, 1);
}

.questions-item-active .questions-btn svg {
    transform: rotate(180deg);
}

/* questions end */

/* devpage complect start */

.devpage-complect {
    padding-bottom: 150px;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.devpage-complect-block {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.devpage-complect-top {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

.devpage-complect-tab {
    width: 100%;
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(245, 245, 245, 1);
    border-radius: 10px;
    transition: .3s;
    cursor: pointer;
}

.devpage-complect-tab p {
    font-weight: 600;
    font-size: 20px;
    line-height: 100%;
    text-transform: uppercase;
}

.devpage-complect-tab-active,
.devpage-complect-tab:hover {
    background: rgba(255, 187, 4, 1);
}

.devpage-complect-item {
    display: none;
    align-items: center;
    justify-content: space-between;
}

.devpage-complect-item-active {
    display: flex;
}

.devpage-complect-item-info {
    display: flex;
    flex-direction: column;
    gap: 30px;
    justify-content: space-between;
}

.devpage-complect-item p {
    font-size: 30px;
    font-weight: 600;
    color: rgba(30, 30, 30, 1);
}

.devpage-complect-item-info button {
    width: fit-content;
    margin-top: 20px;
}

.devpage-complect-item ul {
    display: flex;
    flex-direction: column;
    gap: 20px;
    list-style: none;
    flex-grow: 1;
}

.devpage-complect-item ul li {
    color: rgba(30, 30, 30, 0.8);
    font-weight: 400;
    font-size: 20px;
    line-height: 100%;
    position: relative;
    padding-left: 21px;
}

.devpage-complect-item ul li::before {
    content: '';
    width: 13px;
    height: 10px;
    background: url('../image/check.png');
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.devpage-complect-right {
    position: relative;
    width: 55%;
}

.devpage-complect-right img {
    width: 100%;
}

.devpage-complect-right-text {
    position: absolute;
    bottom: 0;
    left: 0;
    padding-top: 10px;
    padding-right: 10px;
    background: #fff;
    border-radius: 0 10px 10px;
    display: flex;
    gap: 20px;
}

.devpage-complect-right-text div {
    width: 260px;
    padding: 25px 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    background: rgba(245, 245, 245, 1);
    border-radius: 10px;
}

.devpage-complect-right p {
    font-weight: 600;
    font-size: 20px;
    color: rgba(30, 30, 30, 1);
}

.devpage-complect-right span {
    font-size: 16px;
    font-weight: 400;
    color: rgba(30, 30, 30, 0.5);
}

.devcomplex {
    padding: 150px 130px 150px 10px;
    display: grid;
    grid-template-columns: 28% 1fr;
    gap: 40px;
}

.devcomplex-left {
    width: 100%;
}

.devcomplex-left img {
    width: 100%;
}

.devcomplex-right {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.devcomplex-content {
    margin-top: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.devcomplex-item {
    padding: 30px;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    background: rgba(245, 245, 245, 1);
    gap: 20px;
}

.devcomplex-item-num {
    margin-bottom: 10px;
    width: 50px;
    height: 50px;
    background: rgba(255, 187, 4, 1);
    border-radius: 10px;
    font-weight: 700;
    font-size: 30px;
    line-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.devcomplex-item p {
    font-size: 25px;
    font-weight: 600;
    color: rgba(30, 30, 30, 1);
}

.devcomplex-item span {
    color: rgba(30, 30, 30, 0.5);
    font-size: 18px;
    font-weight: 400;
    white-space: pre-line;
}

.devcomplex-right button {
    width: fit-content;
}

/* devpage complect end */

/* guarantees start */

.guarantees {
    display: flex;
    flex-direction: column;
    gap: 50px;
    padding-bottom: 150px;
}

.guarantees-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 100px;
}

.guarantees-top p {
    font-size: 20px;
    font-weight: 600;
    color: rgba(30, 30, 30, 0.8);
    white-space: pre-line;
}

.guarantees-bottom {
    display: flex;
    gap: 20px;
}

.guarantees-bottom img {
    border-radius: 10px;
    width: 32%;
    object-fit: cover;
}

.guarantees-block {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
}

.guarantees-block button {
    width: fit-content;
}

.guarantees-block > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.guarantees-item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 60px;
    border-radius: 10px;
    background: rgba(245, 245, 245, 1);
    padding: 21px 30px;
}

.guarantees-item h3 {
    font-size: 25px;
    font-weight: 600;
    color: rgba(30, 30, 30, 1);
    padding-left: 70px;
}

.guarantees-item p {
    font-size: 20px;
    font-weight: 400;
    color: rgba(30, 30, 30, 0.5);
}

.guarantees-item p span {
    color: rgba(30, 30, 30, 1);
}

.guarantees-item-icon-block {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 0 0 10px 0;
    background: #fff;
    padding: 0 10px 10px 0;
}

.guarantees-item-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 187, 4, 1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.guarantees-item-icon img {
    width: 40px;
    height: 40px;
}

/* guarantees end */

/* refinment-need start */

.refinment-need {
    padding-top: 150px;
    padding-bottom: 150px;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.refinment-need-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.refinment-need-item {
    padding: 10px;
    padding-right: 30px;
    display: flex;
    gap: 20px;
    border-radius: 10px;
    background: rgba(245, 245, 245, 1);
}

.refinment-need-item > img {
    width: 260px;
    object-fit: cover;
    border-radius: 10px;
}

.refinment-need-item > div {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 0;
}

.refinment-need-item p {
    font-size: 25px;
    font-weight: 600;
    color: rgba(30, 30, 30, 1);
}

.refinment-need-item span {
    color: rgba(30, 30, 30, 0.5);
    font-size: 18px;
    font-weight: 400;
}

/* refinment-need end */

/* price start */

.price .questions-bottom {
    list-style: none;
    gap: 30px;
    display: flex;
    flex-direction: column;
}

.price .questions-bottom li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(30, 30, 30, 0.1);
    padding-right: 320px;
}

.price-top {
    width: 100%;
    padding-right: 320px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(30, 30, 30, 0.1);
    margin-bottom: -30px;
}

.price-top p {
    font-size: 25px;
    font-weight: 600;
    color: rgba(30, 30, 30, 1);
}

.price .questions-bottom li:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}

.price .questions-bottom li span {
    color: rgba(30, 30, 30, 0.3);
    font-size: 22px;
    font-weight: 600;
    transition: .3s;
}

.price .questions-bottom li:hover span {
    color: rgba(30, 30, 30, 1);
}

/* price end */

/* part of refinement start */

.partof-refinement {
    padding-bottom: 150px;
    display: flex;
    flex-direction: column;
    gap: 70px;
}

.partof-refinement-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.partof-refinement-block {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

.partof-refinement-item {
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    background: rgba(245, 245, 245, 1);
    border-radius: 10px;
}

.partof-refinement-item p {
    font-size: 30px;
    font-weight: 600;
    color: rgba(30, 30, 30, 1);
}

.partof-refinement-item ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
}

.partof-refinement-item li {
    padding: 25px;
    padding-left: 65px;
    font-size: 20px;
    font-weight: 600;
    background: rgba(240, 240, 240, 1);
    border-radius: 10px;
    position: relative;
}

.partof-refinement-item li::before {
    content: '';
    width: 22px;
    height: 22px;
    background-image: url('../image/Галочкаblack.png');
    background-size: cover;
    position: absolute;
    left: 25px;
    top: 50%;
    transform: translateY(-50%);
}

/* part of refinement end */

/* promotion start */

.promotion-intro h1 {
    white-space: pre-line;
}

.promotion-intro .intro-content p {
    width: 100%;
}

.promotion-intro .intro-content {
    width: 40%;
}

.promotion-effect-block {
    grid-template-columns: 1fr 1fr;
}

.promotion-effect {
    padding-top: 150px;
    padding-bottom: 150px;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.promotion-effect-top {
    display: flex;
    justify-content: space-between;
}

.promotion-effect button {
    height: fit-content;
}

.promotion-effect > button {
    display: none;
}

.stable-flow {
    padding-bottom: 150px;
    position: relative;
}

.stable-flow img {
    width: 100%;
    height: 820px;
    object-fit: cover;
    border-radius: 10px;
}

.stable-flow-content {
    width: calc(100% - 260px);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -107px;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 20px;
    text-align: center;
}

.stable-flow-content p {
    width: 45%;
    font-weight: 600;
    font-size: 20px;
    line-height: 100%;
    color: rgba(30, 30, 30, 0.8);
}

.stable-flow-content h2 {
    white-space: pre-line;
}

.promotion-transparency {
    display: flex;
    flex-direction: column;
    gap: 50px;
    padding-bottom: 150px;
}

.promotion-transparency-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.promotion-transparency-bottom {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.promotion-transparency > button {
    display: none;
}

/* promotion end */

/* contact start */

.contact {
    padding-top: 150px;
    padding-bottom: 150px;
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.contact iframe {
    width: 100%;
    border-radius: 10px;
}

.contact-block {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 50px;
}

.contact-left {
    width: 60%;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.contact-left h2 {
    white-space: pre-line;
}

.contact-left_top {
    position: relative;
}

.contact-left_top > span {
    font-family: Mulish;
    font-weight: 400;
    font-size: 20px;
    white-space: pre-line;
    leading-trim: Cap height;
    line-height: 100%;
    letter-spacing: 0%;
    color: rgba(30, 30, 30, 0.5);
    position: absolute;
    top: 19px;
    left: 420px;
}

.contact-left_socials {
    display: grid;
    row-gap: 50px;
    grid-template-columns: 1fr 1fr;
}

.contact-social-item {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-social-item p {
    font-weight: 600;
    font-size: 25px;
    line-height: 100%;
    color: rgba(30, 30, 30, 1);
}

.contact-social-item a {
    color: rgba(30, 30, 30, 0.5);
    font-weight: 400;
    font-size: 20px;
    line-height: 100%;
    text-decoration: none;
}

.contact-social-item > div {
    display: flex;
    align-items: center;
    gap: 15px;
}

.contact-social-item ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.contact-social-item ul p {
    font-weight: 400;
    font-size: 20px;
}

.contact-social-item ul li {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.contact-social-item-messanger li {
    width: fit-content;
    gap: 20px;
}

.contact-social-item ul span {
    font-weight: 400;
    font-size: 20px;
    color: rgba(30, 30, 30, 0.5);
}

.contact .feedback-right {
    width: 55%;
    padding: 60px;
    height: fit-content;
}

.contact .feedback-right > p {
    font-size: 25px;
}

/* contact end */

/* about start */

.about-intro {
    position: relative;
    text-align: center;
    padding-top: 250px;
    padding-bottom: 50px;
}

.about-intro h1 {
    font-size: 110px;
    margin-top: -100px;
    white-space: pre-line;
}

.about-intro h3 {
    font-weight: 600;
    font-size: 25px;
    line-height: 100%;
    color: rgba(30, 30, 30, 0.8);
    margin-top: 10px;
}

.about-intro-content {
    position: absolute;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 20px;
    width: calc(100% - 260px);
    left: 50%;
    transform: translateX(-50%);
}

.about-intro-content > span {
    width: 43%;
    font-weight: 400;
    font-size: 20px;
    line-height: 100%;
    color: rgba(30, 30, 30, 0.5);
}

.about-intro img {
    width: 100%;
    border-radius: 10px;
    height: 816px;
    object-fit: cover;
}

.about-intro-bottom {
    padding-bottom: 150px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.about-intro-bottom-item {
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 120px;
}

.about-intro-bottom-item:first-of-type {
    background: rgba(30, 30, 30, 1);
    border-radius: 10px;
}

.about-intro-bottom-item:first-of-type p,
.about-intro-bottom-item:first-of-type span {
    color: rgba(255, 187, 4, 1);
}


.about-intro-bottom-item p {
    font-family: Bebas Neue;
    font-weight: 400;
    font-size: 100px;
    line-height: 100%;
    text-transform: uppercase;
    color: rgba(30, 30, 30, 1);
}

.about-intro-bottom-item span {
    color: rgba(30, 30, 30, 0.5);
    font-weight: 400;
    font-size: 22px;
    line-height: 100%;
}

.market {
    padding-bottom: 150px;
}

.market-block {
    width: 100%;
    padding: 30px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    background: url(../image/aboutmarketbg.png);
    background-size: cover;
    background-position: right;
    border-radius: 10px;
}

.market-content {
    width: 55%;
    display: flex;
    flex-direction: column;
    gap: 30px;
    background: #fff;
    border-radius: 10px;
    padding: 188px 50px;
}

.market-content span {
    width: 60%;
    color: rgba(30, 30, 30, 0.5);
    font-size: 20px;
    font-weight: 400;
}

.market-content > button {
    width: fit-content;
    margin-top: 20px;
}

.market-box {
    width: 400px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 30px;
    border-radius: 10px;
    backdrop-filter: blur(100px);
    background: rgba(255, 255, 255, 0.01);
}

.market-box p {
    font-weight: 400;
    font-size: 18px;
    line-height: 100%;
    color: #fff;
}

.market-box h3 {
    font-family: Bebas Neue;
    font-weight: 400;
    font-size: 80px;
    line-height: 100%;
    text-transform: uppercase;
    color: #fff;
}

.team {
    display: flex;
    flex-direction: column;
    gap: 50px;
    padding-bottom: 150px;
}

.team .title {
    white-space: nowrap;
}

.team-top {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.team-top p {
    width: 32%;
    font-weight: 600;
    font-size: 20px;
    line-height: 100%;
    color: rgba(30, 30, 30, 0.8);
}

.team-block {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.team-item {
    display: flex;
    flex-direction: column;
    padding: 10px;
    background: rgba(245, 245, 245, 1);
    border-radius: 10px;
}

.team-item > img {
    border-radius: 10px;
}

.team-item span {
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    color: rgba(30, 30, 30, 0.5);
}

.team-item-bottom {
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.team-item h3 {
    font-weight: 600;
    font-size: 25px;
    line-height: 100%;
    color: rgba(30, 30, 30, 1);
}

.team-item p {
    margin-top: 15px;
    font-weight: 400;
    font-size: 18px;
    line-height: 100%;
    color: rgba(30, 30, 30, 0.5);
}


.why-we-working {
    padding-bottom: 150px;
}

.why-we-working img {
    margin-left: -230px;
}

.why-we-working-block {
    background: rgba(30, 30, 30, 1);
    border-radius: 10px;
    padding: 100px;
    display: flex;
    gap: 20px;
    align-items: center;
}

.why-we-working p {
    font-weight: 600;
    font-size: 20px;
    line-height: 100%;
    color: #fff;
}

.why-we-working h2 {
    color: #fff;
}

.why-we-working-content {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.why-we-working-content button {
    width: fit-content;
    margin-top: 20px;
}

.why-we-working .title span::after {
    z-index: -1;
}

.approach {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 50px;
    padding-bottom: 150px;
}

.approach-block {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

.approach-block .individual-item {
    padding: 30px;
    border-radius: 10px;
    background: rgba(245, 245, 245, 1);
}

/* about end */

/* services start */

.services {
    padding-top: 150px;
    padding-bottom: 150px;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 30px;
}

.services > span {
    color: rgba(30, 30, 30, 0.5);
    font-size: 20px;
    font-weight: 600;
    white-space: pre-line;
}

.services-block {
    margin-top: 20px;
}

.services-block-index {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.services .page-type-picture-block {
    display: flex;
    align-items: center;
    justify-content: center;
}

.services .page-type-item h3 {
    font-family: Mulish;
    font-weight: 700;
    font-size: 30px;
    line-height: 100%;
    white-space: pre-line;
}

.services .swiper-change-block {
    display: none;
}

.block-pagination {
    display: flex;
    align-items: center;
    gap: 10px;
}

.block-pagination span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(235, 235, 235, 1);
}

.block-pagination span.blck-active-pagination {
    background: rgba(255, 187, 4, 1);
}

/* services end */

/* portfolio start */

.portfolio-page .swiper-change-block {
    display: flex;
}

.portfolio-block-index {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr 1fr 1fr;
}

.portfolio-page .work-slide {
    height: fit-content;
}

/* portfolio end */

/* comments-page start */

.comments-block-index {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    row-gap: 20px;
}

.comments-item {
    display: flex;
    flex-direction: column;
    background: rgba(245, 245, 245, 1);
    border-radius: 10px;
    padding: 10px;
}

.comments-item-bottom {
    position: relative;
}

.comments-item-bottom img {
    width: 100%;
}

.comment-item-button-block {
    width: 296px;
    border-radius: 10px 0 0 0;
    display: flex;
    justify-content: flex-end;
    position: absolute;
    right: 0;
    bottom: 0;
    padding-top: 10px;
    padding-bottom: 0px;
    background: rgba(245, 245, 245, 1);
}

.comments-item-top {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 20px;
}


.comments-item-top span {
    font-weight: 400;
    font-size: 20px;
    line-height: 100%;
    color: rgba(30, 30, 30, 0.5);
}

.comment-item-name span {
    font-size: 18px;
}

.comment-item-name p {
    color: rgba(30, 30, 30, 1);
    font-size: 20px;
    font-weight: 600;
}

.comment-item-user-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.comment-item-logo {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* comments-page end */


.intro-for-reinf-picture .intro-content p {
    width: 495px !important;
}

.intro-for-reinf-picture .intro-content span {
    width: fit-content;
}

.intro-for-dif-picture {
    gap: 0;
}

.intro-for-dif-picture .intro-block img {
    margin-top: -105px;
}

.intro-for-dif-picture h1 {
    white-space: pre-line;
}

.text {
    p {
        margin-bottom: 10px;
    }
}

/* responsive start */


@media screen and (max-width: 1916px) {
    .intro-for-dif-picture h1 {
        font-size: 105px;
    }
}

@media screen and (max-width: 1900px) {

    .section,
    .work-types,
    .page-type {
        padding-left: 100px;
        padding-right: 100px;
    }

    h1 {
        font-size: 100px;
    }

    .intro-for-dif-picture h1 {
        font-size: 107px;
    }

    .why-we-working img {
        margin-left: -200px;
    }
}

@media screen and (max-width: 1890px) {
    .about-intro-content {
        gap: 10px;
    }
}

@media screen and (max-width: 1880px) {
    .dev-feedback {
        padding-right: 100px;
    }

    .dev-feedback-cont {
        justify-content: space-between;
    }
}

@media screen and (max-width: 1860px) {
    .individual-item p {
        font-size: 22px;
    }

    .dev-site-cms .individual-item span {
        font-size: 16px;
    }
}

@media screen and (max-width: 1811px) {
    .intro-for-dif-picture h1 {
        font-size: 99px;
    }
}

@media screen and (max-width: 1800px) {
    .comments-item-href {
        right: 5px;
    }
}

@media screen and (max-width: 1760px) {

    .section,
    .work-types,
    .page-type {
        padding-left: 80px;
        padding-right: 80px;
    }

    .feedback {
        padding: 100px;
    }

    .feedback-cont {
        gap: 100px;
    }

    .individual-item p {
        font-size: 20px;
    }

    .dev-site-cms .individual-item span {
        font-size: 14px;
    }

    .dev-site-cms .individual-item {
        gap: 10px;
    }

    .dev-feedback-cont .title {
        font-size: 80px;
    }

    .dev-feedback-cont .feedback-left div span {
        left: 270px;
        top: 185px;
        font-size: 16px;
    }

    .about-intro h1 {
        font-size: 100px;
        margin-top: -112px;
    }

    .about-intro-content > span {
        width: 49%;
    }

    .about-intro img {
        height: 734px;
    }

    .about-intro h3 {
        font-size: 22px;
    }

    .about-intro-content {
        width: calc(100% - 160px);
    }

    .why-we-working img {
        margin-left: -180px;
    }
}

@media screen and (max-width: 1705px) {
    .intro-content button {
        padding: 22px;
    }

    h1 {
        font-size: 78px;
    }

    .title {
        font-size: 80px;
    }

    .work-types-item li {
        font-size: 18px;
    }

    .work-types-item h2 {
        font-size: 40px;
    }

    .work-types-item > div {
        gap: 15px;
        padding: 20px 30px;
        padding-right: 0;
        padding-bottom: 0;
    }

    .work-types-item ul {
        gap: 10px;
    }

    .individual .feedback-right {
        right: 100px;
    }

    .comments-item-href {
        right: 15px;
        width: 70px;
        height: 70px;
    }

    .comments-slide span {
        font-size: 16px;
    }

    .com-user-info {
        gap: 5px;
    }

    .com-user-pic img {
        width: 50px;
        height: 50px;
    }

    .com-user-pic {
        height: fit-content;
    }

}

@media screen and (max-width: 1690px) {
    .dev-feedback-cont .title {
        font-size: 70px;
    }

    .dev-feedback-cont .feedback-left div span {
        font-size: 14px;
        left: 240px;
        top: 160px;
    }

    .dev-feedback-cont .feedback-right {
        width: 454px;
    }

    .dev-feedback-cont {
        gap: 20px;
    }

}

@media screen and (max-width: 1651px) {

    .intro-block img {
        height: 735px;
    }

    .intro-for-dif-picture .intro-block img {
        margin-top: -90px;
    }

    .intro-content p {
        width: 347px;
        font-size: 18px;
    }

    .intro-content {
        gap: 10px;
    }

    .intro-content div {
        margin-top: 15px;
    }

    .intro-content span {
        font-size: 14px;
    }

    .work-name {
        padding-top: 0;
    }

    .work-name p {
        font-size: 24px;
    }

    .whywe-item span {
        font-size: 16px;
    }

    .whywe-item p {
        font-size: 20px;
    }

    .intro-for-dif-picture h1 {
        font-size: 90px;
    }

}

@media screen and (max-width: 1600px) {
    .priorites-item p {
        font-size: 22px;
    }

    .priorites-item span {
        font-size: 18px;
    }

    .priorites-top p {
        font-size: 18px;
    }

    .priorites-top > div {
        gap: 70px;
    }

    .individual .feedback-right {
        right: 50px;
    }

    .individual-bottom,
    .individual-top > span {
        max-width: 700px;
    }

    .individual-item span,
    .individual-top > span {
        font-size: 18px;
    }

    .individual-item p {
        font-size: 20px;
    }

    .title {
        font-size: 70px;
    }

    .dev-site-cms-right {
        gap: 15px;
    }

    .refinment-need-item p {
        font-size: 22px;
    }

    .refinment-need-item span {
        font-size: 18px;
    }

    .refinment-need-item {
        padding-right: 20px;
    }

    .stable-flow img {
        height: 700px;
    }

    .stable-flow-content {
        gap: 25px;
    }

    .stable-flow-content p {
        width: 50%;
        font-size: 18px;
    }

    .contact-left_top > span {
        left: 280px;
    }

}

@media screen and (max-width: 1585px) {
    .about-intro img {
        height: 700px;
    }

    .about-intro h1 {
        font-size: 90px;
        margin-top: -100px;
    }
}


@media screen and (max-width: 1535px) {
    .intro-content div {
        gap: 10px;
    }

    .intro-content button {
        font-size: 18px;
    }

    .intro-block img {
        height: 700px;
    }

    .comments-item-href {
        right: 10px;
    }

    .comments-slide span {
        font-size: 14px;
    }

    .comments-slide p {
        font-size: 16px;
    }

    .com-user-info {
        gap: 2px;
    }

    .individual-item p {
        font-size: 18px;
    }

    .dev-site-cms .individual-item {
        padding: 20px;
    }


    .promotion-intro .intro-content {
        width: 38%;
    }
}

@media screen and (max-width: 1515px) {
    .intro-for-dif-picture h1 {
        font-size: 85px;
    }

    .intro-for-dif-picture .intro-content p {
        width: 305px;
        font-size: 16px;
    }

    .intro-for-reinf-picture .intro-content p {
        width: 455px !important;
    }

}

@media screen and (max-width: 1500px) {
    .page-type-item h3 {
        font-size: 25px;
    }

    .page-type-substitle {
        gap: 10px;
    }

    .page-type-item span,
    .page-type-item li {
        font-size: 16px;
    }

    .page-type-item-bottom {
        gap: 25px;
    }

    .page-type-item-info h4 {
        font-size: 20px;
    }

    .page-type-item ul {
        gap: 15px;
    }

    .guarantees-item h3 {
        font-size: 22px;
    }

    .guarantees-item p {
        font-size: 18px;
    }

    .guarantees-item {
        gap: 30px;
    }

    .why-we-working img {
        width: 600px;
    }

    .comment-item-name p {
        font-size: 18px;
    }

    .comment-item-name span {
        font-size: 16px;
    }
}


@media screen and (max-width: 1455px) {
    .whywe-item1 .whywe-item-picture {
        width: 95%;
    }

    .whywe-item-info {
        gap: 10px;
    }

    .whywe-item {
        padding: 30px 20px;
    }

    .whywe-item1 {
        padding-bottom: 0;
    }

    .whywe-item2,
    .whywe-item4,
    .whywe-item5 {
        padding-right: 0;
        padding-bottom: 0;
    }

    .whywe-item5 .whywe-item-picture img {
        width: 225px;
    }

    .whywe-item-picture {
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
    }

    .whywe-item2 .whywe-item-picture img,
    .whywe-item4 .whywe-item-picture img {
        width: 125px;
    }

    .portfolio .yellow-btn {
        font-size: 17px;
    }
}

@media screen and (max-width: 1440px) {
    .intro-for-dif-picture .intro-content {
        width: 490px;
    }

    .intro-for-dif-picture h1 {
        font-size: 80px;
    }
}

@media screen and (max-width: 1430px) {

    .intro-content span {
        font-size: 12px;
    }
}

@media screen and (max-width: 1420px) {
    .dev-site-cms .individual-item span {
        font-size: 12px;
    }

    .dev-site-cms .individual-item {
        padding-bottom: 10px;
        gap: 5px;
    }

    .dev-site-cms-right {
        gap: 10px;
    }

    .dev-site-cms-left {
        gap: 10px;
    }

    .devpage-complect-right-text div {
        width: fit-content;
        padding: 15px;
        gap: 5px;
    }

    .devpage-complect-right p {
        font-size: 16px;
    }

    .devpage-complect-right span {
        font-size: 12px;
    }

    .devpage-complect-right-text {
        width: 388px;
    }

    .dev-feedback-cont .title {
        font-size: 60px;
    }

    .dev-feedback-cont .feedback-left div span {
        left: 200px;
        top: 140px;
        font-size: 12px;
    }

    .contact .feedback-right {
        padding: 30px;
        width: 50%;
    }
}

@media screen and (max-width: 1400px) {
    .intro-content button {
        font-size: 16px;
        padding: 15px;
    }

    .intro-content p {
        font-size: 16px;
        width: 305px;
    }

    .intro-block img {
        height: 590px;
    }

    .intro-content p {
        font-size: 15px;
    }

    .intro-content span {
        font-size: 11px;
    }

    h1 {
        font-size: 70px;
    }

    .individual .feedback-right {
        top: 300px;
    }

    .individual-bottom,
    .individual-top > span {
        max-width: 500px;
    }

    .individual-item p {
        font-size: 18px;
    }

    .individual-item span {
        font-size: 16px;
    }

    .comments-item-href {
        right: 5px;
    }

    .comments-user {
        width: calc(100% - 90px);
    }

    .portfolio .yellow-btn {
        font-size: 16px;
    }

    .title {
        font-size: 60px;
    }

    .intro-for-dif-picture .intro-block img {
        margin-top: -70px;
    }

    .intro-for-dif-picture h1 {
        font-size: 72px;
    }

    .intro-for-dif-picture .intro-content p {
        font-size: 14px;
        width: 265px;
    }

    .guarantees-top p {
        font-size: 16px;
    }

    .guarantees-top {
        padding-right: 0;
    }

    .refinment-need-item span {
        font-size: 16px;
    }

    .refinment-need-item p {
        font-size: 20px;
    }

    .refinment-need-item > div {
        gap: 10px;
        padding: 10px 0;
    }

    .partof-refinement-block {
        grid-template-columns: 1fr 1fr;
    }

    .partof-refinement-top button {
        display: none;
    }

    .devcomplex {
        padding-right: 70px;
    }

    .stable-flow img {
        height: 650px;
    }

    .stable-flow-content {
        width: calc(100% - 160px);
    }

    .contact-left_top > span {
        top: 10px;
        left: 230px;
    }
}

@media screen and (max-width: 1360px) {
    .about-intro img {
        height: 591px;
    }

    .about-intro h1 {
        font-size: 80px;
        margin-top: -90px;
    }

    .about-intro h3 {
        font-size: 18px;
    }

    .about-intro-content > span {
        width: 47%;
        font-size: 16px;
    }

}

@media screen and (max-width: 1300px) {

    .section,
    .work-types,
    .page-type {
        padding-left: 50px;
        padding-right: 50px;
    }

    .work-types-item li {
        font-size: 16px;
    }

    .work-types-item h2 {
        font-size: 34px;
    }

    .work-types-item > div {
        height: 275px;
    }

    .feedback-cont {
        gap: 50px;
    }

    .feedback {
        padding: 100px 50px;
    }

    .priorites-top > div {
        gap: 20px;
    }

    .title {
        font-size: 70px;
    }

    .priorites-item p {
        font-size: 20px;
    }

    .priorites-item span {
        font-size: 16px;
    }

    .priorites-item {
        gap: 25px;
    }

    .history-item {
        padding: 20px;
    }

    .history-item span {
        max-width: 100%;
        font-size: 20px;
    }

    .individual .feedback-right p {
        font-size: 20px;
    }

    .comments-item-href {
        right: 15px;
        top: 15px;
        width: 50px;
        height: 50px;
    }

    .comments-user {
        width: calc(100% - 80px);
    }

    .comments-top h2 {
        width: 637px;
    }

    .comments-top > span {
        left: 380px;
        top: 5px;
    }

    .project-discuss-block h2 {
        width: 100%;
    }

    .intro-for-dif-picture h1 {
        width: 100% !important;
    }

    .dev-portfolio .title {
        font-size: 60px;
    }

    .devpage-complect-item ul li {
        font-size: 16px;
    }

    .devpage-complect-tab p {
        font-size: 18px;
    }

    .devpage-complect-tab {
        height: 60px;
    }

    .intro-for-reinf-picture .intro-content p {
        width: 335px !important;
    }

    .stable-flow-content {
        gap: 14px;
    }

    .contact-left_top > span {
        left: 260px;
        top: 15px;
    }

    .about-intro-content {
        width: calc(100% - 100px);
    }

    .about-intro-bottom {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .about-intro-bottom-item {
        background: rgba(245, 245, 245, 1);
        border-radius: 10px;
    }

    .market-box {
        width: 300px;
    }

    .market-box h3 {
        font-size: 50px;
    }

    .market-box p {
        font-size: 16px;
    }

    .market-content {
        padding: 120px 30px;
    }

    .market-content span {
        width: 100%;
        font-size: 18px;
    }

    .market-content h2 {
        font-size: 55px;
    }

    .team-top p {
        width: 60%;
        font-size: 18px;
    }

    .team-top {
        flex-direction: column;
    }

    .why-we-working img {
        width: 500px;
        margin-left: -150px;
    }

    .services .page-type-item h3 {
        font-size: 25px;
    }

    .comment-item-name p {
        font-size: 16px;
    }

    .comments-item-top span {
        font-size: 16px;
    }

    .comment-item-name span {
        font-size: 14px;
    }

    .comment-item-logo img {
        width: 30%;
    }
}

@media screen and (max-width: 1230px) {
    .whywe-block {
        gap: 10px;
    }

    .whywe-item span {
        font-size: 14px;
    }

    .whywe-item {
        gap: 10px;
    }

    .whywe-item2 .whywe-item-picture img,
    .whywe-item4 .whywe-item-picture img {
        width: 70px;
    }

    .intro h1 {
        width: 870px;
    }

    .promotion-intro h1 {
        width: 100%;
        font-size: 66px;
    }

    .stable-flow-content {
        top: -77px;
    }

    .stable-flow-content p {
        width: 60%;
    }

    .stable-flow-content h2 {
        font-size: 60px;
    }
}

@media screen and (max-width: 1200px) {
    .comments-item-href {
        top: 10px;
        right: 10px;
    }

    .comments-slide span {
        font-size: 12px;
    }

    .com-user-pic img {
        width: 30px;
        height: 30px;
    }

    .comments-slide p {
        font-size: 14px;
    }

    .comments-slide span {
        font-size: 10px;
    }

    .individual-item > img {
        width: 30px;
        height: 30px;
    }

    .questions {
        width: 100%;
        padding: 0 16px;
        padding-bottom: 150px;
    }

    .intro-for-dif-picture h1 {
        font-size: 62px;
    }

    .intro-for-dif-picture .intro-content p {
        font-size: 12px;
        width: 215px;
    }

    .dev-portfolio .title {
        font-size: 55px;
    }

    .guarantees-top p {
        font-size: 14px;
    }

    .refinment-need-block {
        grid-template-columns: 1fr;
    }

    .refinment-need-item > div {
        padding: 20px 0;
        gap: 20px;
    }

    .refinment-need-item p {
        font-size: 22px;
    }

    .refinment-need-item span {
        font-size: 18px;
    }

    .intro-for-reinf-picture .intro-content p {
        width: 300px;
    }

    .promotion-effect-top button {
        padding-left: 20px;
    }

    .promotion-effect h2 {
        font-size: 67px;
    }

    .contact-block {
        gap: 20px;
    }

    .contact-left_top > span {
        font-size: 16px;
    }

    .about-intro img {
        height: 520px;
    }

    .about-intro h1 {
        font-size: 70px;
    }

    .about-intro h3 {
        width: 50%;
        margin-top: 0;
    }

    .about-intro-content > span {
        width: 49%;
        font-size: 14px;
    }

    .team-block {
        grid-template-columns: 1fr 1fr;
    }

}

@media screen and (max-width: 1160px) {
    .individual .feedback-right {
        top: 280px;
        width: 440px;
    }

    .intro-content p {
        font-size: 13px;
        width: 250px;
    }

    .intro-content span {
        width: 231px;
    }

    .intro-content button {
        font-size: 14px;
    }

    .dev-site-cms .individual-item {
        padding: 10px;
    }

    .dev-site-cms .individual-item p {
        font-size: 16px;
    }

    .dev-portfolio .title {
        font-size: 50px;
    }

    .portfolio .yellow-btn {
        padding-left: 20px;
    }

    .dev-feedback-cont .feedback-right p {
        font-size: 20px;
    }

    .dev-feedback-cont .title {
        font-size: 55px;
    }

    .dev-feedback-cont .feedback-right {
        width: 350px;
    }

    .dev-feedback-cont .feedback-left div span {
        top: 130px;
        left: 190px;
    }

    .intro-for-reinf-picture .intro-content {
        width: 378px;
    }

    .promotion-effect h2 {
        font-size: 62px;
    }
}

@media screen and (max-width: 1130px) {
    .priorites-top p {
        font-size: 14px;
    }

    .comments-item-href {
        right: 7px;
    }

    .guarantees-top p {
        font-size: 12px;
    }

    .dev-feedback-cont .title {
        font-size: 50px;
    }

    .dev-feedback-cont .feedback-left div span {
        font-size: 10px;
        left: 170px;
        top: 110px;
    }

    .dev-feedback-cont .feedback-right {
        width: 300px;
        padding: 20px;
    }

    .promotion-effect > button {
        display: flex;
        width: fit-content;
        align-self: center;
    }

    .promotion-effect-top button {
        display: none;
    }

}

@media screen and (max-width: 1080px) {
    .stable-flow img {
        height: 520px;
    }

    .stable-flow-content h2 {
        font-size: 55px;
    }

    .stable-flow-content p {
        font-size: 14px;
    }

    .stable-flow-content p {
        width: 50%;
    }
}

@media screen and (max-width: 1080px) and (min-width: 1000px) {
    .stable-flow button {
        font-size: 12px;
        padding-left: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
}


@media screen and (max-width: 1063px) {
    .promotion-intro h1 {
        font-size: 61px;
    }
}

@media screen and (max-width: 1060px) {
    .individual .feedback-right {
        padding: 30px 20px;
        width: 360px;
    }

    .header nav > ul {
        gap: 8px;
    }

    .header nav li,
    .header nav a {
        font-size: 16px;
    }

    .dev-site-cms .individual-item p {
        margin-top: 0;
        font-size: 14px;
    }


}

@media screen and (max-width: 1050px) {
    .title {
        font-size: 60px;
    }

    .individual-bottom,
    .individual-top > span {
        width: 450px;
    }

    .comments-top h2 {
        width: 637px;
    }

    .comments-top h2 {
        width: 450px;
    }

    .comments-top > span {
        left: 320px;
        top: 0;
    }

    .intro-content button {
        font-size: 13px;
    }

    .intro-content p {
        font-size: 12px;
    }

    .intro-for-dif-picture h1 {
        font-size: 60px;
    }

    .contact-left_top > span {
        left: 220px;
        top: 10px;
    }

    .about-intro img {
        height: 460px;
    }

    .about-intro h1 {
        font-size: 60px;
    }

    .about-intro h3 {
        font-size: 16px;
        width: 100%;
    }
}

@media screen and (max-width: 1000px) {

    .section,
    .work-types,
    .page-type {
        padding-left: 16px;
        padding-right: 16px;
    }

    .intro {
        padding-top: 100px;
    }

    .header nav {
        display: none;
    }

    .header button {
        display: none;
    }

    h1 {
        width: 100%;
        font-size: 70px;
    }

    .intro-content p {
        position: absolute;
        font-size: 18px;
        width: 371px;

    }

    .intro-content span {
        width: 100%;
        font-size: 15px;
    }

    .intro-content div {
        justify-content: space-between;
    }

    .intro-content button {
        font-size: 18px;
        width: 50%;
    }

    .intro-content {
        width: 554px;
    }

    .intro h1 {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .intro h1 span {
        width: fit-content;
    }

    .intro-content p {
        bottom: calc(100% + 44px);
        left: 306px;
    }

    .title {
        font-size: 70px;
    }

    .work-types-content {
        grid-template-columns: 1fr;
    }

    .work-types-item h2 {
        font-size: 50px;
    }

    .work-types-item li {
        font-size: 20px;
    }

    .portfolio-title .yellow-btn {
        position: absolute;
        bottom: 150px;
        right: 16px;
        z-index: 1111;
    }

    .portfolio {
        padding-top: 150px;
        padding-bottom: 150px;
        position: relative;
    }

    .swiper-change-block {
        justify-content: flex-start;
    }

    .feedback p {
        font-size: 22px;
    }

    .feedback-left > div span {
        font-size: 18px;
    }

    .feedback-right {
        padding: 30px 20px;
    }

    .feedback .feedback-right {
        width: 50%;
    }

    .feedback-left {
        width: 50%;
    }

    .feedback {
        padding: 100px 16px;
    }

    .history-block > img {
        display: none;
    }

    .history-block {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 286px;
    }

    .history-item p {
        font-size: 80px;
    }

    .history-item span {
        font-size: 18px;
    }

    .history-href {
        position: absolute;
        top: 30px;
        right: 30px;
    }

    .history-item {
        position: relative;
    }

    .running-line ul li {
        font-size: 70px;
    }

    .priorites {
        position: relative;
        padding-bottom: 250px;
    }

    .priorites-top > button {
        position: absolute;
        left: 16px;
        bottom: 150px;
        padding: 22px 40px;
        padding-right: 60px;
    }

    .priorites-top > div {
        width: 100%;
        gap: 68px;
    }

    .priorites-top p {
        font-size: 18px;
    }

    .priorites-block {
        grid-template-columns: 1fr 1fr;
        gap: 50px;
        justify-content: space-between;
        row-gap: 70px;
    }

    .priorites-item {
        gap: 50px;
    }

    .priorites-item > div {
        gap: 20px;
    }

    .priorites-item p {
        font-size: 22px;
    }

    .priorites-item span {
        font-size: 18px;
    }

    .individual-item span,
    .individual-top > span {
        font-size: 20px;
    }

    .individual-item p {
        font-size: 25px;
    }

    .individual-bottom {
        width: 400px;
        flex-direction: column;
    }

    .individual .feedback-right {
        right: 16px;
        width: 485px;
        top: 400px;
    }

    .individual-top > span {
        width: 100%;
        max-width: 100%;
    }

    .individual {
        padding-bottom: 100px;
    }

    .whywe-item1 {
        grid-column: 1/4;
    }

    .whywe-item2 {
        grid-row: 1/2;
        grid-column: 4/7;
    }

    .whywe-item4 {
        grid-row: 2/3;
        grid-column: 4/7;
    }

    .whywe-item3 {
        grid-column: 4/7;
        grid-row: 3/5;
    }

    .whywe-item5 {
        grid-column: 1/4;
        grid-row: 3/5;
    }

    .whywe-item6 {
        grid-column: 1/5;
    }

    .whywe-block > .whywe-item-picture {
        grid-column: 5/7;
    }

    .whywe-block > .whywe-item-picture img {
        width: 100%;
    }

    .comments-slide p {
        font-size: 20px;
    }

    .comments-slide span {
        font-size: 18px;
    }

    .comments-slide-top > img {
        height: 480px;
    }

    .comments-user {
        width: calc(100% - 160px);
    }

    .com-user-pic img {
        width: 80px;
        height: 80px;
    }

    .comments-item-href {
        width: 75px;
        height: 75px;
        right: 10px;
    }

    .comments-slide p {
        font-size: 22px;
    }

    footer.header button {
        display: block;
    }

    .comments .swiper-change-block {
        width: fit-content;
        left: 50%;
        top: auto;
        bottom: 150px;
        transform: translateX(-50%);
    }

    .comments {
        padding-bottom: 250px;
    }

    .comments-top {
        flex-direction: column;
        gap: 20px;
    }

    .comments-top span {
        position: relative;
        left: auto;
        top: auto;
    }

    .comments-top h2 {
        width: 100%;
    }

    .work-types-item > div {
        height: 310px;
    }

    .page-type .page-type-swiper,
    .page-type .swiper-change-block {
        display: flex;
    }

    .page-type .swiper-change-block {
        justify-content: center;
    }

    .page-type-block-1 {
        display: none;
    }

    .burger-btn {
        display: flex;
        cursor: pointer;
        z-index: 1111;
    }

    .burger-btn .burger-menu-close {
        display: none;
    }

    .burger-btn-active .burger-menu-open {
        display: none;
    }

    .burger-btn-active .burger-menu-close {
        display: block;
    }

    .header .burger-menu {
        z-index: 1111;
        width: 486px;
        backface-visibility: hidden;
        transform: rotateX(180deg);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        position: absolute;
        transform-origin: top;
        right: 16px;
        top: 149px;
        background: #fff;
        padding: 40px 30px;
        gap: 40px;
        border-radius: 10px;
        transition: .3s;
    }

    .header .burger-menu-active {
        transform: rotateX(0deg);
    }

    .header .burger-menu button {
        display: block !important;
    }

    .header .burger-menu > ul {
        position: relative;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
    }

    .navbar-dropdown {
        top: 120px;
        left: -1px;
    }

    .questions-item p {
        font-size: 22px;
    }

    .questions-item span {
        font-size: 18px;
    }

    .dev-site-cms-left img:first-of-type {
        display: none;
    }

    .dev-site-cms-right {
        position: relative;
        width: 100%;
    }

    .dev-site-cms .individual-item:last-of-type {
        grid-column: 1/2;
    }

    .dev-site-cms .individual-item p {
        white-space: unset;
        font-size: 22px;
        margin-top: 10px;
    }

    .dev-site-cms .individual-item span {
        font-size: 18px;
    }

    .dev-site-cms .individual-item {
        padding: 30px;
        gap: 10px;
    }

    .individual-item > img {
        width: 50px;
        height: 50px;
    }

    .dev-site-cms-block {
        display: flex;
        flex-direction: column-reverse;
    }

    .dev-site-cms-left {
        width: 100%;
        margin-top: -220px;
    }

    .dev-site-cms {
        padding-top: 150px;
        padding-bottom: 0px;
    }

    .devpage-complect-right {
        display: none;
    }

    .devpage-complect-item-info {
        width: 100%;
    }

    .devcomplex {
        padding: 0 16px;
        padding-bottom: 150px;
    }

    .devcomplex-left {
        display: none;
    }

    .devcomplex-right {
        width: 100%;
    }

    .devcomplex {
        grid-template-columns: 1fr;
    }

    .guarantees-bottom > img {
        display: none;
    }

    .guarantees-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }

    .guarantees-top p {
        font-size: 20px;
    }

    .dev-feedback-cont .title {
        font-size: 70px;
    }

    .dev-feedback-cont .feedback-left div span {
        width: 100%;
        position: relative;
        left: auto;
        top: auto;
        font-size: 20px;
    }

    .dev-feedback-cont {
        gap: 20px;
    }

    .dev-feedback-cont .title {
        font-size: 68px;
    }

    .intro-for-dif-picture h1 {
        display: block;
    }

    .intro-for-dif-picture .intro-block img {
        margin-top: 0;
    }

    .intro-for-dif-picture .intro-content p {
        position: relative;
        left: auto;
        top: auto;
    }

    .intro-for-dif-picture .intro-content {
        width: 62%;
    }

    .devpage-complect-tab p {
        font-size: 16px;
        text-align: center;
    }

    .intro-for-dif-picture .intro-content {
        gap: 16px;
    }

    .intro-content div {
        margin-top: 34px;
    }

    .intro-for-reinf-picture .intro-block > img {
        margin-top: -55px;
    }

    .partof-refinement-item p {
        font-size: 25px;
    }

    .intro-for-reinf-picture .intro-content {
        width: 58%;
    }

    .intro-for-reinf-picture h1 {
        font-size: 67px;
    }

    .promotion-transparency-top > button {
        display: none;
    }

    .promotion-transparency > button {
        display: block;
        width: fit-content;
    }

    .promotion-transparency-bottom {
        grid-template-columns: 1fr 1fr;
    }

    .promotion-intro h1 {
        display: block;
    }

    .promotion-intro .intro-content {
        width: 55%;
    }

    .promotion-intro .intro-content div {
        margin-top: 10px;
    }

    .promotion-intro .intro-content p {
        left: 370px;
    }

    .stable-flow img {
        height: 613px;
    }

    .stable-flow-content {
        top: -45px;
        gap: 30px;
    }

    .stable-flow-content p {
        width: 75%;
    }

    .stable-flow .yellow-btn {
        padding: 22px 0;
        width: 31%;
    }

    .contact .feedback-right {
        padding: 40px 30px;
        width: 40%;
    }

    .contact-social-item:last-of-type {
        grid-column: 1/3;
    }

    .contact-left_top > span {
        left: 255px;
    }

    .about-intro img {
        height: 520px;
    }

    .about-intro {
        padding-bottom: 30px;
    }

    .team .title {
        white-space: unset;
    }

    .why-we-working img {
        width: 500px;
        margin-left: -46px;
    }

    .why-we-working-block {
        padding: 50px 30px;
    }

    .why-we-working p {
        font-size: 18px;
    }

    .approach-block {
        grid-template-columns: 1fr 1fr;
    }

    .services .swiper-change-block {
        display: flex;
    }

    .services-block-index {
        grid-template-columns: 1fr 1fr;
    }

    .comment-item-button-block {
        width: 50%;
        padding-left: 10px;
    }

    .comment-item-button-block button {
        width: 100%;
        font-size: 14px;
    }

    .comment-item-button-block button::before {
        right: 7px;
    }

    .comments-item {
        padding-bottom: 70px;
        position: relative;
    }

    .comments-item-top .comments-rating {
        position: absolute;
        left: 20px;
        bottom: 20px;
    }
}

@media screen and (max-width: 968px) {

    .dev-site-cms .individual-item {
        padding-right: 10px;
    }

    .intro-for-reinf-picture h1 {
        font-size: 60px;
    }

    .why-we-working img {
        width: 50%;
    }
}


@media screen and (max-width: 958px) {
    .individual .feedback-right {
        width: 360px;
        top: 470px;
    }

    .comments-slide span {
        font-size: 16px;
    }

    .comments-slide p {
        font-size: 20px;
    }
}

@media screen and (max-width: 930px) {
    .comments-slide span {
        font-size: 14px;
    }

    .comments-slide p {
        font-size: 18px;
    }

    .comments-slide-top > img {
        height: 345px;
    }

    .com-user-pic img {
        width: 50px;
        height: 50px;
    }

    .dev-site-cms .individual-item {
        padding-top: 20px;
    }

    .dev-site-cms .individual-item span {
        font-size: 16px;
    }

    .dev-site-cms-left {
        margin-top: -205px;
    }
}

@media screen and (max-width: 900px) {
    .intro-content button {
        font-size: 16px;
        padding: 15px 10px;
    }

    .intro-content {
        width: 455px;
    }

    .comments-user {
        width: calc(100% - 100px);
    }

    .comments-item-href {
        right: 5px;
    }

    .stable-flow .btn-with-arrow::before {
        right: 10px;
    }

    .about-intro img {
        height: 565px;
    }

    .about-intro h1 {
        font-size: 49px;
        margin-top: -35px;
    }

    .about-intro-content > span {
        width: 70%;
    }
}

@media screen and (max-width: 890px) {
    .comments-slide span {
        font-size: 12px;
    }

    .comments-slide p {
        font-size: 16px;
    }

    .intro-block img {
        height: 550px;
    }

    .stable-flow .yellow-btn {
        width: 32%;
    }
}

@media screen and (max-width: 870px) {
    .intro-for-reinf-picture h1 {
        font-size: 55px;
    }

    .intro-content div {
        margin-top: 15px;
    }

    .stable-flow .yellow-btn {
        width: 33%;
    }
}

@media screen and (max-width: 850px) {
    .dev-site-cms .individual-item {
        padding-left: 20px;
        padding-bottom: 20px;
    }

    .dev-site-cms-left {
        margin-top: -196px;
    }

    .promotion-intro .intro-content p {
        width: 86%;
        font-size: 16px;
        bottom: calc(100% + 27px);
    }

    .stable-flow-content p {
        font-size: 12px;
    }

    .stable-flow-content h2 {
        font-size: 53px;
    }

    .stable-flow-content {
        top: -43px;
    }

    .stable-flow img {
        height: 595px;
    }
}

@media screen and (max-width: 830px) {
    .comments-item-href {
        width: 65px;
        height: 65px;
        right: 7px;
    }
}

@media screen and (max-width: 820px) {
    .individual-bottom {
        width: 320px;
    }

    .whywe-item5 .whywe-item-picture img {
        width: 180px;
    }

    .whywe-item5 {
        gap: 0;
    }

    .dev-site-cms .individual-item span {
        font-size: 14px;
    }

    .dev-site-cms-left {
        margin-top: -191px;
    }

    .stable-flow-content h2 {
        font-size: 52px;
    }
}

@media screen and (max-width: 810px) {
    .stable-flow-content h2 {
        font-size: 50px;
    }

    .stable-flow img {
        height: 570px;
    }
}


@media screen and (max-width: 790px) {
    .dev-site-cms-left {
        margin-top: -186px;
    }

    .dev-site-cms .individual-item p {
        font-size: 20px;
    }

    .promotion-intro h1 {
        font-size: 58px;
    }

    .stable-flow-content h2 {
        font-size: 47px;
    }

    .stable-flow-content {
        top: -35px;
    }
}

@media screen and (max-width: 760px) {
    .individual .feedback-right {
        top: 550px;
    }
}

@media screen and (max-width: 750px) {

    .header .burger-menu {
        width: calc(100% - 32px);
    }

    .intro-block img {
        display: none;
    }

    .intro-content div {
        flex-direction: column;
        width: 100%;
    }

    .intro-content button {
        width: 100%;
    }

    .intro-content {
        width: 100%;
        position: relative;
    }

    .intro-content span {
        font-size: 16px;
    }

    .intro-content p {
        width: 100%;
        position: relative;
        left: auto;
        bottom: auto;
    }

    /* .comments-slide-top>img {
        height: auto;
    } */
    .title {
        font-size: 60px;
    }

    .work-types-item h2 {
        font-size: 40px;
    }

    .work-types-item li {
        font-size: 18px;
    }

    .portfolio-title .yellow-btn {
        display: none;
    }

    .swiper-change-block {
        justify-content: center;
    }

    .feedback-cont {
        flex-direction: column;
    }

    .feedback-left {
        width: 100%;
    }

    .feedback .feedback-right {
        width: 100%;
    }

    .history-block {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 245px);
    }

    .history-item p {
        font-size: 60px;
    }

    .history-item > a {
        font-size: 20px;
    }

    .running-line ul li {
        font-size: 50px;
    }

    .priorites-top > div {
        flex-direction: column;
        gap: 30px;
        align-items: flex-start;
    }

    .priorites-top {
        padding-bottom: 50px;
    }

    .priorites-block {
        grid-template-columns: 1fr;
    }

    .priorites-item p {
        font-size: 20px;
    }

    .page-type-item h3 {
        font-size: 30px;

    }

    .page-type-item span,
    .page-type-item li {
        font-size: 18px;
    }

    .individual .feedback-right {
        width: 100%;
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
    }

    .individual-bottom {
        display: none;
    }

    .whywe-block {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .whywe-item2,
    .whywe-item4,
    .whywe-item5 {
        flex-direction: column;
    }

    .whywe-item5 .whywe-item-picture img {
        width: 100%;
    }

    .whywe-item2 .whywe-item-picture img,
    .whywe-item4 .whywe-item-picture img {
        width: 183px;
    }

    .whywe-item span {
        padding-right: 16px;
    }

    .project-discuss-block {
        padding: 80px 16px;
        gap: 20px;
        text-align: left;
        align-items: flex-start;
    }

    footer.header {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }

    footer.header button {
        width: 100%;
    }

    footer.header nav {
        width: 100%;
        display: flex;
    }

    footer.header nav ul {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
    }

    footer .navbar-dropdown {
        bottom: calc(100% - 44px);
    }

    .foot {
        flex-direction: column;
        gap: 30px;
    }


    .comments-item-href {
        top: 7px;
    }

    .questions-item p {
        font-size: 20px;
    }

    .questions-block {
        gap: 45px;
    }

    .questions-top {
        position: relative;
        padding-right: 67px;
    }

    .questions-btn {
        position: absolute;
        right: 0;
        top: -25px;
    }

    .questions-item {
        padding-top: 25px;
    }

    .questions-item {
        height: 149px;
    }

    .questions-item-active {
        height: fit-content;
    }

    .questions-item p {
        max-width: 271px;
    }

    .questions-item:first-of-type p {
        max-width: 227px;
    }

    .intro-for-dif-picture .intro-content {
        width: 100%;
    }

    .dev-site-cms-right {
        grid-template-columns: 1fr;
    }

    .dev-site-cms-left img:last-of-type {
        display: none;
    }

    .dev-site-cms-left {
        display: none;
    }

    .devpage-complect-tab p {
        font-size: 18px;
    }

    .devpage-complect-top {
        grid-template-columns: 1fr;
    }

    .devcomplex-content {
        grid-template-columns: 1fr;
    }

    .devcomplex-item span {
        white-space: unset;
    }

    .devcomplex-right button {
        width: 100%;
    }

    .guarantees-block > div {
        grid-template-columns: 1fr;
    }

    .guarantees-block button {
        width: 100%;
    }

    .refinment-need-item {
        flex-direction: column;
    }

    .refinment-need-item > img {
        width: 100%;
    }

    .partof-refinement-block {
        grid-template-columns: 1fr;
    }

    .partof-refinement-item {
        padding: 30px 20px;
    }

    .partof-refinement-item li {
        background: none;
        padding-left: 0;
        padding-top: 45px;
    }

    .partof-refinement-item li::before {
        top: 0;
        left: 0;
    }

    .price-top {
        padding-right: 0;
    }

    .price .questions-bottom li {
        padding-right: 0;
    }

    .price .questions-bottom {
        padding: 30px 10px;
    }

    .price .questions-item:first-of-type p {
        max-width: 100%;
    }

    .price .questions-item {
        height: 76px;
        padding-top: 0;
    }

    .price .questions-btn {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
    }

    .price .questions-top {
        padding: 13px 10px;
    }

    .price .questions-item-active {
        height: fit-content;
    }

    .price .questions-bottom li {
        padding-bottom: 15px;
    }

    .price .questions-bottom {
        gap: 15px;
    }

    .price .questions-block {
        gap: 20px;
    }

    .promotion-intro .intro-content p {
        position: relative;
        bottom: auto;
        left: auto;
    }

    .promotion-intro .intro-content {
        width: 100%;
    }

    .stable-flow img {
        display: none;
    }

    .stable-flow-content {
        width: 100%;
        position: relative;
        transform: none;
        left: auto;
        top: auto;
        align-items: flex-start;
        text-align: left;
    }

    .stable-flow .yellow-btn {
        width: 100%;
    }

    .promotion-transparency-bottom {
        grid-template-columns: 1fr;
    }

    .promotion-transparency > button {
        width: 100%;
    }

    .contact {
        padding-top: 100px;
    }

    .contact-block {
        flex-direction: column;
        gap: 50px;
    }

    .contact-left {
        width: 100%;
    }

    .contact-left_top > span {
        position: relative;
        top: auto;
        left: auto;
    }

    .contact-left_top {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .contact-left_socials {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .contact-social-item:last-of-type {
        grid-column: 1/2;
    }

    .contact .feedback-right {
        width: 100%;
        padding: 30px 20px;
    }

    .contact-left h2 {
        font-size: 70px;
    }

    .about-intro img {
        height: fit-content;
    }

    .about-intro {
        padding-top: 100px;
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .about-intro-content {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        width: 100%;
        gap: 20px;
        text-align: left;
    }

    .about-intro h3 {
        margin-top: 10px;
        font-size: 22px;
    }

    .about-intro-content > span {
        width: 100%;
        font-size: 18px;
    }

    .about-intro-bottom {
        grid-template-columns: 1fr;
    }

    .about-intro-bottom-item {
        padding: 20px;
    }

    .market-block {
        padding: 10px;
    }

    .market-box {
        display: none;
    }

    .market-content {
        width: 100%;
        padding: 50px 20px;
    }

    .market-content > button {
        width: 100%;
    }

    .market-content h2 {
        font-size: 40px;
    }

    .team-block {
        grid-template-columns: 1fr;
    }

    .why-we-working-block {
        padding: 100px 10px;
        gap: 50px;
        flex-direction: column-reverse;
    }

    .why-we-working-content button {
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
    }

    .why-we-working img {
        width: calc(100% + 52px);
        margin-left: -16px;
    }

    .approach-block {
        grid-template-columns: 1fr;
    }

    .services .page-type-item h3 {
        font-size: 22px;
    }

    .services-block-index {
        grid-template-columns: 1fr;
    }

    .services-block-index .page-type-item {
        display: none;
    }

    .services-block-index .page-type-item:first-of-type {
        display: flex;
    }


    .portfolio-block-index {
        grid-template-columns: 1fr;
    }

    .portfolio-block-index .work-slide {
        display: none;
    }

    .portfolio-block-index .work-slide:first-of-type {
        display: flex;
    }

    .comments-block-index {
        grid-template-columns: 1fr;
    }

    .services > span {
        white-space: unset;
        text-align: center;
    }

    .comment-item-logo {
        flex-direction: column;
        align-items: flex-start;
    }

    .comments-item {
        display: none;
    }

    .comments-item:last-of-type {
        display: flex;
    }
}

/* responsive end */
/* responsive end */

/* Global responsive H1 sizes */
@media screen and (max-width: 991px) {
    h1 {
        font-size: 60px !important;
    }

    .intro {
        padding-top: 80px;
    }

    .html-sitemap__list--services {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media screen and (max-width: 767px) {
    h1 {
        font-size: 50px !important;
    }

    .intro {
        padding-top: 60px;
    }

    .html-sitemap__list--pages,
    .html-sitemap__list--services {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 576px) {
    h1 {
        font-size: 40px !important;
    }

    .intro {
        padding-top: 40px;
    }

    .html-sitemap {
        padding-top: 40px;
        padding-bottom: 40px;
    }

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

    .about-company__image {
        float: none;
        width: 100%;
        max-width: none;
        margin: 0 0 24px;
        border-radius: 14px;
    }

    .about-company__content {
        margin-top: 30px;
        font-size: 16px;
        line-height: 1.55;
    }

    .html-sitemap__section {
        margin-top: 32px;
    }

    .html-sitemap__list--pages,
    .html-sitemap__list--services {
        grid-template-columns: 1fr;
    }

    .services-catalog,
    .service-detail,
    .service-page__text,
    .service-page__faq,
    .work-types,
    .portfolio,
    .feedback,
    .history,
    .priorites,
    .page-type,
    .individual,
    .whywe,
    .dev-site-cms,
    .refinment-need,
    .promotion-effect,
    .contact,
    .about-intro,
    .services {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .comments,
    .project-discuss,
    .devpage-complect,
    .guarantees,
    .partof-refinement,
    .stable-flow,
    .promotion-transparency,
    .about-intro-bottom,
    .market,
    .team,
    .why-we-working,
    .approach,
    .questions,
    .devcomplex {
        padding-bottom: 40px;
    }

    .all-services-link {
        padding-bottom: 40px;
    }

    .service-page__hero {
        padding-top: 30px;
    }

    .service-page__hero-grid {
        padding-top: 36px;
        padding-bottom: 40px;
    }

    .service-page__work {
        padding-top: 6px;
        padding-bottom: 40px;
    }

    .service-page__related {
        padding-top: 30px;
        padding-bottom: 40px;
    }

    .project-discuss-block,
    .market-content,
    .why-we-working-block {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .priorites-top {
        padding-bottom: 40px;
    }
}