html, body{
    margin: 0;
    font-family: "Playfair", serif;
}

* {
    font-family: 'Playfair Display', serif;
}

/* Picture элементы должны быть прозрачными для стилей - все стили применяются к img внутри */
/* Используем display: contents чтобы picture не влиял на размеры */
picture {
    display: contents !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    box-sizing: border-box !important;
}

/* Убеждаемся, что все стили для классов изображений применяются и к img внутри picture */
picture > img {
    /* Наследуем все стили от родительского picture через display: contents */
    /* Дополнительно убеждаемся, что img ведет себя как обычный img */
    display: block;
    box-sizing: border-box;
}

/* Fallback для браузеров, которые не поддерживают display: contents */
@supports not (display: contents) {
    picture {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    
    picture > img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        box-sizing: border-box !important;
    }
}

.t-upper{
    text-transform: uppercase;
}

.t-underline-b{
    text-decoration: underline;
    cursor: pointer;
    color: #4C3B34;
}

.t-underline-w{
    text-decoration: underline;
    cursor: pointer;
    color: #FAF9F6;
}


section{
    margin: 0;
    width: 100%;
 }

.btn-main-non-active{
    width: clamp(200px, 13vw, 300px);
    height: clamp(50px, 3vw, 70px);
    color: #FAF9F6;
    background-color: #9E9794;
    border: 1.5px solid #FAF9F6;
    border-radius: 30px;
    cursor: pointer;
    font-size: clamp(24px, 2vw, 36px);

    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-main-non-active:hover {
    color: #817773;
    background-color: #FAF9F6;
}

.btn-second-non-active{
    width: 300px;
    height: 70px;
    color: #FAF9F6;
    background-color: #4C3B34;
    border: 1.5px solid #FAF9F6;
    border-radius: 30px;
    cursor: pointer;
    font-size: clamp(24px, 2vw, 36px);

    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-second-non-active:hover {
    color: #FAF9F6;
    background-color: #817773;
}

/* HEADER */
/* Скрыт по умолчанию */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #4C3B34;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 5vw; /* вместо 3vh */
    z-index: 999;
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.35s ease, opacity 0.35s ease;
    box-sizing: border-box; /* чтобы padding не ломал размеры */
    min-height: 80px; /* фиксированная минимальная высота */
}

/* Когда нужно показать */
.header.visible {
    transform: translateY(0);
    opacity: 1;
}


/* SECTION 1 */

.social-media {
    display: inline-block;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.social-media:hover {
    transform: scale(1.1);
}

.section-1{
    height: 100vh;
    overflow: hidden;
}

.div-split2{
    display: flex;
    width: 100%;
}

.div-left{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    background-color: #4C3B34;
}

.div-left-head{
    display: flex;
    flex-direction: column;
    align-items: baseline;
    margin: 6vh 0;
}

.logo-header-section1{
    display: flex;
    align-items: start;
}

.main-title {
    max-width: 22ch;
    margin: 0;

    font-family: "Playfair", serif;
    font-weight: 400;
    font-size: clamp(20px, calc(2.02vw), 40px);


    color: #FAF9F6;
}

.logo-svg{
    width: clamp(90px, 7vw, 140px);
    height: auto;
    fill: none;
}

.title-name{
    margin: 0;
    font-size: clamp(24px, 2.5vw, 64px);
    color: #FAF9F6;
}

.div-buttons-section1{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.btn-s1{
    margin-bottom: 6vh;
}

.btn-portfolio-tablet {
    display: none;
}

.div-lang-switcher-section1{
    margin-top: 6vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.div-lang-switcher-section1 .lang-switcher {
    display: flex;
    gap: 5vw;
    align-items: center;
    justify-content: center;
}

.div-lang-switcher-section1 .lang-switcher button {
    background: transparent;
    border: none;
    color: #FAF9F6;
    padding: 0;
    cursor: pointer;
    border-radius: 50%;
    width: clamp(30px, 4.5vw, 60px);
    height: clamp(30px, 4.5vw, 60px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(16px, 1.5vw, 24px);
    transition: transform 0.3s ease, color 0.3s ease;
    font-family: 'Playfair', serif;
    font-weight: 600;
    border: 2px solid #FAF9F6;
}

.div-lang-switcher-section1 .lang-switcher button:hover {
    transform: scale(1.1);
    color: #FAF9F6;
    border-color: #9E9794;
}

.div-lang-switcher-section1 .lang-switcher button.active {
    background: #FAF9F6;
    color: #9E9794;
    border-color: #817773;
}

.div-lang-switcher-section1 .lang-switcher button.active:hover {
    background: #9E9794;
    border-color: #9E9794;
    color: #FAF9F6;
}

.div-social-media-section1{
    margin-top: 6vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.social-media{
    width: clamp(48px, 4vw, 75px);
    height: auto;
    fill: none;
}

.div-social-media-section1 .social-media:not(:last-child) {
     margin-right: 5vw;
}

.div-right{
    width: 50%;
    display: flex;
}

.div-main-one-img{
    position: relative;
    width: 100%;
    height: 100%;
}

.div-main-one-img::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-color: #817773; */
    opacity: 0.25;
    z-index: 2;
    pointer-events: none;
}

.main-one-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 1;
}


/* SECTION 2 */
.div-small-split2{
    display: flex
}

.div-two-images{
    display: flex;
    width: 50%;
}

.small-img{
    width: 50%;
}

.div-small-split2-text{
    width: 50%;
    background-color: #FAF9F6;
    color: #817773;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.p-first-small-split-text{
    text-transform: uppercase;
    font-size: clamp(28px, 2vw, 40px);
    margin: 0;
    margin-bottom: 2vh;
    font-family: 'Playfair';
    font-style: normal;
    font-weight: 400;
    color: #4C3B34;
}

.p-small-split-text{
    margin: 0;
    max-width: 50ch;
    font-size: clamp(16px, 1.2vw, 24px);
    line-height: 1.95;
    letter-spacing: 0.1em;
}

.section-2 .t-underline-b {
    transition:
        transform 0.25s ease,
        text-shadow 0.25s ease;
}

.section-2 .t-underline-b:hover {
    transform: scale(1.04);
    text-shadow: 0 0 1px currentColor;
}

/* SECTION 3 */
.section-3{
    height: 100vh;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.div-video-main-page{
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-page-video-wrapper{
    width: 100%;
    height: 0;
    position: relative;
    padding-top: 56.25%; /* 16:9 aspect ratio */
    margin: 0;
    padding-left: 0;
    padding-right: 0;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

.main-page-video-iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    transform: translateZ(0);
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* SECTION 4 */
.div-left-imgs{
    display: flex;
    flex-direction: column;
    width: 50%;
}

.text-upper-img {
    max-width: 35vw;
    position: absolute;
    z-index: 2;
    color: #FAF9F6;
    font-size: clamp(28px, 2.5vw, 45px);
    font-weight: 300;
    text-align: center;
    text-transform: uppercase;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Playfair';
    font-style: normal;
    font-weight: 400;
}

.div-split-vertical {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.split-link {
    display: block;
    width: 100%;
    height: 50%;
    text-decoration: none;       /* убрать подчёркивание */
    color: inherit;              /* сохранить цвет текста */
}

.div-split-vertical-el {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    cursor: pointer;
}

.bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.div-split-vertical-el::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1;
}

.div-split-vertical-el .bg-img {
    transition: transform 0.5s ease;
}

.div-split-vertical-el .text-upper-img {
    transition: transform 0.5s ease, color 0.5s ease;
}

.div-split-vertical-el:hover .bg-img,
.div-split-vertical-el:hover picture > img.bg-img {
    transform: scale(1.1);
}

.div-split-vertical-el:hover .text-upper-img {
    transform: translate(-50%, -50%) scale(1.05);
}


.div-right-services{
    width: 50%;
    display: flex;
}

.div-brown-services{
    width: 100%;
    background-color: #4C3B34;
    color: #FAF9F6;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10vh;
}

.main-text-services{
    font-size: clamp(28px, 2.8vw, 45px);
    text-transform: uppercase;
    margin: 0;
    margin-bottom: 7vh;
    font-family: 'Playfair';
    font-style: normal;
    font-weight: 500;
}

.text-services{
    font-size: clamp(16px, 1.2vw, 24px);
    margin-bottom: 7vh;
    max-width: 55ch;
    letter-spacing: 0.12em;
    line-height: 1.9;
    font-family: 'Playfair';
    font-style: normal;
    font-weight: 400;
}

.text-services-underline {
    font-family: 'Playfair';
    font-style: normal;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.section-4 .btn-main-non-active{
    width: clamp(160px, 13vw, 245px);
    height: clamp(40px, 5.5vh, 56px);
    font-size: clamp(18px, 1.6vw, 36px);
}

.t-review-underline{
    font-family: 'Playfair';
    font-style: normal;
    font-weight: 700;
}

.section-4 .t-underline-w {
    transition:
        transform 0.25s ease,
        text-shadow 0.25s ease;
}

.section-4 .t-underline-w:hover {
    transform: scale(1.04);
    text-shadow: 0 0 1px currentColor;
}



/* SECTION 5 */
.review-content {
    position: absolute;
    inset: 0;
    background: #817773;
    color: #FAF9F6;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .4s ease, transform .4s ease;
    pointer-events: none;
}

.div-two-images.open .review-content {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.review-arrow{
    width: clamp(15px, 1.4vw, 25px);
    height: auto;
    fill: none;
}

.review-arrow,
.review-arrow-alt {
    transition: transform .4s ease;
}

.div-two-images.open .review-arrow,
.div-two-images.open .review-arrow-alt {
    transform: rotate(180deg);
}


/* ---------- Общие блоки ---------- */
.div-small-split-review {
    display: flex;
    align-items: center;
    justify-content: space-between;
}



/* Контейнер с изображением */
.div-two-images {
    position: relative;
    width: 50%;
    overflow: hidden;
}

/* Изображение */
.review-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

/* Скрытый блок с отзывом */
.review-content {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    background: #817773;
    color: #FAF9F6;
    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 0;
    pointer-events: none;
    transition: transform .4s ease, opacity .4s ease;
    z-index: 2;
}

/* Начальное положение блока для анимации выезда */
/* ПРАВЫЙ блок выезжает слева */
.right-start {
    transform: translateX(100%);
}

/* ЛЕВЫЙ блок выезжает справа */
.left-start {
    transform: translateX(-100%);
}

/* Открытые состояния */
.div-two-images.right-open .review-content {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
    flex-direction: column;
}

.div-two-images.left-open .review-content {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
    flex-direction: column;
}

/* ---------- Оверлей и стрелки ---------- */
.review-overlay {
    position: absolute;
    top: 0;
    width: 10vw;
    max-width: 160px;
    height: 100%;
    display: flex;
    margin-right: 1vm;
    align-items: center;
    cursor: pointer;
    z-index: 3;
    transition: background 0.3s ease, width 0.5s ease, transform 0.5s ease;
}

/* Увеличение при наведении */
.review-overlay:hover {
    width: 12vw;
}

.review-overlay:hover .review-arrow {
    animation-duration: 0.8s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

/* Плавное движение влево-вправо для правого оверлея (стрелка смотрит влево) */
@keyframes arrow-smooth-move {
    0%, 100% { transform: rotate(0deg) translateX(0); }
    50% { transform: rotate(0deg) translateX(8px); }
}

/* Плавное движение вправо-влево для левого оверлея (стрелка смотрит вправо) */
@keyframes arrow-smooth-move-reverse {
    0%, 100% { transform: rotate(180deg) translateX(0); }
    50% { transform: rotate(180deg) translateX(-8px); }
}

/* Оверлей справа */
.right-overlay {
    flex-direction: row-reverse;
    right: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 77%);
}

/* Оверлей слева */
.left-overlay {
    left: 0;
    background: linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 77%);
}

.left-overlay .review-text{
    margin-left: 0.5em;
}

.right-overlay .review-text{
    margin-right: 0.5em;
}

/* Текст на оверлее */
.review-text {
    color: #FAF9F6;
    font-size: clamp(8px, 0.9vw, 18px);
    letter-spacing: 0.15em;
    line-height: 1.85;
    font-style: italic;
    font-weight: 300;
    text-transform: uppercase;
}

/* Стрелки */
.review-arrow,
.review-arrow-alt {
    transition: transform .4s ease;
    animation: arrow-smooth-move 2s ease-in-out infinite;
}

/* Начальное положение стрелок */
.right-overlay .review-arrow {
    transform: rotate(0deg); /* смотрит влево */
    animation: arrow-smooth-move 2s ease-in-out infinite;
}

.left-overlay .review-arrow {
    transform: rotate(180deg); /* смотрит вправо */
    animation: arrow-smooth-move-reverse 2s ease-in-out infinite;
}

/* Поворот стрелок при открытии */
.div-two-images.right-open .review-arrow {
    margin-right: 1.5em;
    transform: rotate(180deg); /* вниз */
    animation: none; /* Останавливаем анимацию при открытии */
}

.div-two-images.left-open .review-arrow{
    margin-left: 1.5em;
    transform: rotate(0deg); /* вниз */
    animation: none; /* Останавливаем анимацию при открытии */
}

.div-two-images.right-open .review-text,
.div-two-images.left-open .review-text
{
    display: none;
}

.div-two-images.right-open .review-overlay,
.div-two-images.left-open .review-overlay{
    background: none;
}

.review-open-main-text{
    font-size: clamp(28px, 2vw, 40px);
    margin: 0;
    margin-bottom: 3vh;
}

.review-open-text{
    font-style: italic;
    line-height: 1.5;
    max-width: 40ch;
    font-size: clamp(20px, 1.5vw, 32px);
    margin: 0;
}

/* ---------- Текст рядом с изображением ---------- */
.div-small-split-review-text {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.main-text-review {
    text-transform: uppercase;
    font-size: clamp(28px, 2vw, 40px);
    line-height: 1.2;
    letter-spacing: 0.15em;
    color: #817773;
    font-weight: 400;
    max-width: 25ch;
    font-family: 'Playfair';
    font-style: normal;
    font-weight: 400;
}

.div-small-split-review-text button{
    width: clamp(160px, 13vw, 245px);
    height: clamp(40px, 5.5vh, 56px);
    font-size: clamp(18px, 1.6vw, 36px);
}

.section-5 .t-underline-b {
    transition:
        transform 0.25s ease,
        text-shadow 0.25s ease;
}

.section-5 .t-underline-b:hover {
    transform: scale(1.04);
    text-shadow: 0 0 1px currentColor;
}

/* SECTION 6 */
/* ---------- Для слайдера (если нужно) ---------- */
.section-6{
    margin-bottom: 50px;
}

.div-slider {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.div-slider-content {
    display: flex;
    transition: transform 0.1s linear; /* плавное движение */
}

.slider-img {
    width: 25%;
    flex-shrink: 0;
    object-fit: cover;
    max-height: 50vh;
}

/* Убеждаемся, что picture в слайдерах не влияет на размеры */
.div-slider-content picture.slider-img,
.div-slider-content picture > img.slider-img {
    width: 25% !important;
    flex-shrink: 0 !important;
    object-fit: cover !important;
    max-height: 50vh !important;
    display: block !important;
}



/* SECTION 7 */
.section-7 .div-split2{
    margin: 10vh 0;
}

.div-left-steps{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50%;
}

.div-3steps{
    color: #817773;
    margin-bottom: 7vh;
}

.span-step{
    font-size: clamp(28px, 2vw, 40px);
    font-family: 'Playfair';
    font-style: normal;
    font-weight: 400;
}

.span-num-step{
    font-size: clamp(35px, 2.5vw, 50px);
    font-family: 'Montagu Slab';
    font-style: normal;
    font-weight: 600;
    color: #4C3B34;
}

.div-3steps .span-step:not(:last-child) {
     margin-right: 5vw;
}

.div-right-steps{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
}

.right-text-steps{
    color: #817773;
    font-size: clamp(24px, 1.8vw, 36px);
    line-height: 1.9;
    max-width: 40ch;
    font-family: 'Playfair';
    font-style: normal;
    font-weight: 400;
}

.section-7 .btn-second-non-active{
    width: 15vw;
    height: 7.5vh;
}

img{
width: 100%;}


@media (max-width: 1024px) {
    br{
        display: none;
    }
    .section-1{
        height: 80vh;
    }
    .div-left{
        height: 80vh;
        width: 100%;
    }
    .div-left-head{
        margin: 5vh 0;
    }
    .logo-svg{
        width: clamp(90px, 14vw, 140px);
    }
    .btn-s1{
        margin-bottom: 4vh;
    }
    .btn-main-non-active{
        font-size: clamp(24px, 3vw, 36px);
        width: clamp(200px, 20vw, 300px);
    }
    .div-social-media-section1{
        margin: 5vh 0;
    }
    .main-title{
        font-size: clamp(20px, calc(3.02vw), 40px);
    }
    .div-right{
        display: none;
    }
    .div-small-split2{
        flex-direction: column;
    }
    .div-two-images{
        width: 100%;
    }
    .small-img{
        height: 40vh;
        object-fit: cover;
    }
    .p-small-split-text{
        max-width: 90ch;
    }
    .div-small-split2-text{
        width: 100%;
        text-align: center;
    }
    .div-small-split2:nth-child(2) {
          flex-direction: column-reverse;
    }
    .p-first-small-split-text{
        font-size: clamp(28px, 4vw, 40px);
        margin: 1vh 0 0 0;
    }
    .p-small-split-text{
        font-size: clamp(16px, 1.9vw, 24px);
        margin: 1vh 0;
    }
    .section-3{
        height: auto;
    }
    .div-split2{
        flex-direction: column-reverse;
    }
    .div-brown-services{
        padding: 5vh;
    }
    .main-text-services{
        font-size: clamp(28px, 4vw, 40px);
        margin-bottom: 5vh;
    }
    .text-services{
        font-size: clamp(16px, 2.2vw, 30px);
        margin-bottom: 5vh;
        text-align: center;
    }
    .section-4 .btn-main-non-active {
        font-size: clamp(24px, 2.8vw, 36px);
        width: clamp(160px, 18vw, 245px);
    }
    .div-split-vertical-el{
        height: 40vh;
    }
    .text-upper-img{
        font-size: clamp(28px, 4vw, 45px);
    }
    .div-left-imgs{
        width: 100%;
    }
    .div-right-services{
        width: 100%;
    }
    .div-small-split-review{
        display: block;
    }
    .review-img{
        display: none;
    }
    .main-text-review{
        max-width: 35ch;
        text-align: center;
    }
    .div-small-split-review-text button{
        font-size: clamp(24px, 2.8vw, 36px);
        width: clamp(160px, 18vw, 245px);
    }
    .div-small-split-review-text{
        width: 100%;
    }
    .section-7 .div-split2{
        margin: 5vh 0;
    }
    .div-left-steps{
        width: 100%;
    }
    .div-right-steps{
        width: 100%;
    }
    .right-text-steps{
        text-align: center;
        font-size: clamp(28px, 2vw, 40px);
    }
    .div-3steps{
        margin-top: 2vh;
        margin-bottom: 2vh;
    }
    .section-7 .btn-second-non-active{
        font-size: clamp(24px, 2.8vw, 36px);
        width: clamp(160px, 18vw, 245px);
    }
}

@media (min-width: 481px) and (max-width: 1023px) {

  /* общий контроль */
  html {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
  }

  body {
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
  }

  br {
    display: none;
  }

  section {
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  /* ---------- SECTION 1 ---------- */
  .section-1 {
    height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-width: 100vw;
  }

  .div-split2 {
    overflow: hidden;
    max-width: 100vw;
  }

  .div-left {
    padding: 6vh 5vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
  }

  .div-left-head {
    display: flex;
    flex-direction: column;
    gap: 3vh;
    align-items: center;
    margin: 0 0 3vh 0;
    padding: 0;
    width: 100%;
  }

  /* First div: Only main title (h1) - hide SVG */
  .logo-header-section1 {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
  }

  .logo-header-section1 .main-title {
    margin: 0;
    padding: 0;
    order: 1;
    text-align: center;
  }

  .logo-header-section1 .logo-svg {
    display: none; /* Hide SVG from first div */
  }

  /* Second div: Logo on left, name on right */
  .div-name {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 2vw;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .div-name .title-name {
    margin: 0;
    padding: 0;
    text-align: center;
  }

  /* Show SVG next to name by cloning it with pseudo-element */
  .div-name::before {
    content: '';
    display: block;
    width: clamp(110px, 18vw, 180px);
    height: clamp(53px, 8.6vw, 87px);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 58' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.505853 33.7344C0.825306 33.5214 1.67744 32.989 3.16848 32.4564C4.76574 31.8175 5.51146 31.3915 5.7244 31.0717C8.1738 27.5572 10.0908 24.8948 11.6884 23.1908C14.564 19.8892 18.0785 16.4812 22.3385 12.9666C26.066 9.77149 28.6222 7.96099 30.0067 7.32209C30.6456 7.10915 31.0716 7.00264 31.3911 7.00264C32.4561 7.00264 32.9886 7.64154 32.9886 8.91965C32.9886 9.45204 32.8821 10.1977 32.5626 10.9431C30.8586 16.3747 27.77 22.1257 23.5101 28.3029C22.9777 28.9418 24.2555 30.4328 25.1076 30.0069C25.7465 29.581 26.9181 29.1547 28.7286 28.3029C30.2197 27.7704 31.0716 27.1313 31.2845 26.8118C34.2667 22.5518 41.0828 16.1617 51.7329 7.64154C52.5848 7.00264 53.224 6.68319 53.8629 6.68319C54.8215 6.68319 55.3539 7.21557 55.3539 8.49368C55.3539 9.34552 55.141 10.3042 54.6083 11.369C52.1588 17.7592 48.0054 24.6818 42.1476 31.9239C41.8281 32.989 41.8281 33.8409 42.0412 34.4798L39.4853 37.036C39.2723 37.2489 39.1658 37.4619 39.1658 37.7813C39.1658 38.6336 39.6982 38.953 40.4439 38.953C40.8698 38.953 41.0828 38.8465 41.4023 38.6336C48.6444 33.0955 57.6969 28.4093 68.56 24.5754C78.9972 20.8479 89.3277 18.5046 99.6584 17.4397C100.937 17.3333 102.214 17.2268 103.386 17.2268C108.179 17.2268 111.906 18.1852 114.569 19.9956C117.125 21.6997 118.403 23.7231 118.403 26.2794C118.403 27.2377 118.083 28.1964 117.657 29.2612C116.379 32.2433 115.101 32.4564 115.101 32.989C115.101 33.0955 115.208 33.3085 115.527 33.3085C115.953 33.3085 116.379 33.0955 116.912 32.7758C118.296 32.2433 119.148 31.1782 119.574 29.9004C119.894 28.9418 120 27.9834 120 27.1313C120 23.7231 117.977 20.9543 114.143 18.7176C110.309 16.4812 105.303 15.7358 99.2325 16.0552C91.7772 16.4812 82.5116 18.5046 71.5421 21.9127C63.7676 24.3623 57.1644 26.8118 51.8394 29.2612C50.9872 29.581 50.4548 29.9004 49.9223 29.9004C49.39 29.9004 49.1767 29.581 49.1767 29.0482C49.1767 28.4093 49.6029 27.5572 50.2418 26.4924C55.2474 18.3981 58.975 11.369 61.7442 5.19214C62.596 4.23349 63.2349 3.38155 63.7676 2.84916C64.0871 1.25161 63.6611 0.612404 62.3831 0.612404C62.0636 0.612404 61.6374 0.718925 61.2114 0.931862C54.0758 4.33991 45.3427 10.5172 35.4383 19.4633C35.1189 19.7827 34.6926 19.8892 34.3731 19.8892C33.7342 19.8892 33.4148 19.5698 33.4148 18.7176C33.4148 18.1852 33.6278 17.5462 34.0537 16.907C37.1423 10.8367 38.8464 7.10916 38.8464 5.72453C38.8464 4.87269 38.5266 4.33991 37.7812 4.12698C35.8642 3.48807 32.5626 4.55294 28.0897 7.32209C21.9125 11.1561 16.8004 15.2031 12.5405 19.5698C12.1145 19.9956 11.7949 20.2087 11.3689 20.2087C10.6235 20.2087 10.6235 19.4633 11.5819 17.7592C13.7118 13.9253 16.1615 10.4107 18.9304 7.21557C21.2736 4.44642 22.6579 2.84916 23.2971 2.423C23.8295 1.99702 24.0425 1.67757 23.723 1.46464C23.0841 1.03867 21.0607 1.89051 20.2085 2.63593C17.9721 4.87269 14.6704 9.02607 10.517 14.99C6.36331 20.8479 3.275 25.6402 1.25118 29.4745C0.718792 30.5393 0.186405 31.3915 0.0798877 31.9239C-0.0266292 32.3498 -0.0266292 32.6693 0.0798877 33.3085C0.186405 33.7344 0.292819 33.8409 0.505853 33.7344Z' fill='%23FAF9F6'/%3E%3Cpath d='M61.531 31.2849C64.4063 30.6457 66.2168 29.9004 66.9626 28.9417C75.2694 19.2502 83.3636 11.4755 91.3514 5.83097C91.8838 5.51152 92.4163 5.29848 93.0552 5.29848C94.3332 5.29848 94.9724 5.83097 94.9724 7.00256C94.9724 7.32202 94.866 7.74799 94.6526 8.06744C90.4993 13.7122 86.9847 19.7826 83.6831 26.2793C79.7426 34.0537 77.3997 40.5505 76.9735 45.5561C76.654 50.0289 77.3997 53.3306 79.4232 55.567C81.2337 57.3775 83.5766 58.2296 86.4523 57.9102C94.3332 57.0581 101.682 53.3306 108.604 46.5145C113.61 41.5088 116.912 37.0359 118.19 32.8821C118.616 31.6043 118.829 30.5393 118.829 29.7938C118.829 28.1963 118.19 27.3442 117.018 27.3442C116.059 27.3442 114.462 27.9834 114.462 28.8352C114.462 29.5809 117.657 28.5157 117.657 31.4978C117.657 35.0124 114.249 39.5918 107.54 45.3428C101.469 50.4549 96.3567 53.65 92.3098 54.8216C91.2446 55.141 90.2862 55.2476 89.2212 55.2476C86.7718 55.2476 84.8547 54.5021 83.3636 52.9046C81.7661 51.2005 81.1272 48.6444 81.3402 45.3428C81.7662 40.3375 83.7896 33.6279 87.6236 25.3206C91.5643 17.0138 96.1438 9.45196 101.256 2.9556C102.321 1.6775 102.321 0.825363 101.362 0.505913C100.51 0.0799408 99.2324 0.186462 97.6348 0.931786C96.6765 1.25153 95.8243 1.89043 94.9724 2.63586C93.2684 3.27506 89.6473 5.72445 84.2158 10.0912C79.6361 13.8187 75.2694 17.5462 71.329 21.3802C70.903 21.9126 70.3706 22.1256 70.0511 22.1256C69.5185 22.1256 69.199 21.8062 69.199 20.9542C69.199 20.528 69.3054 19.9956 69.6249 19.5697C72.3941 13.286 76.3346 7.00256 81.6596 0.825363C81.8726 0.612328 81.9791 0.292873 81.9791 0.079937C81.8726 -0.026577 81.6596 -0.026577 81.2337 0.079937C79.7426 0.292873 78.9972 0.825367 78.571 1.46457C75.8022 4.87262 72.5006 9.34545 68.7731 14.99C64.939 20.8478 62.1699 25.5337 60.4659 29.1546C60.0399 30.0068 59.9334 30.5393 60.2529 30.8587C60.3594 31.2849 60.7854 31.3914 61.531 31.2849Z' fill='%23FAF9F6'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
  }

  .logo-svg {
    width: clamp(110px, 18vw, 180px);
  }

  .main-title {
    font-size: clamp(48px, 6.5vw, 72px);
    line-height: 1.3;
    letter-spacing: 0.02em;
    max-width: 25ch;
    word-wrap: break-word;
  }

  .title-name {
    font-size: clamp(40px, 6vw, 64px);
    letter-spacing: 0.01em;
  }

  .div-buttons-section1 {
    gap: 4vh;
    margin: 4vh 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .btn-main-non-active,
  .btn-s1 {
    width: clamp(300px, 40vw, 450px);
    height: clamp(65px, 8vh, 85px);
    font-size: clamp(32px, 4.5vw, 50px);
    border-radius: 35px;
    border-width: 2.5px;
    margin: 0;
    padding: 0;
  }

  .btn-s1 {
    margin-bottom: 0;
  }

  .btn-portfolio-tablet {
    display: block;
  }

  .div-lang-switcher-section1 {
    margin: 2vh 0;
    padding: 0;
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .div-lang-switcher-section1 .lang-switcher {
    gap: 6vw;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .div-lang-switcher-section1 .lang-switcher button {
    width: clamp(70px, 9vw, 110px);
    height: clamp(70px, 9vw, 110px);
    font-size: clamp(24px, 3.5vw, 38px);
    border-width: 2.5px;
    margin: 0;
    padding: 0;
  }

  .div-social-media-section1 {
    margin: 4vh 0;
    padding: 0;
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .div-social-media-section1 .social-media {
    margin: 0;
    padding: 0;
  }

  .div-social-media-section1 .social-media:not(:last-child) {
    margin-right: 6vw;
  }

  .social-media {
    width: clamp(70px, 9vw, 110px);
    height: clamp(70px, 9vw, 110px);
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .social-media svg {
    width: 100%;
    height: 100%;
  }

  /* ---------- SECTION 2 ---------- */

  .section-2 {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  .div-small-split2 {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .div-small-split2:nth-child(2) {
    flex-direction: column-reverse;
  }

  .div-two-images {
    width: 100%;
    max-width: 100%;
    display: flex;
    gap: 0;
    box-sizing: border-box;
    overflow: hidden;
  }

  .small-img {
    width: 50%;
    max-width: 50%;
    height: clamp(300px, 50vh, 450px);
    object-fit: cover;
    display: block;
    box-sizing: border-box;
  }

  .div-small-split2-text {
    width: 100%;
    max-width: 100%;
    padding: clamp(40px, 8vh, 80px) clamp(20px, 4vw, 40px);
    margin: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(20px, 3vh, 30px);
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  .p-first-small-split-text {
    font-size: clamp(44px, 6.25vw, 67px);
    margin: 0;
    margin-bottom: clamp(15px, 2vh, 25px);
    line-height: 1.3;
    letter-spacing: 0.05em;
    font-weight: 500;
    text-align: center;
    width: 100%;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    box-sizing: border-box;
  }

  .p-small-split-text {
    font-size: clamp(25px, 3.4vw, 40px);
    line-height: 1.7;
    letter-spacing: 0.08em;
    margin: 0;
    max-width: 100%;
    width: 100%;
    text-align: center;
    overflow-wrap: break-word;
    word-wrap: break-word;
    box-sizing: border-box;
  }

  /* ---------- SERVICES ---------- */

  /* ---------- SECTION 4 ---------- */

  .section-4 {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  .section-4 .div-split2 {
    flex-direction: column-reverse;
    gap: 0;
    margin: 0;
    padding: 0;
  }

  .div-left-imgs {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .div-split-vertical {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0;
  }

  .div-split-vertical-el {
    height: clamp(350px, 55vh, 500px);
    width: 100%;
    box-sizing: border-box;
  }

  .text-upper-img {
    font-size: clamp(38px, 5.5vw, 60px);
    max-width: 90%;
    text-align: center;
  }

  .div-right-services {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .div-brown-services {
    padding: clamp(40px, 8vh, 80px) clamp(30px, 6vw, 60px);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(20px, 3vh, 30px);
  }

  .main-text-services {
    font-size: clamp(44px, 6.25vw, 67px);
    margin: 0;
    margin-bottom: clamp(15px, 2vh, 25px);
    text-align: center;
    line-height: 1.3;
    letter-spacing: 0.05em;
    font-weight: 500;
    width: 100%;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    box-sizing: border-box;
  }

  .text-services {
    font-size: clamp(25px, 3.4vw, 40px);
    line-height: 1.7;
    letter-spacing: 0.08em;
    margin: 0;
    margin-bottom: clamp(15px, 2vh, 25px);
    max-width: 100%;
    width: 90%;
    text-align: center;
    overflow-wrap: break-word;
    word-wrap: break-word;
    box-sizing: border-box;
  }

  .section-4 .btn-main-non-active {
    font-size: clamp(26px, 3.8vw, 44px);
    width: clamp(280px, 38vw, 420px);
    height: clamp(60px, 7.5vh, 80px);
    border-radius: 35px;
    margin-top: clamp(10px, 1.5vh, 20px);
  }

  /* ---------- SECTION 5 ---------- */

  .section-5 {
    padding: clamp(20px, 4vh, 40px) 0;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  .div-small-split-review {
    margin: 0;
    padding: 0;
  }

  .div-small-split-review + .div-small-split-review {
    margin-top: 0;
  }

  .div-small-split-review-text {
    padding-top: clamp(20px, 4vh, 40px);
    padding-left: clamp(20px, 4vw, 40px);
    padding-right: clamp(20px, 4vw, 40px);
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 1.5vh, 20px);
    box-sizing: border-box;
  }

  .main-text-review {
    font-size: clamp(36px, 5vw, 56px);
    margin: 0;
    margin-bottom: clamp(10px, 1.5vh, 20px);
    text-align: center;
    line-height: 1.3;
    letter-spacing: 0.05em;
    font-weight: 500;
    width: 100%;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    box-sizing: border-box;
  }

  .div-small-split-review-text button {
    width: clamp(280px, 38vw, 420px);
    height: clamp(60px, 7.5vh, 80px);
    font-size: clamp(26px, 3.8vw, 44px);
    border-radius: 35px;
    margin-top: clamp(5px, 1vh, 10px);
  }

  .slider-img{
    width: 33.33%;
  }
  
  /* Убеждаемся, что picture в слайдерах на мобильных работает правильно */
  .div-slider-content picture.slider-img,
  .div-slider-content picture > img.slider-img {
    width: 33.33% !important;
  }

  .section-6{
    margin-bottom: 0;
    }

  /* ---------- SECTION 7 ---------- */

  .section-7 {
    padding: clamp(20px, 4vh, 40px) 0;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  .section-7 .div-split2 {
    margin: 0;
    padding: 0;
    gap: 0;
  }

  .div-left-steps {
    padding: clamp(20px, 4vh, 40px) clamp(20px, 4vw, 40px);
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 1.5vh, 20px);
    box-sizing: border-box;
  }

  .div-right-steps {
    padding-top: clamp(20px, 4vh, 40px);
    padding-left: clamp(20px, 4vw, 40px);
    padding-right: clamp(20px, 4vw, 40px);
    padding-bottom: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 1.5vh, 20px);
    box-sizing: border-box;
  }

  .div-left-steps + .div-right-steps,
  .div-right-steps + .div-left-steps {
    margin-top: 0;
  }

  .right-text-steps {
    font-size: clamp(25px, 3.4vw, 40px);
    line-height: 1.7;
    letter-spacing: 0.08em;
    margin: 0;
    margin-bottom: clamp(10px, 1.5vh, 20px);
    max-width: 100%;
    width: 90%;
    text-align: center;
    overflow-wrap: break-word;
    word-wrap: break-word;
    box-sizing: border-box;
  }

  .div-3steps {
    margin: 0;
    margin-bottom: clamp(10px, 1.5vh, 20px);
  }

  .span-step {
    font-size: clamp(25px, 3.4vw, 40px);
    line-height: 1.7;
    letter-spacing: 0.08em;
  }

  .section-7 .btn-second-non-active {
    width: clamp(280px, 38vw, 420px);
    height: clamp(60px, 7.5vh, 80px);
    font-size: clamp(26px, 3.8vw, 44px);
    border-radius: 35px;
    margin-top: clamp(5px, 1vh, 10px);
  }
  .span-num-step{
    font-size: clamp(28px, 5vw, 50px);
  }

  /* ---------- HEADER ---------- */
  .header {
    min-height: clamp(110px, 18vh, 150px);
  }

  .header-mobile {
    min-height: clamp(110px, 18vh, 150px);
  }
}

/* ---------- MOBILE DEVICES (max-width: 480px) ---------- */
@media (max-width: 480px) {
  /* общий контроль */
  html {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
  }

  body {
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
  }

  br {
    display: none;
  }

  section {
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  /* ---------- SECTION 1 ---------- */
  .section-1 {
    height: auto;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-width: 100vw;
  }

  .div-split2 {
    overflow: hidden;
    max-width: 100vw;
    flex-direction: column;
  }

  .div-left {
    padding: 4vh 4vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    min-height: 100vh;
  }

  .div-left-head {
    display: flex;
    flex-direction: column;
    gap: 2vh;
    align-items: center;
    margin: 2vh 0;
    padding: 0;
    width: 100%;
  }

  .logo-header-section1 {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 1.5vh;
  }

  .logo-header-section1 .main-title {
    margin: 0;
    padding: 0;
    font-size: clamp(28px, 7vw, 40px);
    line-height: 1.3;
    max-width: 90%;
    word-wrap: break-word;
  }

  .logo-header-section1 .logo-svg {
    display: none;
  }

  .div-name {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: clamp(4px, 1.5vw, 10px);
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 2vw;
    box-sizing: border-box;
    flex-wrap: wrap;
  }

  .div-name::before {
    display: none;
  }

  .div-name::after {
    content: '';
    display: block;
    width: clamp(60px, 14vw + 0.75rem, 118px);
    aspect-ratio: 120 / 58;
    height: auto;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 58' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.505853 33.7344C0.825306 33.5214 1.67744 32.989 3.16848 32.4564C4.76574 31.8175 5.51146 31.3915 5.7244 31.0717C8.1738 27.5572 10.0908 24.8948 11.6884 23.1908C14.564 19.8892 18.0785 16.4812 22.3385 12.9666C26.066 9.77149 28.6222 7.96099 30.0067 7.32209C30.6456 7.10915 31.0716 7.00264 31.3911 7.00264C32.4561 7.00264 32.9886 7.64154 32.9886 8.91965C32.9886 9.45204 32.8821 10.1977 32.5626 10.9431C30.8586 16.3747 27.77 22.1257 23.5101 28.3029C22.9777 28.9418 24.2555 30.4328 25.1076 30.0069C25.7465 29.581 26.9181 29.1547 28.7286 28.3029C30.2197 27.7704 31.0716 27.1313 31.2845 26.8118C34.2667 22.5518 41.0828 16.1617 51.7329 7.64154C52.5848 7.00264 53.224 6.68319 53.8629 6.68319C54.8215 6.68319 55.3539 7.21557 55.3539 8.49368C55.3539 9.34552 55.141 10.3042 54.6083 11.369C52.1588 17.7592 48.0054 24.6818 42.1476 31.9239C41.8281 32.989 41.8281 33.8409 42.0412 34.4798L39.4853 37.036C39.2723 37.2489 39.1658 37.4619 39.1658 37.7813C39.1658 38.6336 39.6982 38.953 40.4439 38.953C40.8698 38.953 41.0828 38.8465 41.4023 38.6336C48.6444 33.0955 57.6969 28.4093 68.56 24.5754C78.9972 20.8479 89.3277 18.5046 99.6584 17.4397C100.937 17.3333 102.214 17.2268 103.386 17.2268C108.179 17.2268 111.906 18.1852 114.569 19.9956C117.125 21.6997 118.403 23.7231 118.403 26.2794C118.403 27.2377 118.083 28.1964 117.657 29.2612C116.379 32.2433 115.101 32.4564 115.101 32.989C115.101 33.0955 115.208 33.3085 115.527 33.3085C115.953 33.3085 116.379 33.0955 116.912 32.7758C118.296 32.2433 119.148 31.1782 119.574 29.9004C119.894 28.9418 120 27.9834 120 27.1313C120 23.7231 117.977 20.9543 114.143 18.7176C110.309 16.4812 105.303 15.7358 99.2325 16.0552C91.7772 16.4812 82.5116 18.5046 71.5421 21.9127C63.7676 24.3623 57.1644 26.8118 51.8394 29.2612C50.9872 29.581 50.4548 29.9004 49.9223 29.9004C49.39 29.9004 49.1767 29.581 49.1767 29.0482C49.1767 28.4093 49.6029 27.5572 50.2418 26.4924C55.2474 18.3981 58.975 11.369 61.7442 5.19214C62.596 4.23349 63.2349 3.38155 63.7676 2.84916C64.0871 1.25161 63.6611 0.612404 62.3831 0.612404C62.0636 0.612404 61.6374 0.718925 61.2114 0.931862C54.0758 4.33991 45.3427 10.5172 35.4383 19.4633C35.1189 19.7827 34.6926 19.8892 34.3731 19.8892C33.7342 19.8892 33.4148 19.5698 33.4148 18.7176C33.4148 18.1852 33.6278 17.5462 34.0537 16.907C37.1423 10.8367 38.8464 7.10916 38.8464 5.72453C38.8464 4.87269 38.5266 4.33991 37.7812 4.12698C35.8642 3.48807 32.5626 4.55294 28.0897 7.32209C21.9125 11.1561 16.8004 15.2031 12.5405 19.5698C12.1145 19.9956 11.7949 20.2087 11.3689 20.2087C10.6235 20.2087 10.6235 19.4633 11.5819 17.7592C13.7118 13.9253 16.1615 10.4107 18.9304 7.21557C21.2736 4.44642 22.6579 2.84916 23.2971 2.423C23.8295 1.99702 24.0425 1.67757 23.723 1.46464C23.0841 1.03867 21.0607 1.89051 20.2085 2.63593C17.9721 4.87269 14.6704 9.02607 10.517 14.99C6.36331 20.8479 3.275 25.6402 1.25118 29.4745C0.718792 30.5393 0.186405 31.3915 0.0798877 31.9239C-0.0266292 32.3498 -0.0266292 32.6693 0.0798877 33.3085C0.186405 33.7344 0.292819 33.8409 0.505853 33.7344Z' fill='%23FAF9F6'/%3E%3Cpath d='M61.531 31.2849C64.4063 30.6457 66.2168 29.9004 66.9626 28.9417C75.2694 19.2502 83.3636 11.4755 91.3514 5.83097C91.8838 5.51152 92.4163 5.29848 93.0552 5.29848C94.3332 5.29848 94.9724 5.83097 94.9724 7.00256C94.9724 7.32202 94.866 7.74799 94.6526 8.06744C90.4993 13.7122 86.9847 19.7826 83.6831 26.2793C79.7426 34.0537 77.3997 40.5505 76.9735 45.5561C76.654 50.0289 77.3997 53.3306 79.4232 55.567C81.2337 57.3775 83.5766 58.2296 86.4523 57.9102C94.3332 57.0581 101.682 53.3306 108.604 46.5145C113.61 41.5088 116.912 37.0359 118.19 32.8821C118.616 31.6043 118.829 30.5393 118.829 29.7938C118.829 28.1963 118.19 27.3442 117.018 27.3442C116.059 27.3442 114.462 27.9834 114.462 28.8352C114.462 29.5809 117.657 28.5157 117.657 31.4978C117.657 35.0124 114.249 39.5918 107.54 45.3428C101.469 50.4549 96.3567 53.65 92.3098 54.8216C91.2446 55.141 90.2862 55.2476 89.2212 55.2476C86.7718 55.2476 84.8547 54.5021 83.3636 52.9046C81.7661 51.2005 81.1272 48.6444 81.3402 45.3428C81.7662 40.3375 83.7896 33.6279 87.6236 25.3206C91.5643 17.0138 96.1438 9.45196 101.256 2.9556C102.321 1.6775 102.321 0.825363 101.362 0.505913C100.51 0.0799408 99.2324 0.186462 97.6348 0.931786C96.6765 1.25153 95.8243 1.89043 94.9724 2.63586C93.2684 3.27506 89.6473 5.72445 84.2158 10.0912C79.6361 13.8187 75.2694 17.5462 71.329 21.3802C70.903 21.9126 70.3706 22.1256 70.0511 22.1256C69.5185 22.1256 69.199 21.8062 69.199 20.9542C69.199 20.528 69.3054 19.9956 69.6249 19.5697C72.3941 13.286 76.3346 7.00256 81.6596 0.825363C81.8726 0.612328 81.9791 0.292873 81.9791 0.079937C81.8726 -0.026577 81.6596 -0.026577 81.2337 0.079937C79.7426 0.292873 78.9972 0.825367 78.571 1.46457C75.8022 4.87262 72.5006 9.34545 68.7731 14.99C64.939 20.8478 62.1699 25.5337 60.4659 29.1546C60.0399 30.0068 59.9334 30.5393 60.2529 30.8587C60.3594 31.2849 60.7854 31.3914 61.531 31.2849Z' fill='%23FAF9F6'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
    order: 2;
  }

  .title-name {
    font-size: clamp(22px, 5vw + 0.5rem, 34px);
    white-space: normal;
    line-height: 1.15;
    flex: 1 1 0;
    min-width: 0;
    order: 1;
  }

  .div-buttons-section1 {
    gap: 4vh;
    margin: 4vh 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .btn-main-non-active,
  .btn-s1 {
    width: clamp(250px, 85vw, 350px);
    height: clamp(50px, 7vh, 65px);
    font-size: clamp(26px, 6.5vw, 36px);
    border-radius: 30px;
    border-width: 2px;
    margin: 0;
    padding: 0;
  }

  .btn-s1 {
    margin-bottom: 0;
  }

  .btn-portfolio-tablet {
    display: block;
  }

  .div-lang-switcher-section1 {
    margin: 2vh 0;
    padding: 0;
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .div-lang-switcher-section1 .lang-switcher {
    gap: 10vw;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .div-lang-switcher-section1 .lang-switcher button {
    width: clamp(50px, 13vw, 70px);
    height: clamp(50px, 13vw, 70px);
    font-size: clamp(18px, 4.5vw, 24px);
    border-width: 2px;
    margin: 0;
    padding: 0;
  }

  .div-social-media-section1 {
    margin: 2vh 0;
    padding: 0;
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .div-social-media-section1 .social-media {
    margin: 0;
    padding: 0;
  }

  .div-social-media-section1 .social-media:not(:last-child) {
    margin-right: 10vw;
  }

  .social-media {
    width: clamp(50px, 13vw, 70px);
    height: clamp(50px, 13vw, 70px);
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .social-media svg {
    width: 100%;
    height: 100%;
  }

  /* ---------- SECTION 2 ---------- */
  .section-2 {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  .div-small-split2 {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .div-small-split2 + .div-small-split2 {
    margin-top: 0;
  }

  .div-small-split2:nth-child(2) {
    flex-direction: column-reverse;
  }

  .div-two-images {
    width: 100%;
    max-width: 100%;
    display: flex;
    gap: 0;
    box-sizing: border-box;
    overflow: hidden;
  }

  .small-img {
    width: 50%;
    max-width: 50%;
    max-height: 25vh;
    height: clamp(250px, 45vh, 350px);
    object-fit: cover;
    display: block;
    box-sizing: border-box;
  }

  .div-small-split2-text {
    width: 100%;
    max-width: 100%;
    padding: 2vh 4vw;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  .p-first-small-split-text {
    font-size: clamp(32px, 8vw, 48px);
    margin: 0;
    line-height: 1.3;
    letter-spacing: 0.05em;
    font-weight: 500;
    width: 100%;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    box-sizing: border-box;
  }

  .p-small-split-text {
    font-size: clamp(18px, 4.5vw, 28px);
    line-height: 1.6;
    letter-spacing: 0.08em;
    margin: 0;
    max-width: 100%;
    width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    box-sizing: border-box;
  }

  /* ---------- SECTION 3 ---------- */
  .section-3 {
    height: auto;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  .div-video-main-page {
    width: 100%;
    max-width: 100vw;
    /* padding: 10px; */
    box-sizing: border-box;
  }

  .main-page-video-wrapper {
    width: 100%;
    max-width: 100%;
    padding-top: 56.25%; /* 16:9 aspect ratio */
  }

  /* ---------- SECTION 4 ---------- */
  .section-4 {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  .section-4 .div-split2 {
    flex-direction: column-reverse;
    gap: 0;
    margin: 0;
    padding: 0;
  }

  .div-left-imgs {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .div-split-vertical {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0;
  }

  .div-split-vertical-el {
    height: clamp(280px, 50vh, 400px);
    max-height: 25vh;
    width: 100%;
    box-sizing: border-box;
  }

  .text-upper-img {
    font-size: clamp(28px, 7vw, 42px);
    max-width: 90%;
    text-align: center;
  }

  .div-right-services {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .div-brown-services {
    padding: 2vh 4vw;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(15px, 2vh, 25px);
  }

  .main-text-services {
    font-size: clamp(32px, 8vw, 48px);
    margin: 0;
    text-align: center;
    line-height: 1.3;
    letter-spacing: 0.05em;
    font-weight: 500;
    width: 100%;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    box-sizing: border-box;
  }

  .text-services {
    font-size: clamp(18px, 4.5vw, 28px);
    line-height: 1.6;
    letter-spacing: 0.08em;
    margin: 0;
    max-width: 100%;
    width: 95%;
    text-align: center;
    overflow-wrap: break-word;
    word-wrap: break-word;
    box-sizing: border-box;
  }

  .section-4 .btn-main-non-active {
    font-size: clamp(20px, 5vw, 28px);
    width: clamp(220px, 75vw, 320px);
    height: clamp(50px, 7vh, 65px);
    border-radius: 30px;
    margin-top: clamp(5px, 1vh, 10px);
  }

  /* ---------- SECTION 5 ---------- */
  .section-5 {
    padding: 2vh 4vw;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  .div-small-split-review {
    margin: 0;
    padding: 0;
    display: block;
  }

  .div-small-split-review + .div-small-split-review {
    margin-top: 0;
  }

  .div-small-split-review-text {
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 2vh, 20px);
    box-sizing: border-box;
  }

  .div-small-split-review-text:last-child {
    display: none;
  }

  .main-text-review {
    font-size: clamp(22px, 5.5vw, 32px);
    margin: 0;
    text-align: center;
    line-height: 1.3;
    letter-spacing: 0.05em;
    font-weight: 500;
    width: 100%;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    box-sizing: border-box;
  }

  .div-small-split-review-text button {
    display: none;
    width: clamp(220px, 75vw, 320px);
    height: clamp(50px, 7vh, 65px);
    font-size: clamp(20px, 5vw, 28px);
    border-radius: 30px;
    margin-bottom: 2vh;
  }

  .review-img {
    display: none;
  }

  .slider-img {
    width: 50%;
  }

  .div-slider-content picture.slider-img,
  .div-slider-content picture > img.slider-img {
    width: 50% !important;
  }

  .section-6 {
    margin-bottom: 0;
  }

  /* ---------- SECTION 7 ---------- */
  .section-7 {
    padding: 2vh 4vw;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  .section-7 .div-split2 {
    margin: 0;
    padding: 0;
    gap: 0;
    flex-direction: column;
  }

  .div-left-steps {
    margin: 0;
    margin-bottom: 2vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 2vh, 20px);
    box-sizing: border-box;
  }

  .div-right-steps {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }

  .div-left-steps + .div-right-steps,
  .div-right-steps + .div-left-steps {
    margin-top: 0;
  }

  .right-text-steps {
    font-size: clamp(18px, 4.5vw, 28px);
    line-height: 1.6;
    letter-spacing: 0.08em;
    margin: 0;
    max-width: 100%;
    width: 95%;
    text-align: center;
    overflow-wrap: break-word;
    word-wrap: break-word;
    box-sizing: border-box;
  }

  .div-3steps {
    margin: 0;
    display: flex;
    flex-direction: row;
    gap: 2vh;
    align-items: center;
  }

  .span-step {
    font-size: clamp(18px, 4.5vw, 28px);
    line-height: 1.6;
    letter-spacing: 0.08em;
    display: flex;
    align-items: center;
    gap: 1vw;
  }

  .span-num-step {
    font-size: clamp(24px, 6vw, 40px);
  }

  .div-3steps .span-step:not(:last-child) {
    margin-right: 0;
  }

  .section-7 .btn-second-non-active {
    width: clamp(220px, 75vw, 320px);
    height: clamp(50px, 7vh, 65px);
    font-size: clamp(20px, 5vw, 28px);
    border-radius: 30px;
  }

  /* ---------- HEADER ---------- */
  .header {
    min-height: clamp(70px, 12vh, 90px);
    padding: clamp(12px, 2.5vh, 20px) 4vw;
  }

  .header-desktop {
    display: none !important;
  }

  .header-mobile {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: clamp(12px, 2.5vh, 20px) 4vw;
    min-height: clamp(70px, 12vh, 90px);
    gap: 2vw;
  }

  .div-col-header {
    display: flex;
    align-items: center;
    gap: clamp(8px, 2vw, 15px);
  }

  .logo-header {
    display: none !important;
  }

  .header-name {
    font-size: clamp(16px, 4vw, 28px);
    margin-left: 0;
    white-space: nowrap;
  }

  .lang-switcher {
    gap: clamp(5px, 1.2vw, 8px);
  }

  .lang-switcher button {
    font-size: clamp(10px, 2.5vw, 14px);
    padding: clamp(4px, 1vh, 6px) clamp(8px, 2vw, 12px);
    border-width: 1.5px;
    border-radius: 6px;
    width: clamp(28px, 7vw, 38px);
    height: clamp(28px, 7vw, 38px);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .burger-menu-btn {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-around !important;
    width: clamp(28px, 7vw, 38px) !important;
    height: clamp(28px, 7vw, 38px) !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    z-index: 1001 !important;
    margin-left: 2vw !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .burger-line {
    width: 100% !important;
    height: 3px !important;
    background-color: #FAF9F6 !important;
    border-radius: 2px !important;
    transition: all 0.3s ease !important;
    display: block !important;
  }

  .mobile-menu {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    right: -100% !important;
    width: 70% !important;
    height: 100vh !important;
    background: #4C3B34 !important;
    z-index: 1002 !important;
    transition: right 0.3s ease !important;
    overflow-y: auto !important;
    pointer-events: auto !important;
    padding: clamp(20px, 4vh, 40px) clamp(20px, 4vw, 30px) !important;
    box-sizing: border-box !important;
  }

  .mobile-menu.active {
    right: 0 !important;
  }

  .mobile-menu-overlay {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 990 !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
  }

  .mobile-menu-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .mobile-menu-close {
    position: absolute;
    top: clamp(15px, 3vh, 25px);
    right: clamp(15px, 3vw, 25px);
    width: clamp(28px, 7vw, 36px);
    height: clamp(28px, 7vw, 36px);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1002;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
  }

  .mobile-menu-close svg {
    width: 100%;
    height: 100%;
  }

  .mobile-menu-content {
    padding: clamp(60px, 10vh, 80px) clamp(20px, 4vw, 30px) clamp(15px, 2.5vh, 25px);
    gap: clamp(15px, 2.5vh, 25px);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height: 100%;
    max-height: 100vh;
    box-sizing: border-box;
    overflow-y: auto;
  }

  .mobile-link-header {
    font-size: clamp(20px, 5vw, 28px);
    padding: clamp(10px, 1.5vh, 15px) 0;
  }

  .mobile-links {
    gap: clamp(8px, 1.5vh, 15px);
  }

  .mobile-lang-switcher {
    gap: clamp(20px, 4vw, 35px);
    padding: clamp(10px, 1.5vh, 15px) 0;
    margin-bottom: clamp(8px, 1.5vh, 12px);
  }

  .mobile-lang-switcher button {
    font-size: clamp(16px, 4vw, 22px);
    padding: 0;
    border-width: 2px;
    border-radius: 8px;
    width: clamp(40px, 10vw, 55px);
    height: clamp(40px, 10vw, 55px);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mobile-social-media {
    gap: clamp(20px, 4vw, 35px);
    margin-top: 0;
  }

  .mobile-social-media-link {
    width: clamp(40px, 10vw, 55px);
    height: clamp(40px, 10vw, 55px);
  }

  .mobile-menu-logo {
    padding: clamp(15px, 2vh, 20px) 0;
    margin-top: 0;
  }

  .mobile-menu-logo .logo-header {
    width: clamp(90px, 22vw, 140px);
    display: block !important;
  }

  /* ---------- FOOTER ---------- */
  footer {
    padding: clamp(30px, 5vh, 50px) 4vw;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
  }

  .div-split-footer {
    flex-direction: column;
    gap: 2vh;
    align-items: center;
    text-align: center;
  }

  .div-left-footer {
    flex-direction: column;
    align-items: center;
    gap: 2vh;
    width: 100%;
  }

  .footer-logo {
    width: clamp(120px, 30vw, 180px);
    height: auto;
  }

  .div-name-footer {
    margin-left: 0;
    text-align: center;
    margin-top: clamp(8px, 1.5vh, 12px);
  }

  .text-name-footer {
    font-size: clamp(28px, 7vw, 40px);
    margin-bottom: clamp(8px, 1.5vh, 12px);
    font-weight: 800;
  }

  .text-wedding-host-footer {
    font-size: clamp(16px, 4vw, 24px);
    max-width: 100%;
    text-align: center;
    line-height: 1.4;
  }

  .div-right-footer {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: clamp(15px, 2.5vh, 25px);
  }

  .div-contact-footer {
    text-align: center;
  }

  .phone-footer {
    font-size: clamp(18px, 4.5vw, 26px);
    margin-bottom: clamp(8px, 1.5vh, 12px);
  }

  .phone-footer a {
    font-size: clamp(18px, 4.5vw, 26px);
  }

  .mail-footer {
    margin: 0;
  }

  .mail-footer a {
    font-size: clamp(18px, 4.5vw, 26px);
  }

  .div-bottom-footer {
    flex-direction: column;
    gap: 2vh;
    align-items: center;
    margin-top: 2vh;
  }

  .left-bottom-footer {
    flex-direction: column;
    gap: 2vh;
    width: 100%;
    align-items: center;
  }

  .link-footer {
    font-size: clamp(18px, 4.5vw, 26px);
    display: block;
    padding: clamp(8px, 1.5vh, 12px) 0;
  }

  .left-bottom-footer .link-footer:not(:last-child) {
    margin-right: 0;
  }

  .center-bottom-footer {
    order: 3;
    text-align: center;
  }

  .year-created-footer {
    font-size: clamp(14px, 3.5vw, 20px);
    margin: 0;
  }

  .right-bottom-footer {
    order: 2;
    width: 100%;
    justify-content: center;
  }

  .div-social-media-footer {
    display: flex;
    justify-content: center;
    gap: clamp(20px, 4vw, 35px);
  }

  .div-social-media-footer .social-media-f:not(:last-child) {
    margin-right: 0;
  }

  .div-social-media-footer .social-media-f svg {
    width: clamp(40px, 10vw, 55px);
    height: auto;
  }

  /* ---------- BUTTONS ---------- */
  .btn-main-non-active,
  .btn-second-non-active {
    width: clamp(220px, 75vw, 320px);
    height: clamp(50px, 7vh, 65px);
    font-size: clamp(20px, 5vw, 28px);
    border-radius: 30px;
  }
}