/* ==========================================================================
   МОБІЛЬНА ВЕРСІЯ: ЕКРАН 1 (HERO)
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. Глобальний фікс горизонтального скролу */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 2. Секція та контейнер */
    .mzk-hero {
        padding: 32px 20px 40px 20px !important; /* Відступи за Figma */
        box-sizing: border-box !important;
        width: 100% !important;
        overflow: hidden !important;
    }
    
    .mzk-hero-inner {
        display: flex !important;
        flex-direction: column !important;
        gap: 32px !important;
        width: 100% !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .mzk-hero-text-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 3. Бейдж */
    .mzk-badge-light {
        height: 36px !important;
        padding: 0 16px !important;
        font-size: 14px !important;
        line-height: 20px !important;
        margin-top: 26px !important;
        margin-bottom: 16px !important;
    }

/* 4. Заголовок (Жорстко 3 рядки + фікс для широких екранів) */
    .mzk-hero-title {
        font-size: 33px !important;
        line-height: 46.2px !important;
        letter-spacing: -1px !important;
        
        /* ОБМЕЖЕННЯ ШИРИНИ: примусово змушуємо слова переноситися */
        width: 100% !important;
      
        
        margin-bottom: -20px !important;
        
        /* Фіксована висота на 3 рядки */
        height: 138.6px !important; 
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    /* Лінія під заголовком */
    .mzk-hero-line {
      display: none !important;
        max-width: 100% !important;
        margin-top: -65px !important;
        margin-bottom: -20px !important;
    }

 /* ==========================================================================
       ФИКС КНОПОК ПО ФИГМЕ (ИЗОЛЯЦИЯ ОТ СТИЛЕЙ ТЕМЫ)
       ========================================================================== */
    
    /* Контейнер кнопок — сбрасываем десктопную высоту, чтобы блоки не сжимались */
    .mzk-hero-buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important; /* Отступ между кнопками */
        width: 100% !important;
        height: auto !important; /* Позволяет кнопкам встать в полную высоту */
        margin-top: 32px !important;
        box-sizing: border-box !important;
    }

    /* Общие правила для обеих кнопок (сброс аномалий темы) */
    .mzk-btn-primary, 
    .mzk-btn-outline {
        display: flex !important;
        align-items: center !important;         /* Идеальное центрирование текста по вертикали */
        justify-content: center !important;       /* Идеальное центрирование текста по горизонтали */
        width: 100% !important;
        max-width: 338px !important;              /* Четкая ширина из Figma */
        margin: 0 auto !important;                /* Центрируем саму кнопку по центру экрана */
        padding: 0 !important;                    /* Обнуляем паддинги, центрируем строго через flex */
        border-radius: 50px !important;           /* Превращаем в идеальную капсулу (фикс гигантского числа из Figma) */
        font-family: 'Segoe UI', sans-serif !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        line-height: 1 !important;                /* Убираем межстрочные перекосы темы */
        text-align: center !important;
        text-transform: none !important;          /* Защита от принудительного Caps Lock темы */
        letter-spacing: 0px !important;
        box-sizing: border-box !important;
        transition: all 0.3s ease !important;
    }

    /* Первая кнопка (Синий градиент) */
    .mzk-btn-primary {
        height: 52px !important;                  /* Высота из Figma */
        background: linear-gradient(180deg, #2F4D92 0%, #2D4B8F 10%, #2C488B 20%, #2A4688 30%, #284384 40%, #264181 50%, #253E7D 60%, #233C7A 70%, #213A77 80%, #203773 90%, #1E3570 100%) !important;
        color: #ffffff !important;
        box-shadow: 0px 10px 15px 0px rgba(47, 77, 146, 0.3) !important; /* Тень из Figma */
        border: none !important;
    }

    /* Вторая кнопка (Белая с рамкой) */
    .mzk-btn-outline {
        height: 56px !important;                  /* Высота из Figma */
        background: #ffffff !important;
        color: #101828 !important;                /* Цвет текста из Figma */
        border: 2px solid rgba(229, 231, 235, 1) !important; /* Светлая рамка */
    }

    /* Ховер-эффекты для мобилки (аккуратное нажатие) */
    .mzk-btn-primary:active { opacity: 0.9; }
    .mzk-btn-outline:active { background: #f9fafb; }
    /* 7. Галерея (Фикс пустого места внизу) */
    .mzk-hero-gallery {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        /* УБИРАЕМ ПУСТУЮ ДЫРУ: жестко задаем только одну строку */
        grid-template-rows: 176px !important; 
        gap: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin-bottom: 0 !important;
    }

    .mzk-hg-item {
        width: 100% !important;
        height: 176px !important;
        border-radius: 16px !important;
    }

    /* Прячем 3 и 4 фото */
    .mzk-hg-item:nth-child(n+3) {
        display: none !important;
    }
    /* ==========================================================================
       ГЛОБАЛЬНІ МОБІЛЬНІ СТИЛІ (ДЛЯ ВСІХ СЕКЦІЙ)
       ========================================================================== */
    
    /* Глобальний бейдж */
    .mzk-badge-light {
        height: 36px !important;
        padding: 0 16px !important;
        font-size: 14px !important;
        line-height: 20px !important;
        border-radius: 50px !important; /* Фікс числа 33554400px */
        margin-bottom: 16px !important;
    }

    /* Глобальний заголовок секцій (H2) */
    .mzk-section-title {
        font-size: 35px !important;
        line-height: 45px !important;
        letter-spacing: -1px !important;
        margin-bottom: 16px !important;
    }

    /* Глобальний підзаголовок секцій */
    .mzk-section-subtitle {
        font-size: 16px !important;
        line-height: 24px !important;
        padding-bottom:25px !important;
        margin-bottom: 0 !important; 
    }

    /* Відступ від заголовків до контенту секції (сітки) */
    .mzk-section-header {
        margin-bottom: 32px !important; 
    }

    /* ==========================================================================
       МОБІЛЬНА ВЕРСІЯ: ЕКРАН 2 (ДОСЯГНЕННЯ)
       ========================================================================== */
    .mzk-achievements {
        padding: 40px 20px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Сітка карток (Виводить рівно по 2 в ряд) */
    .mzk-achieve-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important; /* Вирахувано з макета: (338 загальна - 161*2 картки) */
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Сама картка досягнення */
    .mzk-achieve-card {
        width: 100% !important;
        height: 145px !important;
        min-height: auto !important; /* Скидаємо десктопний розмір */
        padding: 20px !important;
        border-radius: 16px !important;
        border-width: 1px !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 4px !important;
    }

    /* Цифра */
    .mzk-achieve-card .ach-num {
        font-size: 40px !important;
        line-height: 40px !important;
        margin-bottom: 4px !important;
    }

    /* Заголовок картки */
    .mzk-achieve-card .ach-title {
        font-size: 14px !important;
        line-height: 17.5px !important;
    }

    /* Текст під ним (підзаголовок) */
    .mzk-achieve-card .ach-sub {
        font-size: 12px !important;
        line-height: 16px !important;
        margin-top: 2px !important;
    }
    /* ==========================================================================
       МОБІЛЬНА ВЕРСІЯ: ЕКРАН 3 (ПРОЄКТИ / ІНВЕСТИЦІЇ)
       ========================================================================== */
    .mzk-investments {
        padding: 40px 20px !important; /* Відступи секції */
    }

    /* Сітка карток: виводимо по одному проєкту в ряд */
    .mzk-projects-grid-2 {
        grid-template-columns: 1fr !important; 
        gap: 24px !important;
    }

    /* Картка проєкту */
    .mzk-project-card {
        border-radius: 24px !important;
        box-shadow: 0px 20px 40px 0px rgba(0, 0, 0, 0.06) !important;
    }

    /* Трохи зменшуємо відступи всередині інфо-блоку для мобілки */
    .mzk-pc-info {
        padding: 24px !important; 
    }

    /* Заголовок проєкту */
    .mzk-pc-title {
        font-size: 22px !important;
        line-height: 33px !important;
        margin-bottom: 8px !important;
    }

    /* Текст нижче (Адреса, дата) */
    .mzk-pc-loc, .mzk-pc-date {
        font-size: 14px !important;
        line-height: 20px !important;
        margin-bottom: 8px !important;
    }

    .mzk-pc-loc svg, .mzk-pc-date svg {
        width: 16px !important;
        height: 16px !important; /* Іконки пропорційно зменшуємо під текст */
    }

    /* Посилання (Детальніше) */
    .mzk-pc-link {
      font-size: 14px !important;
        line-height: 20px !important;
        margin-top: 16px !important;
        display: block !important; /* Робимо блоком, щоб спрацювало центрування */
        text-align: center !important;
        width: 100% !important;
    }

    /* Блок прогрес-бара */
    .mzk-pc-progress-box {
        padding: 12px 16px !important;
        border-radius: 16px !important;
        width: 192px !important;
        min-width: unset !important; /* Знімаємо десктопне обмеження */
        bottom: 16px !important;
        left: 16px !important;
    }

    .mzk-pc-prog-top .prog-label, 
    .mzk-pc-prog-top .prog-val {
        font-size: 12px !important;
        line-height: 16px !important;
    }

    /* Плашка статусу (темна/помаранчева) */
    .mzk-pc-status-dark, .mzk-pc-status-orange {
        height: 32px !important;
        border-radius: 50px !important; /* 33554400px з Figma */
        font-size: 12px !important;
        line-height: 16px !important;
        padding: 0 16px !important; 
        display: inline-flex !important;
        align-items: center !important;
        box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
    }

  /* ==========================================================================
       ГЛОБАЛЬНИЙ ЗАХИСТ ВІД ГОРИЗОНТАЛЬНОГО СКРОЛУ
       ========================================================================== */
    /* Відключаємо десктопний хак розтягування на мобілці */
    .site-main.home-page {
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow-x: hidden !important;
    }

    /* Гумові картки: забороняємо їм бути ширшими за екран */
    .mzk-project-card,
    .mzk-projects-grid-2,
    .mzk-projects-grid-3 {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important; 
        box-sizing: border-box !important;
    }


    /* ==========================================================================
       ФІКС СИНЬОГО БАНЕРА (2 РЯДКИ ЧЕРЕЗ FLEX)
       ========================================================================== */
    .mzk-blue-banner {
        padding: 40px 20px !important; 
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Робимо контейнер гнучким рядком */
    .mzk-blue-banner-content {
        display: flex !important;
        flex-wrap: wrap !important; /* Дозволяємо переноситися */
        justify-content: center !important; /* Центруємо всі "шматочки" тексту */
        column-gap: 8px !important; /* Пробіл між абзацами, які стануть в один ряд */
        
        width: 100% !important;
        max-width: 330px !important; /* Ідеальна ширина для 2 рядків */
        margin: 0 auto !important;
    }

    /* Кожен абзац тепер — просто слово або фраза, які стають пліч-о-пліч */
    .mzk-blue-banner-content p,
    .mzk-blue-banner-content h2,
    .mzk-blue-banner-content span {
        display: block !important; 
        width: auto !important; /* Ширина по контенту, а не на весь екран */
        font-size: 26px !important;
        line-height: 34px !important;
        letter-spacing: -0.5px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Вбиваємо жорсткі переноси (Shift+Enter) з адмінки */
    .mzk-blue-banner-content br {
        display: none !important; 
    }
    /* ==========================================================================
       МОБІЛЬНА ВЕРСІЯ: ЕКРАН 4 (РЕАЛІЗОВАНІ ПРОЄКТИ / СЛАЙДЕР)
       ========================================================================== */
    
    /* 1. Налаштування секції */
    .mzk-realized {
        /* Прибираємо бокові відступи, щоб скрол йшов від краю до краю екрана */
        padding: 40px 0 !important; 
        width: 100% !important;
        overflow: hidden !important;
    }

    /* Повертаємо бокові відступи тільки для заголовків */
    .mzk-realized .mzk-section-header {
        padding: 0 20px !important; 
        margin-bottom: 24px !important;
    }

    /* 2. Контейнер слайдера (Магія горизонтального скролу) */
    .mzk-projects-grid-3 {
        display: flex !important;
        flex-wrap: nowrap !important; /* Забороняємо перенос на нові рядки */
        overflow-x: auto !important; /* Вмикаємо горизонтальний скрол */
        -webkit-overflow-scrolling: touch !important; /* Плавний скрол як в iOS */
        gap: 16px !important;
        
        /* Відступи всередині скролу, щоб перша картка стояла рівно, а тінь не обрізалася знизу */
        padding: 0 20px 40px 20px !important; 
        
        /* Ховаємо системну смугу прокрутки для естетики */
        scrollbar-width: none; 
    }
    
    .mzk-projects-grid-3::-webkit-scrollbar {
        display: none; /* Ховаємо смугу в Chrome/Safari */
    }

    /* 3. Сама картка проєкту */
    .mzk-realized .mzk-project-card {
        flex: 0 0 256px !important; /* Забороняємо звужуватися, жорсткі 256px */
        height: 309px !important;
        border-radius: 16px !important;
        border: 1px solid rgba(243, 244, 246, 1) !important;
        box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Адаптуємо висоту картинки, щоб вписатися в загальні 309px картки */
    .mzk-realized .mzk-pc-image {
        height: 150px !important; 
    }

    .mzk-realized .mzk-pc-info {
        padding: 16px !important; /* Зменшені внутрішні відступи */
        flex-grow: 1 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* 4. Тексти всередині картки */
    .mzk-realized .mzk-pc-title {
        font-size: 16px !important;
        line-height: 24px !important;
        margin-bottom: 8px !important;
    }

    .mzk-realized .mzk-pc-date {
        font-size: 12px !important;
        line-height: 16px !important;
        margin-bottom: 0 !important;
    }
    
    .mzk-realized .mzk-pc-date svg {
        width: 14px !important;
        height: 14px !important;
    }

    /* 5. Посилання (по центру внизу) */
    .mzk-realized .mzk-pc-link {
        font-size: 14px !important;
        line-height: 20px !important;
        text-align: center !important;
        margin-top: auto !important; /* Автоматично притискає посилання до самого низу картки */
        display: block !important;
        width: 100% !important;
    }
    /* ==========================================================================
       ЭКРАН 6 (TELEGRAM) - ЖЕЛЕЗОБЕТОННЫЙ МЕТОД (ABSOLUTE)
       ========================================================================== */

    /* 1. Центрируем весь блок со списком на экране */
    body .mzk-telegram .mzk-tg-grid {
        display: block !important;
        width: 100% !important;
        max-width: 338px !important;
        margin: 0 auto !important; /* Ставит весь список по центру телефона */
        padding: 32px 0 0 0 !important;
    }

    /* 2. Контейнер пункта (даем отступ слева под иконку 52px + 16px gap = 68px) */
    body .mzk-telegram .mzk-tg-feature {
        display: block !important;
        position: relative !important; /* Включаем якорь для иконки */
        padding-left: 68px !important; /* Место для иконки слева */
        margin-bottom: 24px !important;
        min-height: 52px !important; /* Чтобы блок не был меньше иконки */
        text-align: left !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 3. Иконка (вырываем из потока и вешаем слева) */
    body .mzk-telegram .mzk-tg-icon {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 52px !important;
        height: 52px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* 4. Заголовок и Текст (теперь им ничто не мешает растянуться) */
    body .mzk-telegram h4.mzk-tg-ft-title {
        display: block !important;
        width: 100% !important;
        text-align: left !important; 
        margin: 0 0 4px 0 !important; /* Отступ вниз до текста */
    }

    body .mzk-telegram p.mzk-tg-ft-text {
        display: block !important;
        width: 100% !important;
        text-align: left !important; 
        margin: 0 !important;
    }

    /* 5. Кнопка Telegram (исправленный радиус 16px и центрирование) */
    body .mzk-telegram a.mzk-btn-tg {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        
        width: 100% !important;
        max-width: 338px !important;
        height: 56px !important;
        
        border-radius: 16px !important; /* Углы 16px */
        
        margin: 32px auto 0 auto !important; /* Центрируем кнопку */
        padding: 0 !important;
    }
    /* ==========================================================================
       МОБІЛЬНА ВЕРСІЯ: ЕКРАН 7 (НОВИНИ / СЛАЙДЕР)
       ========================================================================== */

    /* 1. Налаштування секції */
    .mzk-news {
        padding: 40px 0 !important; /* Край-в-край для скролу */
        width: 100% !important;
        overflow: hidden !important;
    }

    .mzk-news .mzk-section-header {
     
        margin-bottom: 24px !important;
    }

    /* 2. Горизонтальний скрол */
    .mzk-news-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 16px !important;
        padding: 0 0 40px 0 !important; /* Відступи для скролу */
        scrollbar-width: none;
    }
    
    .mzk-news-grid::-webkit-scrollbar { display: none; }

    /* 3. Картка новини */
    .mzk-news-card {
        flex: 0 0 288px !important; /* Фіксована ширина з макета */
        height: 359px !important;
        border-radius: 16px !important;
        border: 1px solid rgba(243, 244, 246, 1) !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    /* Інфо-блок всередині картки */
    .mzk-news-info {
        padding: 16px !important;
        flex-grow: 1 !important;
    }

    /* Тексти */
    .mzk-news-date { font-size: 12px !important; line-height: 16px !important; margin-bottom: 8px !important; }
    .mzk-news-title { font-size: 14px !important; line-height: 17.5px !important; margin-bottom: 8px !important; }
    .mzk-news-text { font-size: 12px !important; line-height: 19.5px !important; margin-bottom: 16px !important; }

    .mzk-news-link {
        font-size: 12px !important;
        text-align: center !important;
        margin-top: auto !important;
        display: block !important;
    }


    /* 2. Кнопка: примусово включаємо рамку */
    .mzk-bottom-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        
        width: 338px !important;
        max-width: 100% !important;
        height: 72px !important;
        
        /* Бронебійна рамка */
        border: 2px solid rgba(16, 24, 40, 1) !important; 
        outline: none !important; /* Прибираємо можливе перекриття рамки */
        2px solid rgba(16, 24, 40, 1) !important
        border-radius: 16px !important; 
        margin: 24px auto 0 auto !important;
        
        font-family: 'Segoe UI', sans-serif !important;
        font-size: 14px !important;
        color: rgba(16, 24, 40, 1) !important;
        background: transparent !important; /* Обов'язково прозорий фон */
        box-sizing: border-box !important;
    }
.mzk-adv-grid
 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 24px;
}
/* 1. Повна сітка для картки */
.mzk-advantages .mzk-adv-card {
    display: grid !important;
    grid-template-columns: 48px 1fr !important; 
    column-gap: 16px !important;
    
    width: 338px !important;
    max-width: 100% !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    margin: 0 auto 16px auto !important;
    border: 1px solid rgba(243, 244, 246, 1) !important;
    border-radius: 16px !important;
}

/* 2. Іконка */
.mzk-adv-icon {
    grid-column: 1 !important;
    width: 48px !important;
    height: 48px !important;
}
/* 1. Заголовок: додаємо негативний відступ знизу, щоб притягнути текст */
.mzk-adv-title {
    grid-column: 2 !important;
    margin: 0 0 -8px 0 !important; /* Мінус 8 пікселів "втягнуть" текст під заголовок */
    text-align: left !important;
    font-size: 16px !important;
    line-height: 24px !important;
    padding: 0 !important;
}

/* 2. Текст: прибираємо будь-які верхні відступи */
.mzk-adv-text {
    grid-column: 2 !important;
    margin-top: -40px !important;
    padding-top: 15px !important;
    text-align: left !important;
    font-size: 14px !important;
    line-height: 22.75px !important;
}
/* 1. Контейнер форми */
.mzk-contact-form {
    width: 338px !important;
    max-width: 100% !important;
    padding: 32px 0 !important;
    margin: 0 auto !important;
    background: transparent !important;
}

.mzk-form-inner {
    width: 338px !important;
    max-width: 100% !important;
    padding: 20px !important;
    background: rgba(255, 255, 255, 1) !important;
    border: 1px solid rgba(243, 244, 246, 1) !important;
    border-radius: 24px !important;
    box-shadow: 0px 20px 40px 0px rgba(0, 0, 0, 0.08) !important;
    box-sizing: border-box !important;
}

/* 2. Поля (лейбл + інпут) */
.mzk-form-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important; /* Відстань між лейблом та інпутом */
    margin-bottom: 20px !important; /* Gap 20px між полями */
}

.mzk-form-field label {
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 14px !important;
    color: #101828 !important;
}

/* 3. Інпути та Текстареа */
.mzk-form-field input, 
.mzk-form-field textarea {
    width: 100% !important;
    padding: 14px 16px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(229, 231, 235, 1) !important;
    background: rgba(243, 243, 245, 1) !important;
    box-sizing: border-box !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 14px !important;
}

.mzk-form-field textarea { height: 90px !important; }

/* 4. Кнопка */
.mzk-form-btn {
    width: 100% !important;
    height: 52px !important;
    border-radius: 50px !important; /* Замість 33554400px */
    background: #101828 !important; /* Припускаю колір, зміни, якщо треба */
    color: #ffffff !important;
    font-size: 14px !important;
    text-align: center !important;
    border: none !important;
    box-shadow: 0px 10px 15px 0px rgba(47, 77, 146, 0.3) !important;
}

/* 5. Текст під кнопкою */
.mzk-form-footer-text {
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 12px !important;
    line-height: 19.5px !important;
    text-align: center !important;
    margin-top: 16px !important;
    color: #4A5565 !important;
}
.mzk-contacts-form-wrap {padding: 29px 39px 22px 29px !important;}
/* ==========================================================================
   ЗАГОЛОВОК ФОРМИ ТА КОНТАКТНІ БЛОКИ
   ========================================================================== */

/* 1. Заголовок перед формою */
.mzk-form-header {
    width: 338px !important;
    max-width: 100% !important;
    margin: 0 auto 24px auto !important;
    text-align: center !important;
}

.mzk-form-title {
    font-family: 'Segoe UI', sans-serif !important;
    font-weight: 700 !important;
    font-size: 28px !important;
    line-height: 35px !important;
    letter-spacing: -0.5px !important;
    margin-bottom: 8px !important;
}

.mzk-form-desc {
    font-family: 'Segoe UI', sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 22.75px !important;
    color: #4A5565 !important;
}

/* 2. Контактні блоки (Адреса, телефон і т.д.) */
.mzk-contact-item {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
    width: 338px !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Іконка контактів */
.mzk-contact-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

/* Текстова частина контактного блоку */
.mzk-contact-text-wrapper {
    display: flex !important;
    flex-direction: column !important;
}

.mzk-contact-label {
    font-family: 'Segoe UI', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    margin-bottom: 2px !important;
}

.mzk-contact-value {
    font-family: 'Segoe UI', sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: #4A5565 !important;
}
.mzk-contacts {
    background: linear-gradient(135deg, #F9FAFB 0%, #FFFFFF 50%, rgba(239, 246, 255, 0.3) 100%) !important;
    padding: 80px 0 !important;
    width: 100% !important;
    overflow: hidden !important;
}

}
/* ==========================================================================
   ФУТЕР: ФІНАЛЬНЕ ВИРІВНЮВАННЯ ТА СТРУКТУРА
   ========================================================================== */

@media (max-width: 768px) {
    
    /* 1. Контейнер: дозволяємо переносити колонки на новий рядок */
    .mzk-footer-container {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        gap: 24px !important;
    }

    /* 2. Колонки: перші дві робимо шириною ~45% (щоб були в ряд) */
    .mzk-footer-col {
        flex: 0 0 calc(50% - 12px) !important;
        align-items: flex-start !important;
        text-align: left !important;
    }

    /* 3. Третя колонка (Документи): займає 100% ширини, щоб бути окремо */
    .mzk-footer-col:nth-child(4) {
        flex: 0 0 100% !important;
        margin-top: 16px !important;
    }

    /* 4. Заголовки та посилання (Примусово лівий край) */
    .mzk-footer-title, .mzk-footer-menu {
        text-align: left !important;
        align-items: flex-start !important;
    }

    /* 5. Розділювальна лінія перед копірайтом */
    .mzk-footer-container::after {
        content: "" !important;
        display: block !important;
        width: 100% !important;
        height: 1px !important;
        background: rgba(30, 41, 57, 1) !important;
        margin-top: 24px !important;
    }

    /* 6. Копірайт: по центру */
    .mzk-site-footer > div:last-child, 
    .mzk-footer-copyright {
        text-align: center !important;
        border-top: 1px solid rgba(30, 41, 57, 1);
        width: 100% !important;
        padding-top: 24px !important;
    }
}

@media(max-width: 768px) {
    /* --- 1. СЕКЦІЯ HERO (ПРО КОМПАНІЮ) --- */
    .mzk-about-hero-section {
        padding: 32px 0 !important;
        background: linear-gradient(148deg, #DBEAFE 7.21%, #EFF6FF 50%, #FFFFFF 92.79%) !important;
    }
    
    .mzk-about-hero-section .mzk-comp-grid { 
        display: flex !important;
        flex-direction: column !important;
        padding: 0 20px !important;
        gap: 0 !important;
    }

    /* Рятувальний круг: розчиняємо обгортку тексту, щоб витягнути з неї елементи */
    .mzk-comp-text { display: contents !important; }

    /* Вбиваємо стару плашку "10+ років" на фото */
    .mzk-comp-img-badge { display: none !important; }

    /* БУДУЄМО ПРАВИЛЬНИЙ ПОРЯДОК (ORDER) */
    .mzk-comp-text .mzk-badge { order: 1 !important; margin: 20px auto 16px 0 !important; }
    
    .mzk-comp-text .mzk-section-title { 
        order: 2 !important; 
        font-size: 36px !important; 
        line-height: 41.4px !important; 
        letter-spacing: -0.8px !important; 
        margin: 0 0 16px 0 !important; 
    }
    
    .mzk-comp-text .mzk-section-subtitle { 
        order: 3 !important; 
        font-size: 16px !important; 
        line-height: 26px !important; 
        margin: 0 0 32px 0 !important; 
    }
    
    /* Фотографія стає 4-ю */
    .mzk-comp-image-wrap { 
        order: 4 !important; 
        width: 100% !important; 
        max-width: 338px !important; 
        height: 256px !important; 
        margin: 0 auto 32px auto !important; 
        border-radius: 24px !important;
        box-shadow: 0px 20px 40px 0px rgba(0, 0, 0, 0.15) !important; 
        position: static !important; 
    }
    .mzk-comp-image-wrap img { height: 100% !important; border-radius: 24px !important; }

    /* Акордеон стає 5-м */
    .mzk-accordions { 
        order: 5 !important; 
        width: 100% !important; 
        max-width: 338px !important; 
        margin: 0 auto !important; 
        background: #ffffff !important; 
        border-radius: 24px !important; 
        overflow: hidden !important; 
        gap: 0 !important; 
    }
    
    .mzk-acc-item { 
        margin: 0 !important; 
        border-radius: 0 !important; 
        border-bottom: 1px solid rgba(229, 231, 235, 1) !important; 
        border-top: none !important; 
        border-left: none !important; 
        border-right: none !important; 
    }
    .mzk-acc-item:last-child { border-bottom: none !important; }
    .mzk-acc-header { height: 64px !important; padding: 0 20px !important; }

    /* --- СТАРІ СТИЛІ З ТВОГО ФАЙЛУ (щоб не зламати інше) --- */
    .mzk-us-container { padding: 0 20px; }
    .mzk-us-images { width: 100%; height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    .mzk-us-images img { position: static; width: 100%; height: auto; aspect-ratio: 1; }
    .mzk-us-text h2 { font-size: 42px; line-height: 48px; }
    .mzk-about-us-section { padding: 80px 0; }
    /* --- 2. СЕКЦІЯ ПРО НАС (ОНОВЛЕНО ЗА FIGMA) --- */
    .mzk-about-us-section {
        padding: 40px 0 !important;
    }
    
    .mzk-us-top {
        display: flex !important;
        flex-direction: column !important;
        margin-bottom: 40px !important;
        gap: 0 !important;
    }

    /* Заголовок і текст */
    .mzk-us-text h2 {
        font-size: 36px !important;
        line-height: 45px !important;
        letter-spacing: -0.8px !important;
        margin: 0 0 16px 0 !important;
        text-align: left !important;
    }

    .mzk-us-text p {
        font-size: 16px !important;
        line-height: 26px !important;
        margin: 0 !important;
        text-align: left !important;
    }

    /* Блок з фото: ставимо поруч зі зміщенням */
    .mzk-us-images {
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        width: 100% !important;
        max-width: 338px !important;
        margin: 28px auto 0 auto !important; /* Відступ зверху 28px */
        gap: 12px !important;
        height: auto !important;
    }

    /* Перше фото (ліве) */
    .mzk-us-images img:nth-child(1) {
        position: static !important;
        width: calc(50% - 6px) !important; /* Рівно 163px з урахуванням gap */
        height: 176px !important;
        border-radius: 16px !important;
        box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1) !important;
        margin: 0 !important;
    }

    /* Друге фото (праве) зі зміщенням вниз */
    .mzk-us-images img:nth-child(2) {
        position: static !important;
        width: calc(50% - 6px) !important; /* Рівно 163px */
        height: 200px !important;
        border-radius: 16px !important;
        box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1) !important;
        margin-top: 24px !important; /* Зміщуємо вниз на 24px */
    }

    /* Блоки з цифрами (Grid 2 в ряд) */
    .mzk-us-stats {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 16px !important; /* Відстань між картками (338 - 161*2 = 16px) */
        width: 100% !important;
        max-width: 338px !important;
        margin: 0 auto !important;
    }

 /* Окрема картка з цифрою */
    .mzk-stat-item {
        background: rgba(255, 255, 255, 1) !important;
        border: 1px solid rgba(243, 244, 246, 1) !important;
        border-radius: 16px !important;
        /* ОСЬ ТУТ: залишаємо 16px зверху/знизу, але боки робимо 8px */
        padding: 16px 8px !important; 
        height: 150px !important;
        box-sizing: border-box !important;
        box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px -1px rgba(0, 0, 0, 0.1) !important;
        
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        
        /* ОСЬ ТУТ: зменшуємо шрифт на 1px і трішки стискаємо відстань між буквами */
        font-size: 11px !important; 
        line-height: 15px !important;
        letter-spacing: -0.2px !important;
        color: rgba(74, 85, 101, 1) !important; 
    }

    /* Сама велика цифра */
    .mzk-stat-item strong {
        font-size: 28px !important;
        line-height: 42px !important;
        margin-bottom: 8px !important;
        letter-spacing: 0px !important; /* Повертаємо нормальну відстань цифрам */
        color: #101828 !important; 
    }
    
    .highlight {
        background: none !important;
        padding: 0 !important; /* Вбиваємо приховані відступи, які розсували слова */
    }
    /* --- 3. СЕКЦІЯ ІСТОРІЯ (Таймлайн) --- */
    
    /* Шапка секції */
    .mzk-history-header {
        margin-bottom: 24px !important;
    }
    .mzk-history-header .mzk-section-title {
        font-size: 36px !important;
        line-height: 45px !important;
        letter-spacing: -0.8px !important;
        margin-bottom: 16px !important;
    }
    .mzk-history-header .mzk-section-subtitle {
        font-size: 16px !important;
        line-height: 26px !important;
        width: 100% !important;
    }

    /* Навігація по роках (скрол) */
    .mzk-history-nav {
        display: flex !important;
        gap: 12px !important;
        margin-bottom: 24px !important;
        padding-bottom: 8px !important; /* Місце, щоб тінь/скрол не обрізались */
    }
    
    /* Кнопка року */
    .mzk-hist-tab {
        flex: 0 0 auto !important; /* Забороняємо кнопкам сплющуватися */
        font-size: 14px !important;
        line-height: 20px !important;
        font-weight: 700 !important;
        padding: 8px 16px !important;
        border-radius: 50px !important;
        background: rgba(255, 255, 255, 1) !important;
        border: 1px solid rgba(243, 244, 246, 1) !important;
        color:  rgba(209, 213, 220, 1) !important;
        margin: 0 !important; /* Вбиваємо зсув вверх з ПК-версії */
    }
    
    /* Активний рік */
    .mzk-hist-tab.active {
        background: rgba(47, 77, 146, 1) !important;
        color: #ffffff !important;
        border-color: rgba(47, 77, 146, 1) !important;
        
    }

    /* Слайд з контентом: Міняємо місцями фото і текст */
    .mzk-hist-slide.active {
        display: flex !important;
        box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.1);
 border-radius: 24px !important;
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
background: rgba(255, 255, 255, 1);

        flex-direction: column !important;
        gap: 20px !important; /* Відстань між фото і текстом */
    }
    
/* Контейнер фотографії */
    .mzk-hist-slide-img {
        order: 1 !important;
        width: 100% !important;
        max-width: 338px !important;
        margin: 0 auto !important;
        /* Вбиваємо тінь, якщо вона була на батьку (на всяк випадок, як в іншій секції) */
        box-shadow: none !important;
    }

    /* Сама фотографія */
    .mzk-hist-slide-img img {
        width: 100% !important;
        height: 192px !important;
        /* Тільки верхні кути заокруглені: top-left top-right bottom-right bottom-left */
        border-radius: 24px 24px 0 0 !important;
        object-fit: cover !important;
        /* На всяк випадок вбиваємо тінь і тут */
        box-shadow: none !important;
    }
    
    /* Текстовий блок під фото (йде другим) */
    .mzk-hist-slide-text {
        order: 2 !important;
        width: 100% !important;
        max-width: 338px !important;
        margin: 0 auto !important;
    }
    
    /* Величезний рік (наприклад, 2015) */
    .mzk-hist-slide-text h3 {
        font-size: 64px !important;
        line-height: 64px !important;
       padding-left: 20px;
        padding-right: 20px;
        margin: 0 0 16px 0 !important;
        color: rgba(47, 77, 146, 1) !important;
    }
    
    /* Опис року */
    .mzk-hist-slide-text p {
        font-size: 16px !important;
          padding-left: 20px;
          padding-bottom:20px ;
              padding-right: 20px;
        line-height: 26px !important;
        color: rgba(74, 85, 101, 1) !important;
        margin: 0 !important;
    }
    /* --- 4. СЕКЦІЯ ЦИТАТА (ОНОВЛЕНО ЛАПКИ) --- */
    .mzk-quote-section {
        padding: 40px 0 !important;
    }

    /* Ламаємо десктопний Grid і робимо стовпчик */
    .mzk-quote-grid {
        display: flex !important;
        flex-direction: column !important;
        padding: 0 20px !important;
        gap: 32px !important; /* Відстань між фото і текстом */
    }

    /* 1. Фотографія (зверху) */
    .mzk-quote-photo {
        order: 1 !important;
        width: 100% !important;
        max-width: 338px !important;
        margin: 0 auto !important;
    }
    .mzk-quote-photo img {
        width: 100% !important;
        height: 288px !important;
        border-radius: 16px !important;
        box-shadow: 0px 25px 50px 0px rgba(0, 0, 0, 0.25) !important;
        object-fit: cover !important;
        display: block !important;
        margin: 0 !important;
    }

    /* 2. Блок з текстом (знизу) */
    .mzk-quote-block {
        order: 2 !important;
        height: auto !important; /* Вбиваємо десктопні 612px */
        width: 100% !important;
        max-width: 338px !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        /* Зробимо його relative для абсолютного позиціонування лапок */
        position: relative !important;
    }

    /* Текст цитати: додаємо відступ зверху для лапки */
    .mzk-quote-text {
        font-size: 20px !important;
        line-height: 32.5px !important;
        /* ОСЬ ТУТ: даємо 40px місця зверху для верхньої лапки */
        margin: 40px 0 24px 0 !important; 
    }

    /* Ім'я автора */
    .mzk-quote-author h4 {
        font-size: 18px !important;
        line-height: 28px !important;
        margin: 0 0 4px 0 !important;
    }

    /* Посада автора */
    .mzk-quote-author p {
        font-size: 14px !important;
        line-height: 20px !important;
        margin: 0 !important;
    }

    /* --- ЛАПКИ ДЛЯ МОБІЛЬНОГО --- */
    .mzk-quote-mark {
        font-family: 'Segoe UI', sans-serif !important;
        font-weight: 700 !important;
        font-size: 64px !important; /* Зменшений розмір для мобільного */
        line-height: 64px !important;
        color: rgba(255, 255, 255, 0.2) !important;
        position: absolute !important;
    }

    /* ЗАЛИШАЄМО ВЕРХНЮ ЛАПКУ І СТАВИМО ЇЇ ЗВЕРХУ */
    .mzk-quote-mark-top {
        top: 0 !important;
        left: 0 !important;
        display: block !important; /* Гарантуємо видимість */
    }

    /* ПРИХОВУЄМО НИЖНЮ ЛАПКУ */
    .mzk-quote-mark-bottom {
        display: none !important;
    }
    /* --- 5. СЕКЦІЯ КОМАНДА --- */
    .mzk-team-section {
        padding: 40px 0 !important; /* Відступи зверху та знизу */
    }

    /* Шапка: Заголовок та фільтр (випадаючий список) */
    .mzk-team-header {
        display: flex !important;
        flex-direction: column !important; /* Ставимо фільтр під заголовок */
        align-items: flex-start !important;
        gap: 16px !important;
        margin-bottom: 24px !important;
    }

    .mzk-team-section .mzk-section-title {
        font-size: 32px !important;
        line-height: 40px !important;
        letter-spacing: -0.8px !important;
        margin: 0 !important;
    }

    /* Випадаючий список (Select) */
    #mzk-team-filter-select {
        width: auto !important;
        min-width: 115px !important; /* Розмір з Figma */
        height: auto !important;
        font-size: 14px !important;
        line-height: 20px !important;
        padding: 6px 32px 6px 12px !important; /* Залишаємо місце для галочки */
        border-radius: 8px !important;
    }

    /* Обгортка слайдера */
    .mzk-team-slider-wrap {
        padding: 0 !important; /* Вбиваємо десктопні відступи */
        /* Дозволяємо карткам "виїжджати" за краї екрана при скролі */
        margin-left: -20px !important; 
        margin-right: -20px !important;
    }

    /* Ховаємо стрілки навігації (на мобільному свайпають) */
    .mzk-team-slider-wrap .mzk-nav-btn {
        display: none !important;
    }

    /* Сам слайдер (горизонтальний скрол) */
    .mzk-team-slider {
        display: flex !important;
        gap: 16px !important;
        padding: 0 20px !important; /* Щоб перша картка стояла рівно по сітці */
        overflow-x: auto !important;
        scroll-behavior: smooth !important;
        /* Ховаємо системний скролбар */
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    .mzk-team-slider::-webkit-scrollbar {
        display: none !important;
    }

    /* Окрема картка (240px — це якраз 1.5 блока на екрані) */
    .mzk-team-card {
        width: 240px !important;
        flex: 0 0 240px !important; /* Жорстко фіксуємо ширину, забороняємо стискатися */
    }

    /* Фотографія співробітника */
    .mzk-team-card img {
        width: 240px !important;
        height: 288px !important;
        border-radius: 16px !important;
        box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1) !important;
        object-fit: cover !important;
        margin-bottom: 16px !important;
    }

    /* Ім'я */
    .mzk-team-card h4 {
        font-size: 16px !important;
        line-height: 24px !important;
        margin: 0 0 4px 0 !important;
    }

    /* Посада */
    .mzk-team-card .pos {
        font-size: 14px !important;
        line-height: 19.25px !important;
        margin: 0 !important;
    }
    /* --- СТИЛІЗАЦІЯ ВИПАДАЮЧОГО СПИСКУ (ФІЛЬТР КОМАНДИ) --- */
    
    /* Сама кнопка селекта */
    #mzk-team-filter-select {
        width: auto !important;
        min-width: 140px !important; /* Робимо трохи ширшим, щоб текст не прилипав */
        height: 40px !important;
        padding: 8px 36px 8px 16px !important; /* Місце для тексту і стрілочки */
        
        font-family: 'Segoe UI', sans-serif !important;
        font-size: 14px !important;
        font-weight: 500 !important; /* Трохи жирніший для читабельності */
        color: rgba(74, 85, 101, 1) !important;
        
        background-color: #F3F4F6 !important; /* Приємний світло-сірий фон */
        border: 1px solid #E5E7EB !important; /* Ледь помітна обводка */
        border-radius: 8px !important; /* Акуратні кути */
        
        /* Вбиваємо стандартну страшну стрілку браузера */
        appearance: none !important; 
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        
        /* Малюємо свою красиву мінімалістичну стрілочку через SVG */
        background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 16px center !important;
        background-size: 12px !important;
        
        cursor: pointer !important;
        outline: none !important;
        transition: all 0.2s ease !important;
    }

    /* Ефект при натисканні (фокус) */
    #mzk-team-filter-select:focus {
        border-color: #2F4D92 !important; /* Фірмовий синій колір Materik */
        background-color: #ffffff !important; /* Висвітлюємо фон */
        box-shadow: 0 0 0 3px rgba(47, 77, 146, 0.1) !important; /* Легке синє світіння */
    }

    /* Стилізація самих пунктів (працює на ПК та частково на Android) */
    #mzk-team-filter-select option {
        font-weight: 400 !important;
        color:  rgba(74, 85, 101, 1)
 !important;
        background-color: #ffffff !important;
        padding: 12px !important;
        font-size: 12px !important;
    }
    /* --- 7. СЕКЦІЯ СОЦМЕРЕЖІ --- */
    .mzk-soc-section {
        padding: 48px 0 !important; /* Відступи зверху і знизу по 48px */
    }

    .mzk-soc-wrapper {
        width: 100% !important;
        max-width: 378px !important;
        padding: 0 20px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    /* Заголовок у три рядки */
    .mzk-soc-title {
        font-size: 26px !important;
        line-height: 32.5px !important;
        font-weight: 700 !important;
        text-align: center !important;
        margin: 0 0 32px 0 !important; /* Відступ вниз до іконок */
        white-space: normal !important; /* Дозволяємо перенос на кілька рядків */
    }

    /* Контейнер для іконок */
    .mzk-soc-links {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 24px !important; /* Відстань між іконками (рівномірно) */
        width: 100% !important;
        max-width: 338px !important;
        height: 40px !important;
        margin: 0 auto !important;
    }

    /* Самі іконки (посилання) */
    .mzk-soc-links a {
        width: 40px !important;
        height: 40px !important;
        opacity: 0.9 !important; /* Прозорість з макета */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        transition: opacity 0.2s ease !important;
    }

    /* Прибираємо десктопний hover-ефект збільшення (на моб він глючить), 
       замість нього робимо іконку 100% непрозорою при тапі */
    .mzk-soc-links a:hover, 
    .mzk-soc-links a:active {
        transform: none !important;
        opacity: 1 !important; 
    }

    /* Змушуємо SVG-графіку всередині підлаштуватися під 40x40 */
    .mzk-soc-links a svg {
        width: 100% !important;
        height: 100% !important;
    }
    /* --- СТИЛІ СЕКЦІЙ ТА КАРТОК ЖК (Спільні для обох табів) --- */
    
    /* Секції: задаємо градієнт і відступи */
    .mzk-investments,
    .mzk-realized {
        padding: 24px 0 !important;
        background: linear-gradient(149deg, #EFF6FF 7.49%, #FFFFFF 50%, #EFF6FF 92.51%) !important;
    }

    /* Сітка: ЖК йдуть один за одним (стовпчиком) */
    .mzk-projects-grid-2,
    .mzk-projects-grid-3 {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important; /* Відстань між картками */
      
        margin: 0 !important;
    }

    /* Сама картка ЖК */
    .mzk-project-card {
        width: 100% !important;
        max-width: 338px !important;
        margin: 0 auto !important;
        border-radius: 24px !important;
        border-top: 1px solid rgba(243, 244, 246, 1) !important;
        box-shadow: 0px 20px 40px 0px rgba(0, 0, 0, 0.07) !important;
        
        display: flex !important;
        flex-direction: column !important;
        /* Висота підлаштується автоматично під 394px за рахунок контенту */
        height: auto !important; 
    }

    /* Обгортка картинки в картці (вираховуємо під 394px загальної висоти) */
    .mzk-pc-image {
        height: 230px !important; 
        width: 100% !important;
        border-radius: 24px 24px 0 0 !important;
        overflow: hidden !important;
    }

    /* Нижня частина з текстом */
    .mzk-pc-info {
        padding: 20px !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Заголовок ЖК */
    .mzk-pc-title {
        font-family: 'Segoe UI', sans-serif !important;
        font-weight: 700 !important;
        font-size: 20px !important;
        line-height: 28px !important;
        margin: 0 0 12px 0 !important;
        color: #101828 !important;
    }

    /* Текст нижче (Адреса, Дата здачі) */
    .mzk-pc-loc,
    .mzk-pc-date {
        font-family: 'Segoe UI', sans-serif !important;
        font-weight: 400 !important;
        font-size: 14px !important;
        line-height: 20px !important;
        color: rgba(74, 85, 101, 1) !important;
        margin: 0 0 8px 0 !important;
    }

    /* Зменшуємо іконки біля тексту, щоб було акуратніше */
    .mzk-pc-loc svg,
    .mzk-pc-date svg {
        width: 16px !important;
        height: 16px !important;
    }

    /* Посилання (Детальніше про проєкт) */
    .mzk-pc-link {
        display: block !important;
        font-family: 'Segoe UI', sans-serif !important;
        font-weight: 400 !important;
        font-size: 14px !important;
        line-height: 20px !important;
        text-align: center !important;
        margin-top: 16px !important;
        width: 100% !important;
    }
    /* --- СЕКЦІЯ НОВИНИ (Мобільна версія) --- */
    .mzk-news {
        padding: 32px 20px !important;
        background: #ffffff !important;
    }

    .mzk-news-header {
        margin-bottom: 24px !important;
    }

    /* Заголовок в дві строки */
    .mzk-news-header .mzk-section-title {
        font-size: 24px !important;
        line-height: 30px !important;
        letter-spacing: -0.5px !important;
        margin-bottom: 8px !important;
    }

    .mzk-news-header .mzk-section-subtitle {
        font-size: 14px !important;
        line-height: 20px !important;
    }

    /* Сітка: одна новина під іншою */
    .mzk-news-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        margin-bottom: 24px !important;
    }

    /* Блок новини */
    .mzk-news-card {
        width: 100% !important;
        max-width: 338px !important;
        height: 353px !important;
        border-radius: 16px !important;
        border: 1px solid rgba(243, 244, 246, 1) !important;
        margin: 0 auto !important;
    }

    .mzk-news-image {
        height: 160px !important; /* Трохи менше, щоб вліз текст */
    }

    .mzk-news-content {
        padding: 16px !important;
    }

    .mzk-news-date {
        font-size: 12px !important;
        line-height: 16px !important;
        margin-bottom: 8px !important;
    }

    .mzk-news-title {
        font-size: 16px !important;
        line-height: 22px !important;
        margin-bottom: 8px !important;
    }

    .mzk-news-excerpt {
        font-size: 12px !important;
        line-height: 19.5px !important;
        margin-bottom: 12px !important;
    }

    /* Посилання (Читати далі) по центру */
    .mzk-news-link {
        font-size: 12px !important;
        line-height: 16px !important;
        text-align: center !important;
        width: 100% !important;
        padding-top: 0 !important;
        display: block !important;
    }

    /* Кнопка "Всі новини" */
    .mzk-news-footer .mzk-btn-outline {
        width: 338px !important;
        height: 48px !important;
        border: 2px solid rgba(16, 24, 40, 1) !important;
        border-radius: 100px !important;
        font-size: 14px !important;
        line-height: 20px !important;
    }
    
}