:root {
    --black: #1d1616;
    --dark-red: #8e1616;
    --red: #d84040;
    --light-red: #ffaaaa;
    --light: #f8f8f8;
    --light-grey: #eeeeee;
    --dark-grey: #c7c7c7;

    --h1-desktop-font-family: "Onest", sans-serif;
    --h1-desktop-font-size: 50px;
    --h1-desktop-line-height: 135%;
    --h1-desktop-font-weight: 700;
    --h1-desktop-font-style: normal;
    --h2-font-family: "Onest", sans-serif;
    --h2-font-size: 36px;
    --h2-line-height: 125%;
    --h2-font-weight: 700;
    --h2-font-style: normal;
    --text-font-family: "Onest", sans-serif;
    --text-font-size: 18px;
    --text-line-height: 150%;
    --text-font-weight: 200;
    --text-font-style: normal;
    --buttons-font-family: "Onest", sans-serif;
    --buttons-font-size: 18px;
    --buttons-line-height: 100%;
    --buttons-font-weight: 600;
    --buttons-font-style: normal;
    --h3-font-family: "Onest", sans-serif;
    --h3-font-size: 28px;
    --h3-line-height: 125%;
    --h3-font-weight: 700;
    --h3-font-style: normal;
    --menu-items-font-family: "Onest", sans-serif;
    --menu-items-font-size: 16px;
    --menu-items-line-height: 100%;
    --menu-items-font-weight: 200;
    --menu-items-font-style: normal;
    --h1-mobile-font-family: "Onest", sans-serif;
    --h1-mobile-font-size: 28px;
    --h1-mobile-line-height: 135%;
    --h1-mobile-font-weight: 700;
    --h1-mobile-font-style: normal;
    --projects-mobile-font-family: "Onest", sans-serif;
    --projects-mobile-font-size: 22px;
    --projects-mobile-line-height: 125%;
    --projects-mobile-font-weight: 700;
    --projects-mobile-font-style: normal;
}
body{
    background: var(--light, #f8f8f8);
}
.container {
    margin-right: auto;
    margin-left: auto;
    width: 92%;
    max-width: 1328px;
}

.header {
    padding-top: 16px;
    padding-bottom: 16px;
    position: fixed;
    width: 100%;
    top: 0;
    background: var(--light, #f8f8f8);
    z-index: 2;
}

.header .container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.header__logo {
    display: block;
    width: 138px;
    height: 59px;
    text-decoration: none;
}

.header__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header__nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    gap: 32px;
}

.header__nav ul a {
    text-decoration: none;
    color: var(--black, #1d1616);
    font-family: var(--menu-items-font-family, "Onest", sans-serif);
    font-size: var(--menu-items-font-size, 16px);
    line-height: var(--menu-items-line-height, 100%);
    font-weight: var(--menu-items-font-weight, 200);
    transition: color 0.3s ease, border-bottom 0.3s ease;
}
.header__nav ul a:hover{
    color: var(--red, #d84040);
    border-bottom: 1px solid var(--red, #d84040);
}
main{
    margin-top: 91px;
}
.hero {
    margin-bottom: 96px;
}

.hero__top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    padding-top: 92.35px;
    padding-bottom: 92.35px;
}

.hero__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
    width: 67%;
}

.hero__title {
    color: var(--black, #1d1616);
    font-family: var(--h1-desktop-font-family, "Onest", sans-serif);
    font-size: var(--h1-desktop-font-size, 50px);
    line-height: var(--h1-desktop-line-height, 135%);
    font-weight: var(--h1-desktop-font-weight, 700);
}
.link-arrow{
    display: flex;
    align-items: center;
    gap: 8px;

    text-decoration: none;
    padding: 12px 24px 12px 24px;
    background: var(--red, #d84040);
    border-radius: 60px;

    color: var(--light, #f8f8f8);
    font-family: var(--buttons-font-family, "Onest", sans-serif);
    font-size: var(--buttons-font-size, 18px);
    line-height: var(--buttons-line-height, 100%);
    font-weight: var(--buttons-font-weight, 600);
    transition: background 0.3s ease;
    width: fit-content;
}
.link-arrow:hover{
    background: var(--dark-red, #8e1616);
}

.link-arrow::after {
    display: block;
    content: '';
    width: 24px;
    height: 25px;
    background: url('data:image/svg+xml,<svg class="vuesax-outline-arrow-right2" width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg" ><path d="M14.4301 19.3211C14.2401 19.3211 14.0501 19.2511 13.9001 19.1011C13.6101 18.8111 13.6101 18.3311 13.9001 18.0411L19.4401 12.5011L13.9001 6.96109C13.6101 6.67109 13.6101 6.19109 13.9001 5.90109C14.1901 5.61109 14.6701 5.61109 14.9601 5.90109L21.0301 11.9711C21.3201 12.2611 21.3201 12.7411 21.0301 13.0311L14.9601 19.1011C14.8101 19.2511 14.6201 19.3211 14.4301 19.3211Z" fill="%23F8F8F8" /><path d="M20.332 13.25H3.50195C3.09195 13.25 2.75195 12.91 2.75195 12.5C2.75195 12.09 3.09195 11.75 3.50195 11.75H20.332C20.742 11.75 21.082 12.09 21.082 12.5C21.082 12.91 20.742 13.25 20.332 13.25Z" fill="%23F8F8F8" /></svg>');
    transition: transform 0.3s ease;
}
.link-arrow:hover::after{
    transform: translateX(8px);
}
.link-arrow.link-arrow--center{
    margin-right: auto;
    margin-left: auto;
}

/* .hero__link {
    display: flex;
    align-items: center;
    gap: 8px;

    text-decoration: none;
    padding: 12px 24px 12px 24px;
    background: var(--red, #d84040);
    border-radius: 60px;

    color: var(--light, #f8f8f8);
    font-family: var(--buttons-font-family, "Onest", sans-serif);
    font-size: var(--buttons-font-size, 18px);
    line-height: var(--buttons-line-height, 100%);
    font-weight: var(--buttons-font-weight, 600);
    transition: background 0.3 ease;
}
.hero__link:hover{
    background: var(--dark-red, #8e1616);
}

.hero__link::after {
    display: block;
    content: '';
    width: 24px;
    height: 25px;
    background: url('data:image/svg+xml,<svg class="vuesax-outline-arrow-right2" width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg" ><path d="M14.4301 19.3211C14.2401 19.3211 14.0501 19.2511 13.9001 19.1011C13.6101 18.8111 13.6101 18.3311 13.9001 18.0411L19.4401 12.5011L13.9001 6.96109C13.6101 6.67109 13.6101 6.19109 13.9001 5.90109C14.1901 5.61109 14.6701 5.61109 14.9601 5.90109L21.0301 11.9711C21.3201 12.2611 21.3201 12.7411 21.0301 13.0311L14.9601 19.1011C14.8101 19.2511 14.6201 19.3211 14.4301 19.3211Z" fill="%23F8F8F8" /><path d="M20.332 13.25H3.50195C3.09195 13.25 2.75195 12.91 2.75195 12.5C2.75195 12.09 3.09195 11.75 3.50195 11.75H20.332C20.742 11.75 21.082 12.09 21.082 12.5C21.082 12.91 20.742 13.25 20.332 13.25Z" fill="%23F8F8F8" /></svg>');
    transition: transform 0.3s ease;
}
.hero__link:hover::after{
    transform: translateX(8px);
} */

.hero__features {
    display: flex;
    flex-direction: row;
    gap: 16px;
}

.hero__features-item {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hero__features-title {
    color: var(--black, #1d1616);
    font-family: var(--h3-font-family, "Onest", sans-serif);
    font-size: var(--h3-font-size, 28px);
    line-height: var(--h3-line-height, 125%);
    font-weight: var(--h3-font-weight, 700);
}

.hero__features-description {
    color: var(--black, #1d1616);
    font-family: "Onest", sans-serif;
    font-size: 16px;
    line-height: 150%;
    font-weight: 200;
    opacity: 0.64;
}

.about {
    background: var(--black, #1d1616);
    padding-top: 96px;
    padding-bottom: 96px;
}

.about .container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.about__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
    width: 43%;
}

.about__title-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.about__subtitle {
    color: var(--light, #f8f8f8);
    font-family: var(--buttons-font-family, "Onest", sans-serif);
    font-size: var(--buttons-font-size, 18px);
    line-height: var(--buttons-line-height, 100%);
    font-weight: var(--buttons-font-weight, 600);
    opacity: 0.6;
}

.about__title {
    color: var(--light, #f8f8f8);
    font-family: var(--h2-font-family, "Onest", sans-serif);
    font-size: var(--h2-font-size, 36px);
    line-height: var(--h2-line-height, 125%);
    font-weight: var(--h2-font-weight, 700);
}

.about__description {
    color: var(--light, #f8f8f8);
    font-family: var(--text-font-family, "Onest", sans-serif);
    font-size: var(--text-font-size, 18px);
    line-height: var(--text-line-height, 150%);
    font-weight: var(--text-font-weight, 400);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.about__description p {
    margin: 0;
    padding: 0;
}

.about__description p.bold {
    font-weight: var(--h3-font-weight, 700);
}

/* .about__link {
    display: flex;
    align-items: center;
    gap: 8px;

    text-decoration: none;
    padding: 12px 24px 12px 24px;
    background: var(--red, #d84040);
    border-radius: 60px;

    color: var(--light, #f8f8f8);
    font-family: var(--buttons-font-family, "Onest", sans-serif);
    font-size: var(--buttons-font-size, 18px);
    line-height: var(--buttons-line-height, 100%);
    font-weight: var(--buttons-font-weight, 600);

}

.about__link::after {
    display: block;
    content: '';
    width: 24px;
    height: 25px;
    background: url('data:image/svg+xml,<svg class="vuesax-outline-arrow-right2" width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg" ><path d="M14.4301 19.3211C14.2401 19.3211 14.0501 19.2511 13.9001 19.1011C13.6101 18.8111 13.6101 18.3311 13.9001 18.0411L19.4401 12.5011L13.9001 6.96109C13.6101 6.67109 13.6101 6.19109 13.9001 5.90109C14.1901 5.61109 14.6701 5.61109 14.9601 5.90109L21.0301 11.9711C21.3201 12.2611 21.3201 12.7411 21.0301 13.0311L14.9601 19.1011C14.8101 19.2511 14.6201 19.3211 14.4301 19.3211Z" fill="%23F8F8F8" /><path d="M20.332 13.25H3.50195C3.09195 13.25 2.75195 12.91 2.75195 12.5C2.75195 12.09 3.09195 11.75 3.50195 11.75H20.332C20.742 11.75 21.082 12.09 21.082 12.5C21.082 12.91 20.742 13.25 20.332 13.25Z" fill="%23F8F8F8" /></svg>');
} */

.about__stats-wrapper {
    width: 50%;
}

.about__stats-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 320px);
    grid-template-rows: repeat(2, 159px);
    align-content: center;
    justify-content: flex-end;
}

.about__stats-item:nth-child(1) {
    border-bottom: 1px solid var(--dark-grey, #c7c7c7);
    border-right: 1px solid var(--dark-grey, #c7c7c7);
    padding-top: 32px;
    padding-bottom: 32px;
}

.about__stats-item:nth-child(2) {
    padding: 32px;
    border-bottom: 1px solid var(--dark-grey, #c7c7c7);
}

.about__stats-item:nth-child(3) {
    border-right: 1px solid var(--dark-grey, #c7c7c7);
    padding-top: 32px;
    padding-bottom: 32px;
}

.about__stats-item:nth-child(4) {
    padding: 32px
}

.about__stats-item-title {
    color: var(--light, #f8f8f8);
    font-family: var(--h1-desktop-font-family, "Onest", sans-serif);
    font-size: var(--h1-desktop-font-size, 50px);
    line-height: var(--h1-desktop-line-height, 135%);
    font-weight: var(--h1-desktop-font-weight, 700);
}

.about__stats-item-description {
    color: var(--light, #f8f8f8);
    font-family: var(--text-font-family, "Onest", sans-serif);
    font-size: var(--text-font-size, 18px);
    line-height: var(--text-line-height, 150%);
    font-weight: var(--text-font-weight, 200);
}

.portfolio {
    padding-top: 96px;
    padding-bottom: 96px;
}

.portfolio__title-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 48px;
}

.portfolio__subtitle {
    color: var(--black, #1d1616);
    font-family: var(--buttons-font-family, "Onest", sans-serif);
    font-size: var(--buttons-font-size, 18px);
    line-height: var(--buttons-line-height, 100%);
    font-weight: var(--buttons-font-weight, 600);
    opacity: 0.6;
}

.portfolio__title {
    color: var(--black, #1d1616);
    font-family: var(--h2-font-family, "Onest", sans-serif);
    font-size: var(--h2-font-size, 36px);
    line-height: var(--h2-line-height, 125%);
    font-weight: var(--h2-font-weight, 700);
}

.portfolio__wrapper {
    display: grid;
    grid-template-columns: repeat(2, 50%);
    gap: 16px;
    margin-bottom: 72px;
}

.portfolio__item {
    padding: 28px;
    height: 350px;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    display: flex;
    flex-direction: column;
    justify-content: end;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.portfolio__item--hover{
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.portfolio__item--hover::before{
    content: '';
    position: absolute;
    inset: 0; /* аналог top: 0; right: 0; bottom: 0; left: 0 */
    background: rgba(0, 0, 0, 0.5); /* изначально прозрачный */
    transition: background 0.3s ease;
    pointer-events: none; /* чтобы не блокировал клики */
    z-index: 1; /* поверх background, но под контентом */
}
.portfolio__item--hover:hover::before {
  background: rgba(0, 0, 0, 0.8); /* затемнение */
}

.portfolio__item:first-child {
    height: 550px;
    grid-column-start: 1;
    grid-column-end: 3;
}

.portfolio__item-subtitle {
    color: var(--light, #f8f8f8);
    font-family: var(--menu-items-font-family, "Onest", sans-serif);
    font-size: var(--menu-items-font-size, 16px);
    line-height: var(--menu-items-line-height, 100%);
    font-weight: var(--menu-items-font-weight, 700);
    margin-bottom: 12px;
    max-width: 490px;
    z-index: 1;
}

.portfolio__item-title {
    color: #ffffff;
    font-family: var(--h3-font-family, "Onest", sans-serif);
    font-size: var(--h3-font-size, 28px);
    line-height: var(--h3-line-height, 125%);
    font-weight: var(--h3-font-weight, 700);
    max-width: 490px;
    z-index: 1;
}

.link-arrow-hover{
    transition: opacity 0.3s ease, visibility 0.3s ease, height 0.3s ease, margin 0.3s ease, color 0.3s ease;
}
.portfolio__item-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    color: var(--light, #f8f8f8);
    font-family: var(--buttons-font-family, "Onest", sans-serif);
    font-size: var(--buttons-font-size, 18px);
    line-height: var(--buttons-line-height, 100%);
    font-weight: var(--buttons-font-weight, 600);
    text-decoration: none;
    opacity: 0;
    height: 0;
    margin-top: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, height 0.3s ease, margin 0.3s ease, color 0.3s ease;
    z-index: 1;
}
.link-arrow-hover::after {
    transition: transform 0.3s ease;
}
.portfolio__item-link::after {
    display: block;
    content: '';
    width: 24px;
    height: 24px;
    background: url('data:image/svg+xml,<svg class="vuesax-outline-arrow-right" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.4301 18.8211C14.2401 18.8211 14.0501 18.7511 13.9001 18.6011C13.6101 18.3111 13.6101 17.8311 13.9001 17.5411L19.4401 12.0011L13.9001 6.46109C13.6101 6.17109 13.6101 5.69109 13.9001 5.40109C14.1901 5.11109 14.6701 5.11109 14.9601 5.40109L21.0301 11.4711C21.3201 11.7611 21.3201 12.2411 21.0301 12.5311L14.9601 18.6011C14.8101 18.7511 14.6201 18.8211 14.4301 18.8211Z" fill="%23D84040" /><path d="M20.332 12.75H3.50195C3.09195 12.75 2.75195 12.41 2.75195 12C2.75195 11.59 3.09195 11.25 3.50195 11.25H20.332C20.742 11.25 21.082 11.59 21.082 12C21.082 12.41 20.742 12.75 20.332 12.75Z" fill="%23D84040" /></svg>');
    transition: transform 0.3s ease;
}
.link-arrow-hover:hover{
    color: var(--red, #d84040);
}
.portfolio__item-link:hover{
    color: var(--red, #d84040);
}
.link-arrow-hover:hover::after{
    transform: translate(8px);
}
.portfolio__item-link:hover::after{
    transform: translate(8px);
}

.portfolio__item::before {
  content: '';
  position: absolute;
  inset: 0; /* аналог top: 0; right: 0; bottom: 0; left: 0 */
  background: rgba(0, 0, 0, 0); /* изначально прозрачный */
  transition: background 0.3s ease;
  pointer-events: none; /* чтобы не блокировал клики */
  z-index: 1; /* поверх background, но под контентом */
}
.portfolio__item:hover::before {
  background: rgba(0, 0, 0, 0.8); /* затемнение */
}
.portfolio__item:hover .portfolio__item-link {
    height: auto;
    margin-top: 24px;
    opacity: 1;
    visibility: visible;
}

/* .portfolio__more {
    display: flex;
    align-items: center;
    gap: 8px;

    text-decoration: none;
    padding: 12px 24px 12px 24px;
    background: var(--red, #d84040);
    border-radius: 60px;

    color: var(--light, #f8f8f8);
    font-family: var(--buttons-font-family, "Onest", sans-serif);
    font-size: var(--buttons-font-size, 18px);
    line-height: var(--buttons-line-height, 100%);
    font-weight: var(--buttons-font-weight, 600);
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.portfolio__more::after {
    display: block;
    content: '';
    width: 24px;
    height: 25px;
    background: url('data:image/svg+xml,<svg class="vuesax-outline-arrow-right2" width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg" ><path d="M14.4301 19.3211C14.2401 19.3211 14.0501 19.2511 13.9001 19.1011C13.6101 18.8111 13.6101 18.3311 13.9001 18.0411L19.4401 12.5011L13.9001 6.96109C13.6101 6.67109 13.6101 6.19109 13.9001 5.90109C14.1901 5.61109 14.6701 5.61109 14.9601 5.90109L21.0301 11.9711C21.3201 12.2611 21.3201 12.7411 21.0301 13.0311L14.9601 19.1011C14.8101 19.2511 14.6201 19.3211 14.4301 19.3211Z" fill="%23F8F8F8" /><path d="M20.332 13.25H3.50195C3.09195 13.25 2.75195 12.91 2.75195 12.5C2.75195 12.09 3.09195 11.75 3.50195 11.75H20.332C20.742 11.75 21.082 12.09 21.082 12.5C21.082 12.91 20.742 13.25 20.332 13.25Z" fill="%23F8F8F8" /></svg>');
} */

.feedback {
    padding-top: 96px;
    padding-bottom: 96px;
    background: var(--red, #d84040);
}

.feedback .container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.feedback__title {
    color: var(--light, #f8f8f8);
    font-family: var(--h2-font-family, "Onest", sans-serif);
    font-size: var(--h2-font-size, 36px);
    line-height: var(--h2-line-height, 125%);
    font-weight: var(--h2-font-weight, 700);
    margin-bottom: 16px;
}

.feedback__description {
    color: var(--light, #f8f8f8);
    text-align: center;
    font-family: var(--text-font-family, "Onest", sans-serif);
    font-size: var(--text-font-size, 18px);
    line-height: var(--text-line-height, 150%);
    font-weight: var(--text-font-weight, 200);
    opacity: 0.8;
    max-width: 506px;
}

.feedback__form {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 48px;
}

.feedback__fields {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: flex-start;
}

.feedback__field {
    position: relative;
}
.feedback__field.feedback__field--error .feedback__error{
    display: flex;
    opacity: 1;
    height: auto;
}
.feedback__field.feedback__field--error .feedback__input{
    background: #ffcdcd;
}
.feedback__field.feedback__field--error .feedback__input::placeholder{
    color: var(--dark-red, #8e1616);
}

.feedback__input {
    border: none;
    outline: none;
    background: var(--light, #f8f8f8);
    border-radius: 30px;
    padding: 12px 20px 12px 20px;
    width: 220px;
    box-sizing: border-box;

    color: var(--black, #1D1616);
    font-family: var(--buttons-font-family, "Onest", sans-serif);
    font-size: var(--buttons-font-size, 18px);
    line-height: var(--buttons-line-height, 100%);
    font-weight: var(--buttons-font-weight, 600);
    transition: background 0.3s ease;
}

.feedback__input::placeholder {
    color: var(--dark-grey, #c7c7c7);
    font-family: var(--buttons-font-family, "Onest", sans-serif);
    font-size: var(--buttons-font-size, 18px);
    line-height: var(--buttons-line-height, 100%);
    font-weight: var(--buttons-font-weight, 600);
    transition: color 0.3s ease;
}

.feedback__submit {
    width: 198px;
    box-sizing: border-box;
    background: var(--black, #1d1616);
    border-radius: 60px;
    padding: 12px 24px 12px 24px;
    border: none;
    outline: none;
    color: var(--light, #f8f8f8);
    font-family: var(--buttons-font-family, "Onest", sans-serif);
    font-size: var(--buttons-font-size, 18px);
    line-height: var(--buttons-line-height, 100%);
    font-weight: var(--buttons-font-weight, 600);
    cursor: pointer;
    border: 1px solid var(--black, #1d1616);
    transition: border 0.3s ease, background 0.3s ease;
}
.feedback__submit:hover{
    background: transparent;
    border: 1px solid var(--light, #f8f8f8);
}

.feedback__error {
    opacity: 0;
    height: 0;
    display: none;

    margin-top: 6px;
    color: var(--light, #f8f8f8);
    font-family: "Onest", sans-serif;
    font-size: 14px;
    line-height: 150%;
    font-weight: 600;
    display: flex;
    gap: 4px;
    align-items: center;
    transition: opacity 0.3s ease, height0.3s ease, margin-top 0.3s ease;
}
.feedback__error::before{
    display: block;
    content: '';
    width: 20px;
    height: 20px;
    background: url('data:image/svg+xml,<svg class="vector" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 15C10.2833 15 10.521 14.904 10.713 14.712C10.905 14.52 11.0007 14.2827 11 14V10C11 9.71667 10.904 9.47933 10.712 9.288C10.52 9.09667 10.2827 9.00067 10 9C9.71733 8.99933 9.48 9.09533 9.288 9.288C9.096 9.48067 9 9.718 9 10V14C9 14.2833 9.096 14.521 9.288 14.713C9.48 14.905 9.71733 15.0007 10 15ZM10 7C10.2833 7 10.521 6.904 10.713 6.712C10.905 6.52 11.0007 6.28267 11 6C10.9993 5.71733 10.9033 5.48 10.712 5.288C10.5207 5.096 10.2833 5 10 5C9.71667 5 9.47933 5.096 9.288 5.288C9.09667 5.48 9.00067 5.71733 9 6C8.99933 6.28267 9.09533 6.52033 9.288 6.713C9.48067 6.90567 9.718 7.00133 10 7ZM10 20C8.61667 20 7.31667 19.7373 6.1 19.212C4.88334 18.6867 3.825 17.9743 2.925 17.075C2.025 16.1757 1.31267 15.1173 0.788001 13.9C0.263335 12.6827 0.000667933 11.3827 1.26582e-06 10C-0.000665401 8.61733 0.262001 7.31733 0.788001 6.1C1.314 4.88267 2.02633 3.82433 2.925 2.925C3.82367 2.02567 4.882 1.31333 6.1 0.788C7.318 0.262667 8.618 0 10 0C11.382 0 12.682 0.262667 13.9 0.788C15.118 1.31333 16.1763 2.02567 17.075 2.925C17.9737 3.82433 18.6863 4.88267 19.213 6.1C19.7397 7.31733 20.002 8.61733 20 10C19.998 11.3827 19.7353 12.6827 19.212 13.9C18.6887 15.1173 17.9763 16.1757 17.075 17.075C16.1737 17.9743 15.1153 18.687 13.9 19.213C12.6847 19.739 11.3847 20.0013 10 20ZM10 18C12.2333 18 14.125 17.225 15.675 15.675C17.225 14.125 18 12.2333 18 10C18 7.76667 17.225 5.875 15.675 4.325C14.125 2.775 12.2333 2 10 2C7.76667 2 5.875 2.775 4.325 4.325C2.775 5.875 2 7.76667 2 10C2 12.2333 2.775 14.125 4.325 15.675C5.875 17.225 7.76667 18 10 18Z" fill="%23F8F8F8" /></svg>');
}

.feedback__note {
    color: var(--light, #f8f8f8);
    text-align: center;
    font-family: "Onest", sans-serif;
    font-size: 14px;
    line-height: 150%;
    font-weight: 400;
    opacity: 0.8;
}

.feedback__note a {
    color: var(--light, #f8f8f8);
    text-align: center;
    font-family: "Onest", sans-serif;
    font-size: 14px;
    line-height: 150%;
    font-weight: 400;
    opacity: 0.8;
}

.footer {
    padding-top: 50px;
    padding-bottom: 50px;
    background: var(--black, #1d1616);
}

.footer .container {
    display: flex;
    flex-direction: column;
}

.footer__top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.footer__info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.footer__info p {
    margin: 0;
    padding: 0;
    color: var(--dark-grey, #c7c7c7);
    font-family: var(--text-font-family, "Onest", sans-serif);
    font-size: var(--text-font-size, 18px);
    line-height: var(--text-line-height, 150%);
    font-weight: var(--text-font-weight, 200);
    max-width: 300px;
}

.footer__info a {
    text-decoration: none;
    color: var(--dark-grey, #c7c7c7);
    font-family: var(--text-font-family, "Onest", sans-serif);
    font-size: var(--text-font-size, 18px);
    line-height: var(--text-line-height, 150%);
    font-weight: var(--text-font-weight, 200);
    max-width: 300px;
}

.footer__socials {
    display: flex;
    flex-direction: row;
    margin: 0;
    padding: 0;
    list-style-type: none;
    gap: 24px;
    margin-top: 25px;
}

.mobile-menu__socials {
    display: flex;
    flex-direction: row;
    margin: 0;
    padding: 0;
    list-style-type: none;
    gap: 24px;
    margin-top: 25px;
}
.footer__menu {
    display: flex;
    flex-direction: row;
    gap: 72px;
}

.footer__title {
    color: var(--light, #f8f8f8);
    font-family: var(--text-font-family, "Onest", sans-serif);
    font-size: var(--text-font-size, 18px);
    line-height: var(--text-line-height, 150%);
    font-weight: var(--text-font-weight, 700);
}

.footer__column {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer__column ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.footer__column--two-columns {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 32px;
    padding: 0;
    margin: 0;
}

.footer__column a {
    text-decoration: none;
    color: var(--light, #f8f8f8);
    font-family: var(--text-font-family, "Onest", sans-serif);
    font-size: var(--text-font-size, 18px);
    line-height: var(--text-line-height, 150%);
    font-weight: var(--text-font-weight, 200);
    opacity: 0.64;
}

.footer__middle {
    margin-top: 80px;
    z-index: 0;
}

.footer__middle img {
    width: 100%;
}

.footer__bottom {
    display: flex;
    flex-direction: row;
    gap: 40px;
    z-index: 1;
    margin-top: -32px;
}

.footer__bottom span {
    color: var(--dark-grey, #c7c7c7);
    font-family: var(--text-font-family, "Onest", sans-serif);
    font-size: var(--text-font-size, 18px);
    line-height: var(--text-line-height, 150%);
    font-weight: var(--text-font-weight, 200);
}

.footer__bottom a {
    color: var(--dark-grey, #c7c7c7);
    font-family: var(--text-font-family, "Onest", sans-serif);
    font-size: var(--text-font-size, 18px);
    line-height: var(--text-line-height, 150%);
    font-weight: var(--text-font-weight, 200);
    text-decoration: none;
}

@media (max-width:1280px) {
    .about .container {
        flex-direction: column;
        gap: 60px;
    }

    .about__info {
        width: 100%;
    }

    .about__stats-wrapper {
        width: 100%;
        justify-content: center;
    }

    .footer__bottom {
        margin-top: 0;
    }

    .hero__features {
        flex-wrap: wrap;
        gap: unset;
        justify-content: space-between;
    }

    .hero__features-item {
        width: 45%;
    }
}

@media (max-width:1024px) {
    .hero__title {
        font-family: var(--h1-mobile-font-family, "Onest", sans-serif);
        font-size: var(--h1-mobile-font-size, 28px);
    }

    .hero__img {
        width: 320px;
    }

    .hero__img img {
        width: 100%;
    }

    .hero__features-title {
        font-family: var(--h3-font-family, "Onest", sans-serif);
        font-size: var(--h3-font-size, 28px);
    }

    .hero__features-description {
        font-family: "Onest", sans-serif;
        font-size: 16px;
    }

    .header__logo {
        width: 120px;
        height: 51px;
    }

    .about__subtitle {
        font-family: var(--buttons-font-family, "Onest", sans-serif);
        font-size: var(--buttons-font-size, 18px);
    }

    .about__title {
        font-family: var(--h2-font-family, "Onest", sans-serif);
        font-size: var(--h2-font-size, 36px);
    }

    .about__description {
        font-family: var(--text-font-family, "Onest", sans-serif);
        font-size: var(--text-font-size, 18px);
    }
}

@media (max-width:768px) {
    .portfolio__item:hover .portfolio__item-link{
        display: none;
    }
    .portfolio__wrapper {
        display: flex;
        flex-direction: column;
    }

    .portfolio__item {
        height: 320px !important;
    }
}

/* Стили бургера */
.burger {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
    /* чтобы быть над меню */
    position: relative;
}

.burger span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--black, #1d1616);
    transition: all 0.3s ease;
    transform-origin: 1px;
}

/* Крестик при активном меню */
.burger.active span:nth-child(1) {
    transform: rotate(45deg);
    top: 0px;
    position: absolute;
}

.burger.active span:nth-child(2) {
    opacity: 0;
}

.burger.active span:nth-child(3) {
    transform: rotate(-45deg);
    top: auto;
    position: absolute;
    bottom: 3px;
}
.wpcf7-form{
    max-width: 718px;
}
.invalid .wpcf7-response-output{
    display: none !important;
}

.modal {
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: 20px;
  background: white;
  border: 1px solid #ccc;
  padding: 20px;
  z-index: 9999;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  border-radius: 10px;
}

.modal.hidden {
  display: none;
}

.modal-content a {
  color: #007BFF;
  text-decoration: underline;
}

#cookie-modal{
    width: 100%;
    max-width: 503px;
    padding: 20px;
    left: auto;
    right: 30px;
    background: var(--light-grey, #eeeeee);
}
#cookie-modal .modal-content{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    box-sizing: border-box;
}
#cookie-modal p{
    margin: 0;
    color: var(--black, #1d1616);
    font-family: "Onest", sans-serif;
    font-size: 14px;
    line-height: 150%;
    font-weight: 200;
    opacity: 0.64;
}
#cookie-modal a{
    color: var(--black, #1d1616);
    font-family: "Onest", sans-serif;
    font-size: 14px;
    line-height: 150%;
    font-weight: 200;
    opacity: 0.64;
}
#cookie-ok-btn{
    border: none;
    outline: none;
    align-items: flex-start;
    margin: 0;
    cursor: pointer;
}

/*Модалка при успшной отправки сообщения с формы*/
/*.wpcf7-response-output {
  display: none !important;
}
 .modal {
  display: none;
  position: fixed;
  z-index: 1000;
  background: rgba(0,0,0,0.6);
  top: 0; left: 0; right: 0; bottom: 0;
  align-items: center;
  justify-content: center;
}

.modal--visible {
  display: flex;
}

.modal__content {
  background: white;
  padding: 2rem;
  border-radius: 10px;
} */

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

    .burger {
        display: flex;
    }
}

/* Мобильное полноэкранное меню */
.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    z-index: 2;
    background: #1D1616;
    top: 83px;
}

/* Показать меню при активном состоянии */
.mobile-menu.active {
    transform: translateX(0);
}

/* Стили для меню внутри */
.mobile-menu nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-menu nav ul li {
    margin-bottom: 24px;
}

.mobile-menu nav ul li:last-child {
    margin-bottom: 0;
}

.mobile-menu nav ul li a {
    color: var(--light, #f8f8f8);
    font-family: var(--menu-items-font-family, "Onest", sans-serif);
    font-size: var(--menu-items-font-size, 16px);
    line-height: var(--menu-items-line-height, 100%);
    font-weight: var(--menu-items-font-weight, 200);
    text-decoration: none;
    transition: color 0.3s ease, border-bottom 0.3s ease;
}
.mobile-menu nav ul li a:hover{
    color: var(--red, #d84040);
    border-bottom: 1px solid var(--red, #d84040);
}


.mobile-menu__link {
    display: flex;
    align-items: center;
    gap: 8px;

    text-decoration: none;
    padding: 12px 24px 12px 24px;
    background: var(--red, #d84040);
    border-radius: 60px;

    color: var(--light, #f8f8f8);
    font-family: var(--buttons-font-family, "Onest", sans-serif);
    font-size: var(--buttons-font-size, 18px);
    line-height: var(--buttons-line-height, 100%);
    font-weight: var(--buttons-font-weight, 600);
    width: fit-content;
}

.mobile-menu__link::after {
    display: block;
    content: '';
    width: 24px;
    height: 25px;
    background: url('data:image/svg+xml,<svg class="vuesax-outline-arrow-right2" width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg" ><path d="M14.4301 19.3211C14.2401 19.3211 14.0501 19.2511 13.9001 19.1011C13.6101 18.8111 13.6101 18.3311 13.9001 18.0411L19.4401 12.5011L13.9001 6.96109C13.6101 6.67109 13.6101 6.19109 13.9001 5.90109C14.1901 5.61109 14.6701 5.61109 14.9601 5.90109L21.0301 11.9711C21.3201 12.2611 21.3201 12.7411 21.0301 13.0311L14.9601 19.1011C14.8101 19.2511 14.6201 19.3211 14.4301 19.3211Z" fill="%23F8F8F8" /><path d="M20.332 13.25H3.50195C3.09195 13.25 2.75195 12.91 2.75195 12.5C2.75195 12.09 3.09195 11.75 3.50195 11.75H20.332C20.742 11.75 21.082 12.09 21.082 12.5C21.082 12.91 20.742 13.25 20.332 13.25Z" fill="%23F8F8F8" /></svg>');
}

.mobile-menu {
    padding-top: 48px;
    padding-left: 20px;
    padding-right: 20px;
}

.mobile-menu nav {
    margin-bottom: 48px;
}

.mobile-menu__socials {
    margin-bottom: 24px;
}

.mobile-menu__phone {
    display: flex;
    flex-direction: row;
    gap: 16px;
    color: var(--light, #f8f8f8);
    font-family: var(--text-font-family, "Onest", sans-serif);
    font-size: var(--text-font-size, 18px);
    line-height: var(--text-line-height, 150%);
    font-weight: var(--text-font-weight, 200);
    margin-bottom: 24px;
    text-decoration: none;
}

.mobile-menu__phone::before {
    display: block;
    content: '';
    width: 24px;
    height: 24px;
    background: url('data:image/svg+xml,<svg class="group" width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg" ><path d="M11.5169 15.2604C9.45892 13.5682 8.0848 11.4801 7.36239 10.292L6.82351 9.27606C7.01193 9.0739 8.44878 7.5353 9.07145 6.7005C9.85393 5.65223 8.71944 4.70549 8.71944 4.70549C8.71944 4.70549 5.52719 1.5128 4.79968 0.879499C4.07217 0.245307 3.2347 0.597537 3.2347 0.597537C1.70564 1.58551 0.120489 2.44448 0.0253938 6.57548C0.0218471 10.4431 2.95784 14.4323 6.13279 17.5206C9.31284 21.0083 13.679 24.504 17.9003 24.5C22.0308 24.4058 22.8896 22.8209 23.8775 21.2918C23.8775 21.2918 24.23 20.455 23.5965 19.7268C22.9625 18.9989 19.7694 15.806 19.7694 15.806C19.7694 15.806 18.8233 14.6712 17.7748 15.4544C16.9934 16.0385 15.5903 17.3377 15.2522 17.6527C15.2529 17.6538 12.9056 16.4025 11.5169 15.2604Z" fill="%23D84040" /></svg>');
    background-size: contain;
}

.mobile-menu__mail {
    display: flex;
    flex-direction: row;
    gap: 16px;
    color: var(--light, #f8f8f8);
    font-family: var(--text-font-family, "Onest", sans-serif);
    font-size: var(--text-font-size, 18px);
    line-height: var(--text-line-height, 150%);
    font-weight: var(--text-font-weight, 200);
    margin-bottom: 48px;
    text-decoration: none;
}

.mobile-menu__mail::before {
    display: block;
    content: '';
    width: 24px;
    height: 24px;
    background: url('data:image/svg+xml,<svg class="group" width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.6942 12.5319C12.4675 12.6736 12.2125 12.7302 11.9858 12.7302C11.7591 12.7302 11.5041 12.6736 11.2774 12.5319L0 5.64641V14.7987C0 16.7538 1.58678 18.3406 3.54191 18.3406H20.4581C22.4132 18.3406 24 16.7538 24 14.7987V5.64641L12.6942 12.5319Z" fill="%23D84040" /><path d="M20.458 0.659393H3.54185C1.87007 0.659393 0.453305 1.84948 0.113281 3.43625L12.0141 10.6901L23.8866 3.43625C23.5466 1.84948 22.1298 0.659393 20.458 0.659393Z" fill="%23D84040" /></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

@media (max-width:768px) {
    .hero__top {
        padding-top: 24px;
        padding-bottom: 60px;
        flex-direction: column;
        gap: 60px;
    }

    .hero__info {
        width: 100%;
        gap: 36px;
    }

    .hero__features-item {
        width: 100%;
    }

    .hero__features {
        gap: 36px;
    }

    .hero {
        margin-bottom: 60px;
    }

    .about {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .about__stats-wrapper {
        display: flex;
        flex-direction: column;
    }

    .about__info {
        gap: unset;
    }

    .about__title-wrapper {
        margin-bottom: 24px;
    }

    .about__description {
        margin-bottom: 36px;
    }

    .about__stats-item-title {
        font-family: var(--h1-desktop-font-family, "Onest", sans-serif);
        font-size: var(--h1-desktop-font-size, 50px);
        line-height: var(--h1-desktop-line-height, 135%);
        font-weight: var(--h1-desktop-font-weight, 700);
    }

    .about__stats-item-description {
        font-family: var(--text-font-family, "Onest", sans-serif);
        font-size: var(--text-font-size, 18px);
        line-height: var(--text-line-height, 150%);
        font-weight: var(--text-font-weight, 200);
    }

    .about__stats-item {
        padding: 0 !important;
        padding-bottom: 24px !important;
        padding-top: 24px !important;
        border: none !important;
        border-top: 1px solid var(--dark-grey, #c7c7c7) !important;
    }

    .about__stats-item:nth-child(1) {
        border-top: none !important;
        padding-top: 0px !important;
    }

    .portfolio {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .portfolio__subtitle {
        font-family: var(--buttons-font-family, "Onest", sans-serif);
        font-size: var(--buttons-font-size, 18px);
        line-height: var(--buttons-line-height, 100%);
        font-weight: var(--buttons-font-weight, 600);
    }

    .portfolio__title {
        font-family: var(--h2-font-family, "Onest", sans-serif);
        font-size: var(--h2-font-size, 36px);
        line-height: var(--h2-line-height, 125%);
        font-weight: var(--h2-font-weight, 700);
    }

    .portfolio__title-wrapper {
        margin-bottom: 24px;
    }

    .portfolio__wrapper {
        margin-bottom: 36px;
    }
    .portfolio__item-subtitle{
        font-family: var(--menu-items-font-family, "Onest", sans-serif);
        font-size: var(--menu-items-font-size, 16px);
        line-height: var(--menu-items-line-height, 100%);
        font-weight: var(--menu-items-font-weight, 700);
    }
    .portfolio__item-title{
        font-family: var(--projects-mobile-font-family, "Onest", sans-serif);
        font-size: var(--projects-mobile-font-size, 22px);
        line-height: var(--projects-mobile-line-height, 125%);
        font-weight: var(--projects-mobile-font-weight, 700);
    }
    .feedback{
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .feedback .container{
        align-items: flex-start;
    }
    .feedback__description{
        text-align: start;
        max-width: 100%;
    }
    .feedback__form{
        margin-top: 24px;
    }
    .feedback__fields{
        flex-direction: column;
    }
    .feedback__field{
        width: 100%;
    }
    .feedback__input{
        width: 100%;
    }
    .feedback__submit{
        width: 100%;
    }
    .feedback__note{
        text-align: start;
    }
    .footer{
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .footer__top{
        flex-direction: column;
        gap: 36px;
    }
    .footer__menu{
        flex-direction: column;
        gap: 35px;
    }
    .footer__column--two-columns{
        display: flex;
        flex-direction: column;
    }
    .footer__middle{
        margin-top: 36px;
    }
    .footer__bottom{
        margin-top: 24px;
        flex-direction: column;
        gap: 12px;
    }
}
.services{
    padding-top: 48px;
}
.breadcrumb{
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    gap: 8px;
    list-style-type: none;
}
.breadcrumb a{
    color: var(--black, #1d1616);
    font-family: "Onest", sans-serif;
    font-size: 12px;
    line-height: 150%;
    font-weight: 300;
    display: flex;
    flex-direction: row;
    gap: 8px;
    text-decoration: none;
}
.breadcrumb a::after{
    display: block;
    content: '/';
    color: var(--black, #1d1616);
    font-family: "Onest", sans-serif;
    font-size: 12px;
    line-height: 150%;
    font-weight: 300;
}
.breadcrumb a.last::after{
    display: none;
}
.services__title{
    margin-top: 16px;
    color: var(--black, #1d1616);
    font-family: var(--h1-desktop-font-family, "Onest", sans-serif);
    font-size: var(--h1-desktop-font-size, 50px);
    line-height: var(--h1-desktop-line-height, 135%);
    font-weight: var(--h1-desktop-font-weight, 700);
}
.services__list{
    margin-top: 96px;
    margin-bottom: 96px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 80px;
    row-gap: 96px;
}
.services__list-item{
    width: 27.7%;
    display: flex;
    flex-direction: column;
}
.services__list-item-title{
    color: var(--black, #1d1616);
    font-family: var(--h3-font-family, "Onest", sans-serif);
    font-size: var(--h3-font-size, 28px);
    line-height: var(--h3-line-height, 125%);
    font-weight: var(--h3-font-weight, 700);
    margin-bottom: 24px;
}
.services__list-item-description{
    color: var(--black, #1d1616);
    font-family: var(--text-font-family, "Onest", sans-serif);
    font-size: var(--text-font-size, 18px);
    line-height: var(--text-line-height, 150%);
    font-weight: var(--text-font-weight, 200);
    margin-bottom: 36px;
}
.services__list-item-link {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    color: var(--black, #1d1616);
    font-family: var(--buttons-font-family, "Onest", sans-serif);
    font-size: var(--buttons-font-size, 18px);
    line-height: var(--buttons-line-height, 100%);
    font-weight: var(--buttons-font-weight, 600);
    position: relative;
    text-decoration: none;
    margin-top: auto;
}

.services__list-item-link::after {
    display: block;
    content: '';
    width: 24px;
    height: 24px;
    background: url('data:image/svg+xml,<svg class="vuesax-outline-arrow-right" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.4301 18.8211C14.2401 18.8211 14.0501 18.7511 13.9001 18.6011C13.6101 18.3111 13.6101 17.8311 13.9001 17.5411L19.4401 12.0011L13.9001 6.46109C13.6101 6.17109 13.6101 5.69109 13.9001 5.40109C14.1901 5.11109 14.6701 5.11109 14.9601 5.40109L21.0301 11.4711C21.3201 11.7611 21.3201 12.2411 21.0301 12.5311L14.9601 18.6011C14.8101 18.7511 14.6201 18.8211 14.4301 18.8211Z" fill="%23D84040" /><path d="M20.332 12.75H3.50195C3.09195 12.75 2.75195 12.41 2.75195 12C2.75195 11.59 3.09195 11.25 3.50195 11.25H20.332C20.742 11.25 21.082 11.59 21.082 12C21.082 12.41 20.742 12.75 20.332 12.75Z" fill="%23D84040" /></svg>')
}
.about-service{
    background: var(--light-grey, #eeeeee);
    padding-top: 96px;
    padding-bottom: 96px;
}
.about-service__subtitle{
    color: var(--black, #1d1616);
    text-align: left;
    font-family: var(--buttons-font-family, "Onest", sans-serif);
    font-size: var(--buttons-font-size, 18px);
    line-height: var(--buttons-line-height, 100%);
    font-weight: var(--buttons-font-weight, 600);
    opacity: 0.6;
    margin-bottom: 12px;
}
.about-service__title{
    color: var(--black, #1d1616);
    font-family: var(--h2-font-family, "Onest", sans-serif);
    font-size: var(--h2-font-size, 36px);
    line-height: var(--h2-line-height, 125%);
    font-weight: var(--h2-font-weight, 700);
}
.about-service__list{
    margin-top: 48px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 36px;
}
.about-service__list-item{
    width: 50%;
    color: var(--black, #1d1616);
    font-family: var(--text-font-family, "Onest", sans-serif);
    font-size: var(--text-font-size, 18px);
    line-height: var(--text-line-height, 150%);
    font-weight: var(--text-font-weight, 200);
    display: flex;
    flex-direction: row;
    gap: 16px;
    padding-right: 64px;
    box-sizing: border-box;
}
.about-service__list-item::before{
    display: block;
    content: '';
    width: 60px;
    min-width: 60px;
    height: 60px;
    min-height: 60px;
    background: url('data:image/svg+xml,<svg class="mdi-success" width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M52.5 17.5L22.5 47.5L8.75 33.75L12.275 30.225L22.5 40.425L48.975 13.975L52.5 17.5Z" fill="%23D84040" /></svg>');
}
@media (max-width:1024px){
    .services__list-item{
        width: calc(100%/2 - 80px/2);
    }
    .services__title{
        color: var(--black, #1d1616);
        font-family: var(--h1-mobile-font-family, "Onest", sans-serif);
        font-size: var(--h1-mobile-font-size, 28px);
        line-height: var(--h1-mobile-line-height, 135%);
        font-weight: var(--h1-mobile-font-weight, 700);
    }
}
@media (max-width:768px){
    .services{
        padding-top: 24px;
    }
    .services__list{
        margin-top: 36px;
        margin-bottom: 60px;
        gap: 60px;
    }
    .services__list-item{
        width: 100%;
    }
    .about-service{
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .about-service__list{
        flex-direction: column;
        margin-top: 24px;
    }
    .about-service__list-item{
        width: 100%;
        padding: 0;
        flex-direction: column;
        gap: 16px;
    }
}
.services__description{
    color: var(--black, #1d1616);
    font-family: var(--text-font-family, "Onest", sans-serif);
    font-size: var(--text-font-size, 18px);
    line-height: var(--text-line-height, 150%);
    font-weight: var(--text-font-weight, 200);
    margin-top: 48px;
    margin-bottom: 48px;
    max-width: 800px;
}
.services__description p{
    margin: 0;
    padding: 0;
    margin-bottom: 20px;
}
/* .services__link {
    display: flex;
    align-items: center;
    gap: 8px;

    text-decoration: none;
    padding: 12px 24px 12px 24px;
    background: var(--red, #d84040);
    border-radius: 60px;

    color: var(--light, #f8f8f8);
    font-family: var(--buttons-font-family, "Onest", sans-serif);
    font-size: var(--buttons-font-size, 18px);
    line-height: var(--buttons-line-height, 100%);
    font-weight: var(--buttons-font-weight, 600);
    width: fit-content;
}

.services__link::after {
    display: block;
    content: '';
    width: 24px;
    height: 25px;
    background: url('data:image/svg+xml,<svg class="vuesax-outline-arrow-right2" width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg" ><path d="M14.4301 19.3211C14.2401 19.3211 14.0501 19.2511 13.9001 19.1011C13.6101 18.8111 13.6101 18.3311 13.9001 18.0411L19.4401 12.5011L13.9001 6.96109C13.6101 6.67109 13.6101 6.19109 13.9001 5.90109C14.1901 5.61109 14.6701 5.61109 14.9601 5.90109L21.0301 11.9711C21.3201 12.2611 21.3201 12.7411 21.0301 13.0311L14.9601 19.1011C14.8101 19.2511 14.6201 19.3211 14.4301 19.3211Z" fill="%23F8F8F8" /><path d="M20.332 13.25H3.50195C3.09195 13.25 2.75195 12.91 2.75195 12.5C2.75195 12.09 3.09195 11.75 3.50195 11.75H20.332C20.742 11.75 21.082 12.09 21.082 12.5C21.082 12.91 20.742 13.25 20.332 13.25Z" fill="%23F8F8F8" /></svg>');
} */
.services-content{
    margin-top: 96px;
    margin-bottom: 96px;
}
.services-content .container{
    display: flex;
    flex-direction: column;
    gap: 96px;
}
.services-content .row{
    display: flex;
    flex-direction: row;
    gap: 40px;
}
.services-content__img-wrapper, .services-content__text-wrapper{
    width: calc(100%/2 - 40px/2);
}
.services-content__text-wrapper{
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.services-content__text-title{
    color: var(--black, #1d1616);
    font-family: var(--h3-font-family, "Onest", sans-serif);
    font-size: var(--h3-font-size, 28px);
    line-height: var(--h3-line-height, 125%);
    font-weight: var(--h3-font-weight, 700);
}
.services-content__text-wrapper ul{
    margin: 0;
    padding-left: 16px;
}
.services-content__text-wrapper li{
    color: var(--black, #1d1616);
    font-family: var(--text-font-family, "Onest", sans-serif);
    font-size: var(--text-font-size, 18px);
    line-height: var(--text-line-height, 150%);
    font-weight: var(--text-font-weight, 200);
}
.services-content__img-wrapper img{
    width: 100%;
}
.quote{
    padding-top: 96px;
    padding-bottom: 96px;
    background: var(--light-grey, #eeeeee);
    position: relative;
}
.quote__text{
    color: var(--black, #1d1616);
    font-family: var(--text-font-family, "Onest", sans-serif);
    font-size: var(--text-font-size, 18px);
    line-height: var(--text-line-height, 150%);
    font-weight: var(--text-font-weight, 200);
    max-width: 928px;
    margin-left: auto;
    margin-right: auto;
    z-index: 1;
}
.quote__img{
    position: absolute;
    top: 29px;
    left: 110px;
    z-index: 0;
}
.services-portfolio{
    margin-top: 96px;
    margin-bottom: 96px;
}
.services-portfolio__subtitle{
    color: var(--black, #1d1616);
    font-family: var(--buttons-font-family, "Onest", sans-serif);
    font-size: var(--buttons-font-size, 18px);
    line-height: var(--buttons-line-height, 100%);
    font-weight: var(--buttons-font-weight, 600);
    opacity: 0.6;
    margin-bottom: 12px;
}
.services-portfolio__title{
    color: var(--black, #1d1616);
    font-family: var(--h2-font-family, "Onest", sans-serif);
    font-size: var(--h2-font-size, 36px);
    line-height: var(--h2-line-height, 125%);
    font-weight: var(--h2-font-weight, 700);
}
.services-portfolio__wrapper{
    margin-top: 48px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 72px;
}
.services-portfolio__item {
    padding: 28px;
    height: 350px;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    display: flex;
    flex-direction: column;
    justify-content: end;
    box-sizing: border-box;
    width: calc(100%/2 - 16px/2);
}
.services-portfolio__item.hidden{
    display: none;
}
.services-portfolio__item-subtitle {
    color: var(--light, #f8f8f8);
    font-family: var(--menu-items-font-family, "Onest", sans-serif);
    font-size: var(--menu-items-font-size, 16px);
    line-height: var(--menu-items-line-height, 100%);
    font-weight: var(--menu-items-font-weight, 700);
    margin-bottom: 12px;
    max-width: 490px;
    z-index: 1;
}

.services-portfolio__item-title {
    color: #ffffff;
    font-family: var(--h3-font-family, "Onest", sans-serif);
    font-size: var(--h3-font-size, 28px);
    line-height: var(--h3-line-height, 125%);
    font-weight: var(--h3-font-weight, 700);
    max-width: 490px;
    z-index: 1;
}

.services-portfolio__item-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    color: var(--light, #f8f8f8);
    font-family: var(--buttons-font-family, "Onest", sans-serif);
    font-size: var(--buttons-font-size, 18px);
    line-height: var(--buttons-line-height, 100%);
    font-weight: var(--buttons-font-weight, 600);
    text-decoration: none;
    z-index: 1;
}

.services-portfolio__item-link::after {
    display: block;
    content: '';
    width: 24px;
    height: 24px;
    background: url('data:image/svg+xml,<svg class="vuesax-outline-arrow-right" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.4301 18.8211C14.2401 18.8211 14.0501 18.7511 13.9001 18.6011C13.6101 18.3111 13.6101 17.8311 13.9001 17.5411L19.4401 12.0011L13.9001 6.46109C13.6101 6.17109 13.6101 5.69109 13.9001 5.40109C14.1901 5.11109 14.6701 5.11109 14.9601 5.40109L21.0301 11.4711C21.3201 11.7611 21.3201 12.2411 21.0301 12.5311L14.9601 18.6011C14.8101 18.7511 14.6201 18.8211 14.4301 18.8211Z" fill="%23D84040" /><path d="M20.332 12.75H3.50195C3.09195 12.75 2.75195 12.41 2.75195 12C2.75195 11.59 3.09195 11.25 3.50195 11.25H20.332C20.742 11.25 21.082 11.59 21.082 12C21.082 12.41 20.742 12.75 20.332 12.75Z" fill="%23D84040" /></svg>')
}

.services-portfolio__item-link {
    opacity: 0;
    height: 0;
    margin-top: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, height 0.3s ease, margin 0.3s ease;
}

.services-portfolio__item:hover .services-portfolio__item-link {
    height: auto;
    margin-top: 24px;
    opacity: 1;
    visibility: visible;
}
.services-portfolio__more {
    display: flex;
    align-items: center;
    gap: 8px;

    text-decoration: none;
    padding: 12px 24px 12px 24px;
    background: var(--red, #d84040);
    border-radius: 60px;

    color: var(--light, #f8f8f8);
    font-family: var(--buttons-font-family, "Onest", sans-serif);
    font-size: var(--buttons-font-size, 18px);
    line-height: var(--buttons-line-height, 100%);
    font-weight: var(--buttons-font-weight, 600);
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.services-portfolio__more::after {
    display: block;
    content: '';
    width: 24px;
    height: 25px;
    background: url('data:image/svg+xml,<svg class="vuesax-outline-arrow-right2" width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg" ><path d="M14.4301 19.3211C14.2401 19.3211 14.0501 19.2511 13.9001 19.1011C13.6101 18.8111 13.6101 18.3311 13.9001 18.0411L19.4401 12.5011L13.9001 6.96109C13.6101 6.67109 13.6101 6.19109 13.9001 5.90109C14.1901 5.61109 14.6701 5.61109 14.9601 5.90109L21.0301 11.9711C21.3201 12.2611 21.3201 12.7411 21.0301 13.0311L14.9601 19.1011C14.8101 19.2511 14.6201 19.3211 14.4301 19.3211Z" fill="%23F8F8F8" /><path d="M20.332 13.25H3.50195C3.09195 13.25 2.75195 12.91 2.75195 12.5C2.75195 12.09 3.09195 11.75 3.50195 11.75H20.332C20.742 11.75 21.082 12.09 21.082 12.5C21.082 12.91 20.742 13.25 20.332 13.25Z" fill="%23F8F8F8" /></svg>');
}
@media (max-width:1024px){
    .services__description{
        margin-top: 36px;
        margin-bottom: 36px;
        max-width: 100%;
    }
    .services-content{
        margin-top: 60px;
        margin-bottom: 60px;
    }
    .services-content .container{
        gap: 60px;
    }
    .services-content .row{
        flex-direction: column;
        gap: 16px;
    }
    .services-content__img-wrapper, .services-content__text-wrapper{
        width: 100%;
    }
    .services-content .row:nth-child(2){
        flex-direction: column-reverse;
    }
    .quote{
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .quote__img{
        width: 168px;
        top: 10px;
        left: 12px;
    }
    .quote__img svg{
        width: 100%;
        height: auto;
    }
    .services-portfolio{
        margin-top: 60px;
        margin-bottom: 60px;
    }
    .services-portfolio__wrapper{
        margin-top: 24px;
        margin-bottom: 36px;
    }
    .services-portfolio__item{
        width: 100%;
        height: 320px;
    }
    .services-portfolio__item-title{
        color: #ffffff;
        font-family: var(--projects-mobile-font-family, "Onest", sans-serif);
        font-size: var(--projects-mobile-font-size, 22px);
        line-height: var(--projects-mobile-line-height, 125%);
        font-weight: var(--projects-mobile-font-weight, 700);
    }
}
.services-portfolio__more-without-arrow::after{
    display: none;
}
.services-portfolio__more-without-arrow:hover{
    background: var(--dark-red, #8e1616);
}
.services-portfolio__tabs{
    padding: 0;
    margin: 0;
    list-style-type: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 48px;
}
.services-portfolio__tabs li{
    color: var(--black, #1d1616);
    font-family: var(--buttons-font-family, "Onest", sans-serif);
    font-size: var(--buttons-font-size, 18px);
    line-height: var(--buttons-line-height, 100%);
    font-weight: var(--buttons-font-weight, 600);
    cursor: pointer;
    transition: color 0.3s ease;
}
.services-portfolio__tabs li:hover{
    color: var(--red, #d84040);
}
.services-portfolio__tabs li.active{
    color: var(--red, #d84040);
}
.quote--project{
    margin-top: 96px;
    margin-bottom: 96px;
}
.project{
    padding-top: 28px;
    padding-bottom: 28px;
    background-position: center center !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    height: 500px;
    box-sizing: border-box;
}
.project::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0, 0, 0, 0.5); /* чёрный с прозрачностью 50% */
  z-index: 1;
}
.project .container {
  position: relative;
  z-index: 2; /* чтобы контент был поверх затемнения */
}
.project .breadcrumb a{
    color: var(--light, #f8f8f8);
}
.project .breadcrumb a::after{
    color: var(--light, #f8f8f8);
}
.project
.project__subtitle{
    color: var(--light, #f8f8f8);
    font-family: "Onest", sans-serif;
    font-size: 16px;
    line-height: 150%;
    font-weight: 600;
    max-width: 800px;
}
.project__title{
    color: #ffffff;
    text-align: left;
    font-family: var(--h2-font-family, "Onest", sans-serif);
    font-size: var(--h2-font-size, 36px);
    line-height: var(--h2-line-height, 125%);
    font-weight: var(--h2-font-weight, 700);
    max-width: 800px;
}
.project__content{
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.project .container{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    height: 100%;
}
.project-info{
    padding-top: 96px;
    padding-bottom: 96px;
}
.project-info .container{
    display: grid;
    column-gap: 48px;
}
.project-info__item{
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.project-info__item-title{
    color: var(--black, #1d1616);
    font-family: var(--h3-font-family, "Onest", sans-serif);
    font-size: var(--h3-font-size, 28px);
    line-height: var(--h3-line-height, 125%);
    font-weight: var(--h3-font-weight, 700);
}
.project-info__item-description{
    color: var(--black, #1d1616);
    font-family: var(--text-font-family, "Onest", sans-serif);
    font-size: var(--text-font-size, 18px);
    line-height: var(--text-line-height, 150%);
    font-weight: var(--text-font-weight, 200);
}
.project-info__item-description p{
    padding: 0;
    margin: 0;
    padding-bottom: 20px;
}
.project-info__item:nth-child(1){
    grid-column-start:1;
    grid-column-end:1;
    grid-row-start:1;
    grid-row-end:1;
}
.project-info__item:nth-child(2){
    grid-column-start:1;
    grid-column-end:1;
    grid-row-start:2;
    grid-row-end:2;
}
.project-info__item:nth-child(3){
    grid-column-start:2;
    grid-column-end:2;
    grid-row-start:1;
    grid-row-end:3;
}
.project-images .container{
    display: flex;
    flex-direction: column;
    gap: 48px;
}
.project-images__item{
    width: 100%;
}
.project-images__item img{
    width: 100%;
}
@media (max-width:1024px){
    .project__title{
        font-family: var(--h1-mobile-font-family, "Onest", sans-serif);
        font-size: var(--h1-mobile-font-size, 28px);
        line-height: var(--h1-mobile-line-height, 135%);
        font-weight: var(--h1-mobile-font-weight, 700);
    }
    .project{
        height: 360px;
    }
    .project-info .container{
        display: flex;
        flex-direction: column;
        gap: 36px;
    }
    .project-info{
        padding-top: 60px;
        padding-bottom: 60px;
    }
}
.services__content{
    padding-top: 48px;
    color: var(--black, #1d1616);
    text-align: left;
    font-family: var(--text-font-family, "Onest", sans-serif);
    font-size: var(--text-font-size, 18px);
    line-height: var(--text-line-height, 150%);
    font-weight: var(--text-font-weight, 400);
    columns: 2;
    gap: 36px;
}
.services__content p{
    padding-bottom: 20px;
    margin: 0;
}
.services__content p.bold{
    font-family: var(--text-font-family, "Onest", sans-serif);
    font-weight: var(--h3-font-weight, 700);
}
.principles{
    background: var(--light-grey, #eeeeee);
    padding-top: 96px;
    margin-top: 96px;
    padding-bottom: 96px;
}
.principles .container{

}
.principles__subtitle{
    color: var(--black, #1d1616);
    font-family: var(--buttons-font-family, "Onest", sans-serif);
    font-size: var(--buttons-font-size, 18px);
    line-height: var(--buttons-line-height, 100%);
    font-weight: var(--buttons-font-weight, 600);
    opacity: 0.6;
    margin-bottom: 12px;
}
.principles__title{
    color: var(--black, #1d1616);
    font-family: var(--h2-font-family, "Onest", sans-serif);
    font-size: var(--h2-font-size, 36px);
    line-height: var(--h2-line-height, 125%);
    font-weight: var(--h2-font-weight, 700);
}
.principles__wrapper{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 16px;
    margin-top: 48px;
    margin-bottom: 96px;
}
.principles__item{
    display: flex;
    flex-direction: column;
    width: calc(100%/3 - 32px/3);
    gap: 16px;
}
.principles__item::before{
    display: block;
    content: '';
    width: 60px;
    height: 60px;
    background: url('data:image/svg+xml,<svg class="mdi-success" width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M52.5 17.5L22.5 47.5L8.75 33.75L12.275 30.225L22.5 40.425L48.975 13.975L52.5 17.5Z" fill="%23D84040" /></svg>');
}
.principles__item-title{
    color: var(--black, #1d1616);
    font-family: var(--text-font-family, "Onest", sans-serif);
    font-size: var(--text-font-size, 18px);
    line-height: var(--text-line-height, 150%);
    font-weight: var(--h1-mobile-font-weight, 700);
}
.principles__item-description{
    color: var(--black, #1d1616);
    font-family: var(--text-font-family, "Onest", sans-serif);
    font-size: var(--text-font-size, 18px);
    line-height: var(--text-line-height, 150%);
    font-weight: var(--text-font-weight, 200);
    max-width: 368px;
}
.principles__note{
    padding: 36px;
    border: 1px solid var(--red, #d84040);;
}
.principles__note p{
    padding: 0;
    margin: 0;
    padding-bottom: 20px;
    color: var(--black, #1d1616);
    font-family: "Onest", sans-serif;
    font-size: 18px;
    line-height: 150%;
    font-weight: 400;
}
.principles__note p.bold{
    font-family: var(--text-font-family, "Onest", sans-serif);
    font-weight: var(--h3-font-weight, 700);
}
.principles-img{
    margin-top: 96px;
    margin-bottom: 96px;
}
.principles-img .container img{
    width: 100%;
}
.process{
    padding-top: 96px;
    padding-bottom: 96px;
    background: var(--light-grey, #eeeeee);
}
.process .container{

}
.process__subtitle{
    color: var(--black, #1d1616);
    font-family: var(--buttons-font-family, "Onest", sans-serif);
    font-size: var(--buttons-font-size, 18px);
    line-height: var(--buttons-line-height, 100%);
    font-weight: var(--buttons-font-weight, 600);
    opacity: 0.6;
    margin-bottom: 12px;
}
.process__title{
    color: var(--black, #1d1616);
    font-family: var(--h2-font-family, "Onest", sans-serif);
    font-size: var(--h2-font-size, 36px);
    line-height: var(--h2-line-height, 125%);
    font-weight: var(--h2-font-weight, 700);
}
.process__wrapper{
    margin-top: 48px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 80px;
    row-gap: 96px;
}
.process__item{
    width: calc(100%/3 - 160px/3);
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.process__item-number{
    color: var(--red, #d84040);
    font-family: var(--h1-desktop-font-family, "Onest", sans-serif);
    font-size: var(--h1-desktop-font-size, 50px);
    line-height: var(--h1-desktop-line-height, 135%);
    font-weight: var(--h1-desktop-font-weight, 700);
}
.process__item-title{
    color: var(--black, #1d1616);
    font-family: var(--text-font-family, "Onest", sans-serif);
    font-size: var(--text-font-size, 18px);
    line-height: var(--text-line-height, 150%);
    font-weight: var(--h3-font-weight, 700);
}
.process__item-description{
    color: var(--black, #1d1616);
    font-family: var(--text-font-family, "Onest", sans-serif);
    font-size: var(--text-font-size, 18px);
    line-height: var(--text-line-height, 150%);
    font-weight: var(--text-font-weight, 200);
}
.team{
	display:none !important;
    margin-top: 96px;
    margin-bottom: 96px;
}
.team__subtitle{
    color: var(--black, #1d1616);
    font-family: var(--buttons-font-family, "Onest", sans-serif);
    font-size: var(--buttons-font-size, 18px);
    line-height: var(--buttons-line-height, 100%);
    font-weight: var(--buttons-font-weight, 600);
    opacity: 0.6;
    margin-bottom: 12px;
}
.team__title{
    color: var(--black, #1d1616);
    font-family: var(--h2-font-family, "Onest", sans-serif);
    font-size: var(--h2-font-size, 36px);
    line-height: var(--h2-line-height, 125%);
    font-weight: var(--h2-font-weight, 700);
}
.team__wrapper{
    margin-top: 48px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 16px;
    row-gap: 48px;
}
.team__item{
    width: calc(100%/3 - 32px/3);
}
.team__item-img{
    width: 100%;
}
.team__item-img img{
    width: 100%;
}
.team__item-title{
    color: var(--black, #1d1616);
    font-family: var(--text-font-family, "Onest", sans-serif);
    font-size: var(--text-font-size, 18px);
    line-height: var(--text-line-height, 150%);
    font-weight: var(--h3-font-weight, 700);
}
.team__item-subtitle{
    color: var(--black, #1d1616);
    font-family: var(--text-font-family, "Onest", sans-serif);
    font-size: var(--text-font-size, 18px);
    line-height: var(--text-line-height, 150%);
    font-weight: var(--text-font-weight, 200);
}
.quote--about{
	margin-top: 96px;
    margin-bottom: 96px;
    background: none;
    padding: 0;
    background: var(--light-grey, #eeeeee);
}
.quote--about .container{
    padding-top: 96px;
    padding-bottom: 96px;
}
.quote--about .quote__text{
    color: var(--black, #1d1616);
    font-family: var(--h2-font-family, "Onest", sans-serif);
    font-size: var(--h2-font-size, 36px);
    line-height: var(--h2-line-height, 125%);
    font-weight: var(--h2-font-weight, 400);
}
.about-projects{
    background: var(--black, #1d1616);
    padding-bottom: 96px;
    padding-top: 96px;
}
.about-projects .container{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.about-projects__info{
    width: 50%;
}
.about-projects__subtitle{
    color: var(--light, #f8f8f8);
    font-family: var(--buttons-font-family, "Onest", sans-serif);
    font-size: var(--buttons-font-size, 18px);
    line-height: var(--buttons-line-height, 100%);
    font-weight: var(--buttons-font-weight, 600);
    opacity: 0.6;
    margin-bottom: 12px;
}
.about-projects__title{
    color: var(--light, #f8f8f8);
    font-family: var(--h2-font-family, "Onest", sans-serif);
    font-size: var(--h2-font-size, 36px);
    line-height: var(--h2-line-height, 125%);
    font-weight: var(--h2-font-weight, 700);
    margin-bottom: 48px;
}
.about-projects__link {
    display: flex;
    align-items: center;
    gap: 8px;

    text-decoration: none;
    padding: 12px 24px 12px 24px;
    background: var(--red, #d84040);
    border-radius: 60px;

    color: var(--light, #f8f8f8);
    font-family: var(--buttons-font-family, "Onest", sans-serif);
    font-size: var(--buttons-font-size, 18px);
    line-height: var(--buttons-line-height, 100%);
    font-weight: var(--buttons-font-weight, 600);

    width: fit-content;

}

.about-projects__link::after {
    display: block;
    content: '';
    width: 24px;
    height: 25px;
    background: url('data:image/svg+xml,<svg class="vuesax-outline-arrow-right2" width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg" ><path d="M14.4301 19.3211C14.2401 19.3211 14.0501 19.2511 13.9001 19.1011C13.6101 18.8111 13.6101 18.3311 13.9001 18.0411L19.4401 12.5011L13.9001 6.96109C13.6101 6.67109 13.6101 6.19109 13.9001 5.90109C14.1901 5.61109 14.6701 5.61109 14.9601 5.90109L21.0301 11.9711C21.3201 12.2611 21.3201 12.7411 21.0301 13.0311L14.9601 19.1011C14.8101 19.2511 14.6201 19.3211 14.4301 19.3211Z" fill="%23F8F8F8" /><path d="M20.332 13.25H3.50195C3.09195 13.25 2.75195 12.91 2.75195 12.5C2.75195 12.09 3.09195 11.75 3.50195 11.75H20.332C20.742 11.75 21.082 12.09 21.082 12.5C21.082 12.91 20.742 13.25 20.332 13.25Z" fill="%23F8F8F8" /></svg>');
}
.about-projects__img{
    width: 50%;
}
.about-projects__img img{
    width: 100%;
}
@media (max-width:1024px){
    .services__content{
        columns: 1;
        padding-top: 36px;
    }
    .principles{
        margin-top: 60px;
        margin-bottom: 60px;
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .principles__wrapper{
        margin-top: 24px;
        margin-bottom: 60px;
        flex-direction: column;
        gap: 36px;
    }
    .principles__item{
        width: 100%;
    }
    .principles__item-description{
        max-width: 100%;
    }
    .principles-img{
        margin-top: 60px;
        margin-bottom: 60px;
    }
    .principles-img .container{
        width: 100%;
    }
    .process{
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .process__item{
        width: calc(100%/2 - 160px/2);
    }
    .process__wrapper{
        margin-top: 24px;
    }
    .team{
        margin-top: 60px;
        margin-bottom: 60px;
    }
    .team__wrapper{
        margin-top: 24px;
    }
    .team__item{
        width: calc(100%/2 - 32px/2);
    }
    .quote--about{
        background: var(--light-grey, #eeeeee);
        margin-bottom: 0;
    }
    .quote--about .container{
        background: none;
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .quote--about .quote__text{
        font-family: var(--h2-font-family, "Onest", sans-serif);
        font-size: var(--h2-font-size, 36px);
        line-height: var(--h2-line-height, 125%);
        font-weight: var(--text-font-weight, 400);
    }
    .about-projects{
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .about-projects__subtitle{
        font-family: var(--buttons-font-family, "Onest", sans-serif);
        font-size: var(--buttons-font-size, 18px);
        line-height: var(--buttons-line-height, 100%);
        font-weight: var(--buttons-font-weight, 600);
    }
    .about-projects .container{
        flex-direction: column;
    }
    .about-projects__info{
        width: 100%;
    }
    .about-projects__img{
        width: 100%;
    }
    .about-projects__title{
        margin-bottom: 36px;
    }
    .about-projects .container{
        gap: 60px;
    }
    .about-projects__img{
        height: 400px;
    }
    .about-projects__img img{
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }
}
@media (max-width:768px){
    .process__item{
        width: 100%;
    }
    .process__wrapper{
        gap:36px;
    }
    .team__item {
        width: 80%;
    }
}
.contacts{
    margin-top: 48px;
    margin-bottom: 96px;
}
.contacts__title{
    margin-top: 16px;
    color: var(--black, #1d1616);
    font-family: var(--h1-desktop-font-family, "Onest", sans-serif);
    font-size: var(--h1-desktop-font-size, 50px);
    line-height: var(--h1-desktop-line-height, 135%);
    font-weight: var(--h1-desktop-font-weight, 700);
}
.contacts__wrapper{
    display: flex;
    flex-direction: row;
    gap: 16px;
    margin-top: 96px;
}
.contacts__info{
    width: calc(100%/2 - 8px);
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.contacts__phone,.contacts__mail, .contacts__adres, .contacts__grafik, .contacts__socials{
    color: var(--black, #1d1616);
    font-family: var(--text-font-family, "Onest", sans-serif);
    font-size: var(--text-font-size, 18px);
    line-height: var(--text-line-height, 150%);
    font-weight: var(--text-font-weight, 200);
    display: flex;
    flex-direction: row;
    gap: 16px;
}
.contacts__phone::before{
    display: block;
    content: '';
    width: 24px;
    height: 24px;
    background: url('data:image/svg+xml,<svg class="group" width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.5169 15.2604C9.45892 13.5682 8.0848 11.4801 7.36239 10.292L6.82351 9.27606C7.01193 9.0739 8.44878 7.5353 9.07145 6.7005C9.85393 5.65223 8.71944 4.70549 8.71944 4.70549C8.71944 4.70549 5.52719 1.5128 4.79968 0.879495C4.07217 0.245303 3.2347 0.597534 3.2347 0.597534C1.70564 1.58551 0.120489 2.44447 0.0253938 6.57548C0.0218471 10.4431 2.95784 14.4323 6.13279 17.5206C9.31284 21.0083 13.679 24.504 17.9003 24.5C22.0308 24.4058 22.8896 22.8209 23.8775 21.2918C23.8775 21.2918 24.23 20.455 23.5965 19.7268C22.9625 18.9989 19.7694 15.806 19.7694 15.806C19.7694 15.806 18.8233 14.6712 17.7748 15.4544C16.9934 16.0385 15.5903 17.3377 15.2522 17.6527C15.2529 17.6538 12.9056 16.4025 11.5169 15.2604Z" fill="%23D84040" /></svg>');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}
.contacts__mail::before{
    display: block;
    content: '';
    width: 24px;
    height: 24px;
    background: url('data:image/svg+xml,<svg class="group" width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.6942 12.5319C12.4675 12.6736 12.2125 12.7302 11.9858 12.7302C11.7591 12.7302 11.5041 12.6736 11.2774 12.5319L0 5.6464V14.7987C0 16.7538 1.58678 18.3406 3.54191 18.3406H20.4581C22.4132 18.3406 24 16.7538 24 14.7987V5.6464L12.6942 12.5319Z" fill="%23D84040" /><path d="M20.458 0.659386H3.54185C1.87007 0.659386 0.453305 1.84947 0.113281 3.43625L12.0141 10.6901L23.8866 3.43625C23.5466 1.84947 22.1298 0.659386 20.458 0.659386Z" fill="%23D84040" /></svg>');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}
.contacts__adres::before{
    display: block;
    content: '';
    width: 24px;
    height: 24px;
    background: url('data:image/svg+xml,<svg class="group" width="18" height="25" viewBox="0 0 18 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.00048 0.5C4.20775 0.5 0.308594 4.39916 0.308594 9.19184C0.308594 15.1397 8.08698 23.8715 8.41816 24.2404C8.72922 24.5868 9.27231 24.5862 9.58281 24.2404C9.91398 23.8715 17.6924 15.1397 17.6924 9.19184C17.6923 4.39916 13.7932 0.5 9.00048 0.5ZM9.00048 13.565C6.58914 13.565 4.62742 11.6032 4.62742 9.19184C4.62742 6.7805 6.58919 4.81878 9.00048 4.81878C11.4118 4.81878 13.3735 6.78055 13.3735 9.19189C13.3735 11.6032 11.4118 13.565 9.00048 13.565Z" fill="%23D84040" /></svg>');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}
.contacts__grafik::before{
    display: block;
    content: '';
    width: 24px;
    height: 24px;
    background:url('data:image/svg+xml,<svg class="vector" width="24" height="23" viewBox="0 0 24 23" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.8933 0.911758H18.7757V3.02941C18.7757 3.45293 18.4227 3.73529 18.0698 3.73529C17.7168 3.73529 17.3639 3.45293 17.3639 3.02941V0.911758H6.06978V3.02941C6.06978 3.45293 5.71684 3.73529 5.3639 3.73529C5.01096 3.73529 4.65802 3.45293 4.65802 3.02941V0.911758H2.54037C1.48155 0.911758 0.705078 1.82941 0.705078 3.02941V5.57058H23.2933V3.02941C23.2933 1.82941 22.0227 0.911758 20.8933 0.911758ZM0.705078 7.05293V19.9706C0.705078 21.2412 1.48155 22.0882 2.61096 22.0882H20.9639C22.0933 22.0882 23.3639 21.1706 23.3639 19.9706V7.05293H0.705078ZM6.98743 18.9118H5.29331C5.01096 18.9118 4.72861 18.7 4.72861 18.3471V16.5823C4.72861 16.3 4.94037 16.0176 5.29331 16.0176H7.05802C7.34037 16.0176 7.62273 16.2294 7.62273 16.5823V18.3471C7.55214 18.7 7.34037 18.9118 6.98743 18.9118ZM6.98743 12.5588H5.29331C5.01096 12.5588 4.72861 12.3471 4.72861 11.9941V10.2294C4.72861 9.94705 4.94037 9.6647 5.29331 9.6647H7.05802C7.34037 9.6647 7.62273 9.87646 7.62273 10.2294V11.9941C7.55214 12.3471 7.34037 12.5588 6.98743 12.5588ZM12.6345 18.9118H10.8698C10.5874 18.9118 10.3051 18.7 10.3051 18.3471V16.5823C10.3051 16.3 10.5168 16.0176 10.8698 16.0176H12.6345C12.9168 16.0176 13.1992 16.2294 13.1992 16.5823V18.3471C13.1992 18.7 12.9874 18.9118 12.6345 18.9118ZM12.6345 12.5588H10.8698C10.5874 12.5588 10.3051 12.3471 10.3051 11.9941V10.2294C10.3051 9.94705 10.5168 9.6647 10.8698 9.6647H12.6345C12.9168 9.6647 13.1992 9.87646 13.1992 10.2294V11.9941C13.1992 12.3471 12.9874 12.5588 12.6345 12.5588ZM18.2815 18.9118H16.5168C16.2345 18.9118 15.9521 18.7 15.9521 18.3471V16.5823C15.9521 16.3 16.1639 16.0176 16.5168 16.0176H18.2815C18.5639 16.0176 18.8463 16.2294 18.8463 16.5823V18.3471C18.8463 18.7 18.6345 18.9118 18.2815 18.9118ZM18.2815 12.5588H16.5168C16.2345 12.5588 15.9521 12.3471 15.9521 11.9941V10.2294C15.9521 9.94705 16.1639 9.6647 16.5168 9.6647H18.2815C18.5639 9.6647 18.8463 9.87646 18.8463 10.2294V11.9941C18.8463 12.3471 18.6345 12.5588 18.2815 12.5588Z" fill="%23D84040" /></svg>');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}
.contacts__socials{
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
    flex-direction: row;
    gap: 24px;
    margin-top: 48px;
}
.contacts__socials a{
    text-decoration: none;
}
.contacts__map{
    width: calc(100%/2 - 8px);
}
#map{
    width: 100%;
    height: 334px;
}

.contacts-feedback .feedback__title{
    margin-bottom: 0;
}
.contacts-feedback .feedback__fields{
    flex-direction: column;
}
.feedback__textarea {
    border: none;
    outline: none;
    background: var(--light, #f8f8f8);
    border-radius: 30px;
    padding: 12px 20px 12px 20px;
    width: 100%;
    height: 165px;
    box-sizing: border-box;

    color: var(--black, #1D1616);
    font-family: var(--buttons-font-family, "Onest", sans-serif);
    font-size: var(--buttons-font-size, 18px);
    line-height: var(--buttons-line-height, 100%);
    font-weight: var(--buttons-font-weight, 600);
}

.feedback__textarea::placeholder {
    color: var(--dark-grey, #c7c7c7);
    font-family: var(--buttons-font-family, "Onest", sans-serif);
    font-size: var(--buttons-font-size, 18px);
    line-height: var(--buttons-line-height, 100%);
    font-weight: var(--buttons-font-weight, 600);
}
.feedback__row{
    display: flex;
    flex-direction: row;
    gap: 10px;
    width: 100%;
}
.contacts-feedback .feedback__field{
    width: calc(100%/2 - 16px/2);
}
.contacts-feedback .feedback__input{
    width: 100%;
    max-width: 100%;
}
.feedback__field--textarea{
    width: 100% !important;
    max-width: 100%;
}
.contacts-feedback .feedback__fields{
    gap: 10px;
}
.contacts-feedback .feedback__submit{
    width: 100%;
}
@media (max-width:768px){
    .contacts__title{
        font-family: var(--h1-mobile-font-family, "Onest", sans-serif);
        font-size: var(--h1-mobile-font-size, 28px);
        line-height: var(--h1-mobile-line-height, 135%);
        font-weight: var(--h1-mobile-font-weight, 700);
    }
    .contacts__wrapper{
        margin-top: 36px;
        flex-direction: column;
        gap: 60px;
    }
    .contacts{
        margin-bottom: 0;
    }
    .contacts__info{
        width: 100%;
    }
    .contacts__map{
        margin-left: calc(50% - 50vw);
        margin-right: calc(50vw - 50%);
        width: 100vw;
    }
    .feedback__row{
        flex-direction: column;
    }
    .contacts-feedback .feedback__field{
        width: 100%;
    }
}
.prices{
    margin-top: 96px;margin-bottom: 96px;
}
.prices__wrapper{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 80px;
    row-gap: 96px;
}
.prices__item{
    width: calc(50% - 40px);
    position: relative;
}
.prices__title{
    color: var(--black, #1d1616);
    font-family: var(--h3-font-family, "Onest", sans-serif);
    font-size: var(--h3-font-size, 28px);
    line-height: var(--h3-line-height, 125%);
    font-weight: var(--h3-font-weight, 700);
    margin-bottom: 24px;
}
.prices__description{
    color: var(--black, #1d1616);
    font-family: var(--text-font-family, "Onest", sans-serif);
    font-size: var(--text-font-size, 18px);
    line-height: var(--text-line-height, 150%);
    font-weight: var(--text-font-weight, 200);
    
    max-width: 492px;
}
.prices__cost-wrapper{
    margin-top: 0px;
    flex-direction: column;
    display: none;
    height: 0;
    opacity: 0;
    transition: height 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease;
}
.prices__cost-wrapper.open{
    margin-top: 36px;
    display: flex;
    height: auto;
    opacity: 1;
}
.prices__cost-item{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-top: 12px;
    padding-bottom: 12px;
    transition: background 0.3s ease, padding-left 0.3s ease, padding-right 0.3s ease;
}
.prices__controller{
    position: absolute;
    top: 0;
    left: auto;
    right: 0;
    bottom: auto;
    background-color: #D84040;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s ease;
}
.prices__controller:hover{
    background: #8E1616;
}
.prices__controller svg{
    transition: transform 0.3s ease;
}
.prices__controller.open{
    background: #EEEEEE;
}
.prices__controller.open svg{
    transform: rotate(180deg);
}
.prices__controller.open svg path{
    stroke: #1D1616;
}
.prices__cost-title,
.prices__cost-count,
.prices__cost-link {
    transition: color 0.3s ease, opacity 0.3s ease;
}
.prices__cost-item:hover{
    background: var(--red, #d84040);
    padding-left: 12px;
    padding-right: 12px;
}
.prices__cost-title{
    color: var(--black, #1d1616);
    font-family: var(--buttons-font-family, "Onest", sans-serif);
    font-size: var(--buttons-font-size, 18px);
    line-height: var(--buttons-line-height, 100%);
    font-weight: var(--buttons-font-weight, 600);
}
.prices__cost-item:hover .prices__cost-title{
    color: var(--light, #f8f8f8);
    font-family: var(--buttons-font-family, "Ones", sans-serif);
    font-size: var(--buttons-font-size, 18px);
    line-height: var(--buttons-line-height, 100%);
    font-weight: var(--buttons-font-weight, 600);
}
.prices__cost-count{
    color: var(--black, #1d1616);
    font-family: var(--buttons-font-family, "Onest", sans-serif);
    font-size: var(--buttons-font-size, 18px);
    line-height: var(--buttons-line-height, 100%);
    font-weight: var(--buttons-font-weight, 600);
}
.prices__cost-item:hover .prices__cost-count{
    display: none;
}
.prices__cost-link{
    display: none;
    text-decoration: none;
    color: var(--light, #f8f8f8);
    font-family: var(--buttons-font-family, "Onest", sans-serif);
    font-size: var(--buttons-font-size, 18px);
    line-height: var(--buttons-line-height, 100%);
    font-weight: var(--buttons-font-weight, 600);
    opacity: 0;
}
.prices__cost-item:hover .prices__cost-link{
    display: block;
    opacity: 1;
}
@media (max-width:1280px){
    .prices__wrapper{
        column-gap: 40px;
    }
    .prices__item{
        width: calc(50% - 20px);
    }
}
@media (max-width:1024px){
    .prices{
        margin-top: 36px;
        margin-bottom: 60px;
    }
    .prices__wrapper{
        flex-direction: column;
        row-gap: 60px;
    }
    .prices__item{
        width: 100%;
    }
    .prices__description{
        max-width: 100%;
    }
    .prices__cost-title{
        max-width: 50%;
    }
}
@media (max-width:768px){
    .prices__controller{
        display: none;
    }
    .prices__cost-wrapper{
        margin-top: 36px;
        display: flex;
        height: auto;
        opacity: 1;
    }
}
.hero__description{
    margin-top: -32px;
    color: var(--black, #1d1616);
    font-family: var(--text-font-family, "Onest", sans-serif);
    font-size: var(--text-font-size, 18px);
    line-height: var(--text-line-height, 150%);
    font-weight: var(--text-font-weight, 200);
}
.hero__description p{
    padding: 0;
    margin: 0;
    padding-bottom: 20px;
}
.hero__description ul{
    margin: 0;
    padding: 0;
    padding-left: 17px;
}
@media (max-width:768px){
    .hero__description{
        margin-top: -20px;
    }
    .link-arrow-hover{
        display: none;
    }
}
/*  */
.popup {
  position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  /* padding: 20px; */
}

.popup.active {
  display: flex;
}

.popup__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.popup__content {
  position: relative;
  background: var(--light, #f8f8f8);
  padding: 60px;
  max-width: 830px;
  /* max-height: 90vh; */
  z-index: 1;
  width: 100%;
  overflow-y: auto; /* включаем вертикальную прокрутку при необходимости */
  display: flex;
  flex-direction: column;
  align-items: center;
  max-height: 100vh;
  box-sizing: border-box;
}

.popup__close {
  position: absolute;
  top: 36px;
  right: 36px;
  background: none;
  border: none;
  cursor: pointer;
}
.popup__content .feedback__title{
    color: var(--black, #1d1616);
    text-align: center;
}
.popup__content .feedback__description{
    color: var(--black, #1d1616);
    text-align: center;
}
.popup__content .feedback__fields{
    flex-direction: column;
}
.popup__content .feedback__field{
    width: 100%;
}
.popup__content .feedback__input{
    width: 100%;
    border:1px solid var(--dark-grey, #c7c7c7);
}
.popup__content .feedback__row{
    width: 100%;
}
.popup__content .feedback__textarea{
    border:1px solid var(--dark-grey, #c7c7c7);
}
.popup__content .feedback__submit{
    width: 100%;
}
.popup__content .feedback__submit:hover{
    background: var(--red, #d84040);
}
.popup__content .feedback__note{
    color: var(--black, #1d1616);
    text-align: center;
}
.popup__content .feedback__note a{
    color: var(--black, #1d1616);
}
.popup__content .feedback__error{
    color: var(--black, #1d1616);
}
.popup__content .feedback__error::before{
    background: url('data:image/svg+xml,<svg class="vector" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 15C10.2833 15 10.521 14.904 10.713 14.712C10.905 14.52 11.0007 14.2827 11 14V10C11 9.71667 10.904 9.47933 10.712 9.288C10.52 9.09667 10.2827 9.00067 10 9C9.71733 8.99933 9.48 9.09533 9.288 9.288C9.096 9.48067 9 9.718 9 10V14C9 14.2833 9.096 14.521 9.288 14.713C9.48 14.905 9.71733 15.0007 10 15ZM10 7C10.2833 7 10.521 6.904 10.713 6.712C10.905 6.52 11.0007 6.28267 11 6C10.9993 5.71733 10.9033 5.48 10.712 5.288C10.5207 5.096 10.2833 5 10 5C9.71667 5 9.47933 5.096 9.288 5.288C9.09667 5.48 9.00067 5.71733 9 6C8.99933 6.28267 9.09533 6.52033 9.288 6.713C9.48067 6.90567 9.718 7.00133 10 7ZM10 20C8.61667 20 7.31667 19.7373 6.1 19.212C4.88334 18.6867 3.825 17.9743 2.925 17.075C2.025 16.1757 1.31267 15.1173 0.788001 13.9C0.263335 12.6827 0.000667932 11.3827 1.26582e-06 10C-0.000665401 8.61733 0.262001 7.31733 0.788001 6.1C1.314 4.88267 2.02633 3.82433 2.925 2.925C3.82367 2.02567 4.882 1.31333 6.1 0.788C7.318 0.262667 8.618 0 10 0C11.382 0 12.682 0.262667 13.9 0.788C15.118 1.31333 16.1763 2.02567 17.075 2.925C17.9737 3.82433 18.6863 4.88267 19.213 6.1C19.7397 7.31733 20.002 8.61733 20 10C19.998 11.3827 19.7353 12.6827 19.212 13.9C18.6887 15.1173 17.9763 16.1757 17.075 17.075C16.1737 17.9743 15.1153 18.687 13.9 19.213C12.6847 19.739 11.3847 20.0013 10 20ZM10 18C12.2333 18 14.125 17.225 15.675 15.675C17.225 14.125 18 12.2333 18 10C18 7.76667 17.225 5.875 15.675 4.325C14.125 2.775 12.2333 2 10 2C7.76667 2 5.875 2.775 4.325 4.325C2.775 5.875 2 7.76667 2 10C2 12.2333 2.775 14.125 4.325 15.675C5.875 17.225 7.76667 18 10 18Z" fill="%231D1616" /></svg>');
}
@media (max-width:1024px){
    .popup__content{
        max-width: 100%;
        margin-right: 20px;
        margin-left: 20px;
        padding-left: 24px;
        padding-right: 24px;
    }
    .popup__close{
        right: 10px;
        top: 10px;
    }
    .popup__close svg{
        width: 24px;
        height: 24px;
    }
    .popup__content .feedback__row{
        display: none;
    }
}
#preloader {
  position: fixed;
  inset: 0;
  background-color: #ffffff; /* Белый фон */
  z-index: 9999;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
#preloader .logo{
    max-width: 92%;
}

/* Когда прелоадер должен исчезнуть */
#preloader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
/* Начальное состояние для всех букв */
.letter {
  opacity: 0;
  transform: translateY(0); /* будет переопределено */
  animation: slideIn 0.8s ease forwards;
}

/* Смещение вверх */
.letter.from-top {
  transform: translateY(-160px);
}

/* Смещение вниз */
.letter.from-bottom {
  transform: translateY(160px);
}
.letter:nth-child(4) {
  animation-delay: 0.1s;
}
.letter:nth-child(5) {
  animation-delay: 0.1s;
}
.letter:nth-child(6) {
  animation-delay: 0.2s;
}
.letter:nth-child(7) {
  animation-delay: 0.2s;
}
.letter:nth-child(13) {
  animation-delay: 0.2s;
}
.letter:nth-child(11) {
  animation-delay: 0.1s;
}
.letter:nth-child(12) {
  animation-delay: 0.2s;
}
@keyframes slideIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
#writo-to-us{
    padding-top: 96px;
    padding-bottom: 96px;
    background: var(--light-grey, #eeeeee);
    margin-top: 96px;
}
#writo-to-us .title{
    color: var(--black, #1d1616);
    font-family: var(--h2-font-family, "Onest", sans-serif);
    font-size: var(--h2-font-size, 36px);
    line-height: var(--h2-line-height, 125%);
    font-weight: var(--h2-font-weight, 700);
}
#writo-to-us .invalid .wpcf7-response-output{
    display: block !important;
}
#writo-to-us form{
    display: grid;
    margin-top: 48px;
    grid-template-columns: 48% 48%;
    width: 100%;
    max-width: 100%;
    justify-content: space-between;
    row-gap: 10px;
}
#writo-to-us input{
    max-width: 100%;
    width: 100%;
    height: 42px;
    border: none;
    outline: none;
    background: var(--light, #f8f8f8);
    border-radius: 30px;
    padding: 12px 20px 12px 20px;
    box-sizing: border-box;

    color: var(--black, #1D1616);
    font-family: var(--buttons-font-family, "Onest", sans-serif);
    font-size: var(--buttons-font-size, 18px);
    line-height: var(--buttons-line-height, 100%);
    font-weight: var(--buttons-font-weight, 600);
    transition: background 0.3s ease;
    border: 1px solid var(--dark-grey, #c7c7c7);
}
#writo-to-us input::placeholder {
    color: var(--dark-grey, #c7c7c7);
    font-family: var(--buttons-font-family, "Onest", sans-serif);
    font-size: var(--buttons-font-size, 18px);
    line-height: var(--buttons-line-height, 100%);
    font-weight: var(--buttons-font-weight, 600);
    transition: color 0.3s ease;
}
#writo-to-us textarea{
    height: 128px;
    max-width: 100%;
    width: 100%;
    border: none;
    outline: none;
    background: var(--light, #f8f8f8);
    border-radius: 30px;
    padding: 12px 20px 12px 20px;
    box-sizing: border-box;

    color: var(--black, #1D1616);
    font-family: var(--buttons-font-family, "Onest", sans-serif);
    font-size: var(--buttons-font-size, 18px);
    line-height: var(--buttons-line-height, 100%);
    font-weight: var(--buttons-font-weight, 600);
    transition: background 0.3s ease;
    border: 1px solid var(--dark-grey, #c7c7c7);
}
#writo-to-us textarea::placeholder {
    color: var(--dark-grey, #c7c7c7);
    font-family: var(--buttons-font-family, "Onest", sans-serif);
    font-size: var(--buttons-font-size, 18px);
    line-height: var(--buttons-line-height, 100%);
    font-weight: var(--buttons-font-weight, 600);
    transition: color 0.3s ease;
}
#real-file{
    display: none;
}
#for-real-file div{
    display: flex;
    gap: 10px;
    color: var(--black, #1d1616);
    text-align: left;
    font-family: var(--buttons-font-family, "Onest", sans-serif);
    font-size: var(--buttons-font-size, 18px);
    line-height: var(--buttons-line-height, 100%);
    font-weight: var(--buttons-font-weight, 600);
}
._10{
    color: var(--black, #1d1616);
    text-align: left;
    font-family: "Onest", sans-serif;
    font-size: 14px !important;
    line-height: 150% !important;
    font-weight: 400 !important;
    opacity: 0.8 !important;
}
#writo-to-us [name="topic"]{
    grid-row-start: 1;
    grid-row-end: 1;
    grid-column-start: 1;
    grid-column-end: 1;
}
 #writo-to-us [name="service"]{
    grid-row-start: 2;
    grid-row-end: 5;
    grid-column-start: 1;
    grid-column-end: 1;
}
#writo-to-us .file-upload-wrapper{
    grid-row-start: 5;
    grid-row-end: 5;
    grid-column-start: 1;
    grid-column-end: 1;
}
#writo-to-us [name="your-name"]{
    grid-row-start: 1;
    grid-row-end: 1;
    grid-column-start: 2;
    grid-column-end: 2;
}
#writo-to-us [name="your-phone"]{
    grid-row-start: 2;
    grid-row-end: 2;
    grid-column-start: 2;
    grid-column-end: 2;
}
#writo-to-us [name="your-email"]{
    grid-row-start: 3;
    grid-row-end: 3;
    grid-column-start: 2;
    grid-column-end: 2;
}
#writo-to-us [name="position"]{
    grid-row-start: 4;
    grid-row-end: 4;
    grid-column-start: 2;
    grid-column-end: 2;
}
#writo-to-us [name="company"]{
    grid-row-start: 5;
    grid-row-end: 5;
    grid-column-start: 2;
    grid-column-end: 2;
}
#writo-to-us .last-row{
    grid-row-start: 6;
    grid-row-end: 6;
    grid-column-start: 1;
    grid-column-end: 3;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 26px;
}
#writo-to-us .last-row div{
    color: var(--black, #1d1616);
    text-align: left;
    font-family: "Onest", sans-serif;
    font-size: 14px;
    line-height: 150%;
    font-weight: 400;
    opacity: 0.8;
}
#writo-to-us .last-row a{
    color: var(--black, #1d1616) !important;
    text-align: left;
    font-family: "Onest", sans-serif;
    font-size: 14px;
    line-height: 150%;
    font-weight: 400;
    opacity: 0.8;
}
#writo-to-us .wpcf7-response-output{
    grid-row-start: 7;
    grid-row-end: 7;
    grid-column-start: 1;
    grid-column-end: 3;
}
#writo-to-us .link-arrow{
    border: none;
    outline: none;
    opacity: 1;
}
@media (max-width:1024px){
    .title-universal{
        color: var(--black, #1d1616) !important;
        font-family: var(--h1-mobile-font-family, "Onest", sans-serif) !important;
        font-size: var(--h1-mobile-font-size, 28px) !important;
        line-height: var(--h1-mobile-line-height, 135%) !important;
        font-weight: var(--h1-mobile-font-weight, 700) !important;
    }
    .title-block-universal{
        color: var(--black, #1d1616) !important;
        font-family: var(--h3-font-family, "Onest", sans-serif) !important;
        font-size: var(--h3-font-size, 28px) !important;
        line-height: var(--h3-line-height, 125%) !important;
        font-weight: var(--h3-font-weight, 700) !important;
    }
}
.about-projects .about-projects__pagination {
  margin-top: 16px;
  text-align: center;
  position: absolute;
  top: auto !important;
  bottom: 36px !important;
  width: 50% !important;
  margin-left: 50%;
}

.about-projects .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: black;
  opacity: 0.4;
  margin: 0 6px;
  border-radius: 50%;
  cursor: pointer;
  transition: opacity 0.3s;
}

.about-projects .swiper-pagination-bullet-active {
  opacity: 1;
}
.about-projects .swiper-button-prev{
    width: 40px !important;
    height: 40px !important;
    background: #D84040;
    border-radius: 50%;
    opacity: 1;
}
.about-projects .swiper-button-prev:hover{
    background: #8E1616;
}
.about-projects .swiper-button-next{
    width: 40px !important;
    height: 40px !important;
    background: #D84040;
    border-radius: 50%;
    opacity: 1;
}
.about-projects .swiper-button-next:hover{
    background: #8E1616;
}
.about-projects .swiper-button-next::after{
    font-size: 20px !important;
    color: white;
}
.about-projects .swiper-button-prev::after{
    font-size: 20px !important;
    color: white;
}
.about-projects .swiper-pagination-bullet{
    background: var(--light, #f8f8f8);
}
.about-projects .swiper-pagination-bullet.swiper-pagination-bullet-active{
    background: var(--red, #d84040);
}
@media (max-width:1024px){
    #writo-to-us form{
        display: flex;
        flex-direction: column;
    }
    #writo-to-us [name="your-name"]{
        order: 0;
    }
    #writo-to-us [name="your-phone"]{
        order: 1;
    }
    #writo-to-us [name="your-email"]{
        order: 2;
    }
    #writo-to-us [name="position"]{
        order: 3;
    }
    #writo-to-us [name="company"]{
        order: 4;
    }
    #writo-to-us [name="topic"]{
        order: 5;
    }
    #writo-to-us [name="service"]{
        order: 6;
    }
    #writo-to-us .file-upload-wrapper{
        order: 7;
    }
    #writo-to-us .last-row{
        order: 8;
        display: flex;
        flex-direction: column-reverse;
        gap: 20px;
        align-items: flex-start;
    }
    #writo-to-us br{
        display: none;
    }
    #writo-to-us .invalid .wpcf7-response-output{
        order: 9;
    }
}
#call-to-action{
    display: block;
    width: 131px;
    height: 120px;
    position: fixed;
    right: 30px;
    left: auto;
    top: auto;
    bottom: 30px;
}
#call-to-action img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
@media (max-width:1024px) {
    #call-to-action{
        width: 99px;
        height: 90px;
    }
}
.wpcf7-not-valid {
  border: 2px solid red !important;
  background-color: #fff2f2 !important;
}

.wpcf7-form-control-wrap .wpcf7-not-valid-tip {
  color: red;
  font-size: 13px;
  margin-top: 5px;
  display: block;
}

/* .wpcf7-response-output {
  border: 1px solid red;
  background-color: #fff0f0;
  padding: 10px;
  margin-top: 20px;
  color: red;
  font-weight: bold;
} */
.header__phone{
	text-decoration: none;
	color: var(--black, #1d1616);
	font-family: var(--menu-items-font-family, "Onest", sans-serif);
	font-size: var(--menu-items-font-size, 16px);
	line-height: var(--menu-items-line-height, 100%);
	font-weight: var(--menu-items-font-weight, 200);
	transition: color 0.3s ease, border-bottom 0.3s ease;
}
.header__phone::hover{
	color: var(--red, #d84040);
	border-bottom: 1px solid var(--red, #d84040);
}
@media (max-width:1024px){
	.header__nav ul{
		gap:10px;
	}
}
@media (max-width:767px){
	.header__phone{
		display:none;
	}
}