/* --- Общие стили и сброс --- */
@font-face {
  font-family: 'ral';
  src: url('font/Raleway.ttf') format('truetype');
  font-style: normal;
}
@font-face {
  font-family: 'soy';
  src: url('font/Soyuz_Grotesk_Bold.otf') format('OpenType');
  font-style: normal;
}


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

body {
    /* Меняем display:flex на body, чтобы избежать проблем с высотой */
    font-family: 'ral', sans-serif; /* Используйте реальный шрифт */
    background-color: #ffffffff; /* Темный фон страницы */
    color: #ffffff;
    min-height: 100vh;
     overflow-x: hidden; /* Если нужно скрыть горизонтальный скролл */
    min-height: 100vh;
  
     margin: 0; 
    padding: 0;
    width: 100%;    
    scroll-behavior: smooth;
}

/* -------------------------------------- */
/* 1. Стили для черной шапки (Top Bar) */
/* -------------------------------------- */
.hero-wrapper {
    background-color: #0E0E0E; /* Основной чёрный фон для всей секции */
 
    width: 100%;
 padding-top: 80px;

}
.top-bar-wrapper {
    background-color: #1a1a1a; /* Глубокий черный фон для шапки */
    width: 100%;
    padding: 0 40px; /* Отступы по бокам */
    border-bottom: 2px solid #282828; /* Тонкая линия под шапкой (по желанию) */
    font-family: ral;
    position: fixed;
    z-index: 10;
    top: 0;
}

/* Ограничиваем ширину контента внутри шапки */
.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1500px;
    margin: 0 auto;
    padding: 20px 0; /* Внутренние отступы сверху/снизу */
}

/* Стилизация логотипа: "AR" - белый, "hub" - оранжевый */
.logo {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #ffffff; /* AR - белый */
    margin-left: 60px;
    font-style: Raleway;
}
.logo-highlight {
    color: #b95f45; /* hub - оранжевый (ваш акцентный цвет) */
}


/* --- Навигационные ссылки --- */
.main-nav ul {
    list-style: none;
    display: flex;
    gap: 45px;
    margin-left: 600px; /* Отделяем меню от иконок */
}

.main-nav a {
    text-decoration: none;
    color: #ffffff;
    font-size: 16px;
    font-weight: 400;
    /* Убираем нижнюю рамку у всех, кроме активного элемента */
    border-bottom: 2px solid transparent; 
    transition: color 0.3s ease;
}

.main-nav a:hover,
.main-nav a.active {
    color: #b95f45; /* Активный/наведенный цвет - оранжевый */
    /* Здесь на макете рамки нет, только цвет */
}

/* --- Иконки социальных сетей --- */
.social-icons {
    display: flex;
    gap: 15px; /* Уменьшили расстояние для соответствия макету */
margin-right: 50px;
}

.social-icons a {
    color: #ffffff;
    font-size: 18px;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.social-icons a:hover {
    opacity: 1;
}


/* ------------------------------------------ */
/* 2. Стили для главного блока с фоном (Hero) */
/* ------------------------------------------ */
.hero-container {
    width: 96%;
    max-width: 1500px;
    height: calc(80vh - 65px); /* Высота минус высота шапки (~65px) */
    margin: 20px auto; /* Центрируем и добавляем отступы */
   
    /* --- Стилизация фона и оверлея --- */
    background-image: 
        /* Затемняющий градиент */
        linear-gradient(rgba(25, 25, 25, 0.25), rgba(25, 25, 25, 0.45)),
        /* Фоновое изображение: ЗАМЕНИТЕ НА СВОЙ ПУТЬ */
        url('img/image.png');
 
    background-size: cover;
    background-position: center bottom; /* Смещаем, чтобы показать здание */
    border-radius: 40px; /* Увеличиваем скругление углов, как на макете */
 

    padding: 60px 80px; /* Увеличили внутренние отступы */
    display: flex;
    flex-direction: column;
    margin-bottom: -4%; /* Убираем лишний нижний отступ */
    position: relative; /* Добавляем, чтобы его z-index работал */
    z-index: 2; /* Чтобы он был поверх белой полосы */
   
}



/* --- Стили для основного контента (без изменений) --- */
.hero-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Центрирование по вертикали */
    align-items: flex-start;
    max-width: 800px;
    padding-bottom: 200px; /* Сдвиг вверх, чтобы контент не перекрывал дом */
}

.hero-content h1 {
    font-size: 7vw;
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
    margin-bottom: 25px;
    font-family:soy;
}

.hero-content h1 .highlight {
    background-color: transparent; /* Убираем фон для первого слова */
    color: #b95f45; /* Оранжевый цвет */
    padding: 0; 
    border-radius: 0;
    display: block; /* Каждое слово с новой строки */
    margin-bottom: 0px; 
}

.hero-content h1 {
    color: #ffffff; /* Цвет для "проекты домов" */
}

.hero-content p {
    font-size: 22px;
    line-height: 1.6;
    margin-bottom: 40px;
    max-width: 450px;
    opacity: 0.9;
    font-family: ral;
}

.cta-button {
    background-color: #b95f45;
    color: #ffffff;
    text-decoration: none;
    padding: 18px 35px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    font-family:ral;
    margin-top: 30px;
     transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.cta-button:hover {
     background-color: #c76f58; /* Немного светлее */
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* Тень сильнее */
    transform: translateY(-2px); /* Кнопка слегка поднимается */
}

/* ---------------------------------- */
/* Модальное окно (Pop-up Form) */
/* ---------------------------------- */

/* Контейнер модального окна (весь затемненный экран) */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75); /* Темный полупрозрачный фон */
    display: none; /* Изначально скрыто */
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Должен быть выше всех остальных элементов */
    font-family: ral;
}

.modal-form-fields {
    /* Основное: выстраиваем элементы в ряд */
    display: flex;
    align-items: flex-end; /* Прижимает поля и кнопку к нижней линии */
    gap: 15px; /* Расстояние между элементами (полями и кнопкой) */
    position: relative; /* Важно для позиционирования текста "Не обязывает вас..." */
    margin-bottom: 30px; /* Отступ под формой */
}
/* Контент модального окна */
.modal-content {
    position: relative;
    width: 80%;
    max-width: 850px; /* Фиксированная максимальная ширина */
    background-color: #1a1a1a; /* Темный фон для левой части */
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    display: flex; /* Используем flex для расположения двух сторон (текст и изображение) */
    overflow: hidden; /* Скрываем все, что выходит за рамки скругления */
    height: 350px;  
}

/* Кнопка закрытия */
.close-button {
    position: absolute;
    top: 15px;
    right: 25px;
    color: #fff;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10;
}

/* Основное тело модального окна, разделенное на 2 колонки */
.modal-body {
    display: flex;
    width: 100%;
}

/* Левая часть (Текст и форма) */
.modal-text-side {
    padding: 20px;
    width: 55%; /* Около 55% ширины занимает текст */
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.modal-text-side h2 {
    font-size: 25px;
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 20px;
    font-family: ral;
}

/* Выделенный текст "бесплатно" */
.modal-highlight {
    color: #b95f45; /* Оранжевый акцентный цвет */
}

.modal-text-side p {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 30px;
    opacity: 0.8;
    font-family: ral;
}

/* Правая часть (Изображение) */
.modal-image-side {
    width: 60%; 
    background-image: url('img/Rectangle 71.png'); 
    background-size: 70%; /* Увеличиваем, чтобы оно выглядело больше, чем блок */
    background-position: center 80%; /* Сдвигаем вниз на 80% (поэкспериментируйте) */
    background-repeat: no-repeat;
}

/* Стили формы */
.modal-form-fields input {
    /* Убираем фиксированную ширину, чтобы они заняли место в ряду */
    width: 200px; 
    /* Убираем ненужный margin-right, так как используем gap */
    margin-right: 0; 
    padding: 12px 18px;
    border: none;
    border-radius: 5px;
    background-color: #fff;
    color: #000;
    font-size: 10px;
    
}


.modal-submit-btn {
    background-color: #b95f45; 
    color: #fff;
    
    /* Уменьшаем вертикальный padding, но увеличиваем горизонтальный */
    padding: 10px 8px; 
    
    font-size: 10px;
    height: 37px;
    
    /* 👇 Увеличиваем ширину, чтобы вместить текст в одну строку */
    width: 150px; /* Установим 220px, чтобы вместить текст */
     flex-shrink: 0; 
    
    /* 3. Убедитесь, что текст не переносится */
    white-space: nowrap; 
    
    font-weight: 600; 
    cursor: pointer;
    transition: background-color 0.3s;
    border: none; /* Убедимся, что нет рамки */
    border-radius: 8px;
    font-family: ral;
}

.modal-submit-btn:hover {
    background-color: #c76f58;
}

.modal-form-fields small {
    position: absolute;
    bottom: -20px; 
    
    /* 👇 КОРРЕКТИРУЕМ LEFT: теперь он должен быть под кнопкой */
    /* Ширина полей: 180 + 10 + 180 + 10 = 380px. Кнопка начинается с 380px. */
    left: 350px; /* Попробуйте 400px (380 + небольшой сдвиг) */
    
    font-size: 10px;
    opacity: 0.7;
    white-space: nowrap; /* Важно, чтобы этот текст не переносился */
    font-family: ral;
    color: #ccc;
}


/* --- Стили для Бургер-меню (Скрыто на десктопе) --- */
.burger-menu {
    display: none; /* По умолчанию скрыто */
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 50;
    margin-left: 20px;
}

.burger-menu .line {
    width: 25px;
    height: 3px;
    background-color: #fff;
    margin: 4px 0;
    transition: all 0.3s ease;
}

/* --- Стили для открытого (мобильного) меню --- */
.main-nav {
    /* На десктопе это просто nav, но на мобильных это должно быть всплывающее окно */
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Класс, который JS будет добавлять для отображения меню */
.main-nav.open {
    transform: translateX(0);
    opacity: 1;
}
  .mobile-contact-info,
  .mobile-socials,
  .close-menu-btn{
    display:none;
  }

/* --- Адаптивность для планшетов (Media Query) --- */
@media (min-width: 769px) and (max-width: 1024px) {
    .top-bar-wrapper {
        padding: 0 20px;
        top: 0 !important;
    }
    .main-header {
        max-width: 100%;
    }
    .hero-container {
        padding: 30px;
    }
    .hero-content h1 {
        font-size: 8vw;
    }
    .hero-content p {
        font-size: 18px;
    }
    cta-button {
     width: 100%; 
    }

}
/* --- Бургер-меню для мобильных устройств --- */ 
@media (max-width: 768px) { 

    /* --- Адаптивность для мобильных устройств (Главный макет) --- */ 

    /* --- Настройка Header (Шапка) --- */ 
    .main-header { 
        /* Делаем шапку более компактной */ 
        padding: 40px 0; 
    } 
       .hero-wrapper {
        padding-top: 140px !important; /* Корректируем отступ под шапку */
      }


    .logo { 
        margin-left: 10px;  
        transform: translateY(35px); 
    } 
    /* Скрываем соцсети, как вы и просили */ 
    .social-icons { 
        color: #fff;
        font-size: 24px; 
        margin-left: 20px;
     
    } 
.close-menu-btn {
    display: none; /* Прячем по умолчанию */
    position: absolute;
    top: 30px;
    right: 30px;
    background: none;
    border: none;
    color: #ffffff;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10001; /* Выше, чем .main-nav */
}

/* Показываем крестик, только когда у .main-nav есть класс .open */
.main-nav.open .close-menu-btn {
    display: block;
}
.burger-menu.open {
    opacity: 0;
}
    

    /* 1. Корректировка Hero-контейнера */ 
    .hero-container { 
        /* 1. Уменьшаем ФИКСИРОВАННУЮ ВЫСОТУ */ 
        height: 380px; /* Уменьшаем высоту с 700px до 550px */ 
        /* 2. Уменьшаем ВНУТРЕННИЕ ОТСТУПЫ */ 
        padding: 25px 20px; /* Уменьшаем внутренние отступы */ 
        margin: 15px auto;  
        max-height: 85vh;  
        border-radius: 25px;  

        /* Смещаем фоновое изображение ВЫШЕ для лучшего соответствия */ 
        background-position: center 70%;  
        background-image:  
            linear-gradient(rgba(25, 25, 25, 0.15), rgba(25, 25, 25, 0.35)), 
            url('img/image.png'); 
            margin-bottom: -40px;
    } 

    /* 2. Корректировка основного контента */ 
    /* Корректировка контента внутри контейнера */ 
    .hero-content { 
        /* Прижимаем контент к верхней части */ 
        justify-content: flex-start; 
        /* Уменьшаем отступ сверху, чтобы контент начинался выше */ 
        padding-top: 30px; /* Был 50px */ 
        padding-bottom: 0;  
        align-items: flex-start; 
        text-align: left; 
    } 

    /* 3. Корректировка заголовка */ 
    .hero-content h1 { 
        font-size: 10vw; /* Увеличиваем размер шрифта для мобильных */ 
        margin-bottom: 15px; 
    } 

    /* Убираем блочное отображение для оранжевого слова */ 
    .hero-content h1 .highlight { 
        display: inline;  
    } 

    .hero-content p { 
        font-size: 16px; 
        line-height: 1.5; 
        max-width: 90%; 
        margin-bottom: 25px; 
    } 

    /* Корректировка внешнего вида кнопки */ 
    .cta-button { 
        width: 100%;  
        max-width: 400px; 
        text-align: center; 
        padding: 15px 0; 
        /* Уменьшаем отступ сверху, чтобы она была ближе к тексту */ 
        margin-top: 20px; /* Был 10px, но можно попробовать 20px для лучшего вертикального баланса */ 
    } 

    /* Скрываем стандартную навигацию и показываем бургер */ 
      .main-nav { 
    display: flex; 
    flex-direction: column; 
    position: fixed; 
    top: 0; 
    right: 0; 
    width: 70%; /* Ты можешь поставить 100%, если хочешь как на макете */ 
    height: 100%; 
    background-color: #1a1a1a; 
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.5); 
    transform: translateX(100%); 
    transition: transform 0.3s ease; 
    z-index: 9999; 

    /* --- 👇 ВОТ ГЛАВНЫЕ ИЗМЕНЕНИЯ 👇 --- */
    
    /* 1. Меняем padding, чтобы были отступы со всех сторон */
    padding: 100px 30px 40px 30px; /* Верх, Бока, Низ */
    
    /* 2. Это свойство раскидает <ul> наверх, а контакты/иконки вниз */
    
}

    .main-nav ul { 
        display: flex; 
        flex-direction: column; 
        gap: 25px; 
        list-style: none; 
        margin: 0; 
        padding: 0; 
    } 

    .main-nav li { 
        padding: 10px 0; 
    } 

    .main-nav a { 
        font-size: 18px; 
        color: white; 
        text-decoration: none; 
        border-bottom: 1px solid rgba(255, 255, 255, 0.1); 
        padding-bottom: 10px; 
        display: block; 
    } 

    /* Когда меню открыто */ 
    .main-nav.open { 
        transform: translateX(0); 
    } 

    /* Кнопка-бургер */ 
    .burger-menu { 
        display: flex; 
        flex-direction: column; 
        justify-content: center; 
        background: none; 
        border: none; 
        cursor: pointer; 
        z-index: 10000; 
        transform: translateY(35px); 
    } 

    .burger-menu .line { 
        width: 25px; 
        height: 3px; 
        background-color: #fff; 
        margin: 4px 0; 
        transition: all 0.3s ease; 
    } 

    /* Блокируем прокрутку, когда меню открыто */ 
    body.no-scroll { 
        overflow: hidden; 
    } 
    /* 2. Показываем и стилизуем мобильные иконки */
.mobile-socials {
    display: flex !important; /* Показываем в меню */
    gap: 25px; /* Расстояние между иконками */
    margin-top: 20px !important; /* Отступ от блока с адресом */
    margin-left: 50px;
}

    .mobile-contact-info {
    display: block !important; /* Показываем в меню */
    color: #ffffff;
    font-size: 16px;
    line-height: 1.6;
    font-style: normal; /* Убираем курсив у <address> */
    opacity: 0.7;
     margin-top: 30px; 
      margin-left: 25px;
}



.mobile-socials a {
    color: #ffffff;
    font-size: 24px; /* Размер как на макете */
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.mobile-socials a:hover {
    opacity: 1;
}

/* 3. Убедимся, что ДЕСКТОПНЫЕ иконки (те, что НЕ в .main-nav)
      все еще скрыты. (Этот стиль у тебя уже есть, но на всякий случай) */
.main-header > .social-icons {
     display: none;
}

    /* Общие настройки модалки */
  .modal-content {
    flex-direction: column; /* Ставим контент в столбик */
    width: 90%;
    height: auto;
    max-width: 95%;
    border-radius: 15px;
    overflow-y: auto; /* Скролл, если не помещается */
  }

  .modal-body {
    flex-direction: column;
  }

  /* Левая часть — текст и форма */
  .modal-text-side {
    width: 100%;
    padding: 25px 20px;
    text-align: center;
  }

  .modal-text-side h2 {
    font-size: 20px;
  }

  .modal-text-side p {
    font-size: 14px;
    margin-bottom: 20px;
  }

  /* Правая часть — картинка */
  .modal-image-side {
    display: none; /* Скрываем картинку для мобильных */
  }

  /* Форма */
  .modal-form-fields {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
  }

  .modal-form-fields input {
    width: 100%;
    max-width: 300px;
    font-size: 14px;
  }

  .modal-submit-btn {
    width: 100%;
    max-width: 300px;
    font-size: 14px;
    height: auto;
    padding: 12px;
  }

  .modal-form-fields small {
    position: static;
    margin-top: 10px;
    font-size: 12px;
    text-align: center;
    left: auto;
  }

  /* Кнопка закрытия */
  .close-button {
    top: 10px;
    right: 15px;
    font-size: 30px;
  }
    
}




/* -------------------------------------- */
/* 3. Стили для Блока "Вам гарантированно нужен..." (Reasons Section) */
/* -------------------------------------- */

.reasons-section {
    background-color: #fff; /* Белый фон */
    color: #0E0E0E; /* Темный текст */
    width: 100%;
    padding: 130px 40px 40px; /* Отступы сверху/снизу и по бокам */
    font-family: 'ral', sans-serif;
    position: relative;
  z-index: 1; /* Устанавливаем этот блок на слой ниже картинки */
    
}

.reasons-container {
    max-width: 1500px;
    margin: 0 auto;
    display: flex; /* Flexbox для расположения текста и списка рядом */
    justify-content: space-between; /* Распределяем пространство */
    gap: 80px; /* Расстояние между колонками */
     /* 👇 ДОБАВЛЯЕМ НИЖНЮЮ ГРАНИЦУ К КОНТЕЙНЕРУ КОНТЕНТА */
    border-bottom: 1px solid #0E0E0E; /* Установите толщину и цвет по макету */
    
    /* Добавляем внутренний отступ снизу, чтобы контент не прилипал к полосе */
    padding-bottom: 40px; 
}

/* --- Левая Колонка: Заголовок и Кнопка --- */
.reasons-text {
    width: 50%; /* Занимает половину ширины */
    padding-right: 50px;
}

.reasons-text h2 {
    font-size: 38px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 40px;
}

.reasons-highlight {
    color: #b95f45; /* Оранжевый акцентный цвет */
}

.callback-button {
    background-color: #101214;
    color: #ffffff;
    text-decoration: none;
    padding: 15px 30px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    display: inline-block;
      transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

}

.callback-button:hover {
    background-color: #333;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* Тень сильнее */
    transform: translateY(-2px); /* Кнопка слегка поднимается */
}

.callback-note {
    display: block;
    font-size: 11px;
    color: #888;
    margin-top: 5px;
    margin-left: 2px;
}

/* --- Правая Колонка: Список причин --- */
.reasons-list {
    width: 50%; /* Занимает половину ширины */
    border-left: 1px solid #0E0E0E; /* Вертикальный разделитель */
    padding-left: 50px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    font-family: ral;
}

.reason-item {
    display: flex;
    align-items: flex-start; /* Выравнивание номера и текста по верхнему краю */
    gap: 20px;
}

.reason-number {
    width: 35px;
    height: 35px;
    line-height: 33px; /* Центрируем текст по вертикали */
    text-align: center;
    border: 1px solid #0E0E0E;
    border-radius: 50%; /* Делаем кружок */
    font-weight: 700;
    flex-shrink: 0; /* Запрещаем номеру сжиматься */
    font-size: 16px;
}

.reason-item p {
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
}


@media (max-width: 1024px) {
    .reasons-section {
        padding: 80px 40px 20px !important; /* прижимаем вверх и влево */
    }

    .reasons-container {
        flex-direction: column;
        align-items: flex-start; /* прижимаем к левому краю */
        gap: 20px;
        padding-bottom: 20px;
    }

    .reasons-text, .reasons-list {
        width: 100%;
        padding: 0;
        border-left: none;
        padding-left: 0;
    }

    .reasons-text h2 {
        font-size: 30px;
        margin-bottom: 20px;
        text-align: left; /* текст влево */
    }

    .reasons-list {
        margin-top: 10px;
        gap: 25px;
    }

    /* Кнопка внизу блока */
    .reasons-text .callback-button,
    .reasons-text .callback-note {
        order: 2;
        margin-top: 30px;
        width: auto;
        text-align: center;
    }
}

/* --- Адаптив для мобильных устройств --- */
@media (max-width: 768px) {
    .reasons-section {
        padding: 30px 15px; /* меньше отступов — прижато кверху и влево */
    }

    .reasons-container {
        flex-direction: column;
        align-items: flex-start; /* всё влево */
        gap: 20px;
    }

    .reasons-text h2 {
        font-size: 22px;
        margin-bottom: 15px;
        text-align: left;
    }

    .reasons-list {
        margin-top: 10px;
        gap: 20px;
    }

    .reason-item {
        flex-direction: row;
        gap: 10px;
    }

    .reason-number {
        width: 28px;
        height: 28px;
        line-height: 26px;
        font-size: 13px;
    }

    .reason-item p {
        font-size: 14px;
        line-height: 1.4;
    }

    .reasons-text .callback-button,
    .reasons-text .callback-note {
        order: 2;
        margin-top: 25px;
        width: 100%;
        text-align: center;
    }
}
/* -------------------------------------- */
/* 4. Стили для Блока "Услуги" (Services Section) */
/* -------------------------------------- */
.services-section {
    background-color: #fff; /* Белый фон */
    color: #0E0E0E; /* Темный текст */
    font-family: 'ral', sans-serif;
    padding: 0px 40px 80px 40px;
    margin-top: 10px;
}

.services-container {
    max-width: 1500px;
    margin: 0 auto;
}

/* Заголовок блока */
.services-header {
    margin-bottom: 50px;
}

/* 2. Добавляем стили к самому H2 */
.services-header h2 {
    font-size: 45px;
    font-weight: 800;
    text-transform: uppercase;
    /* Обязательные свойства для позиционирования псевдоэлемента */
    position: relative; 
    display: inline-block; /* Ограничиваем ширину элемента H2 только до ширины текста */
    margin-bottom: 25px; /* Увеличиваем отступ, чтобы освободить место для полосы и P-тега */
    font-family: soy;
}

/* 3. Создаем полосу только под H2 */
.services-header h2::after {
    content: ''; /* Обязательный параметр */
    display: block;
    width: 150px; /* Ширина полосы */
    height: 4px; /* Толщина полосы */
    background-color: #0E0E0E; /* Цвет */
    
    /* Позиционируем полосу относительно H2 */
    position: absolute;
    bottom: -10px; /* Сдвигаем вниз на 10px от H2 */
    left: 0; 
}


.services-header p {
    font-size: 20px;
    color: #0E0E0E;
}

/* Сетка карточек: Используем Grid Areas для точного позиционирования */
.services-grid {
    display: grid;
    /* Установим 4 колонки, чтобы иметь гибкость в расположении */
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto; /* Две строки */
    
    /* Определяем, как будут расположены элементы в сетке */
    grid-template-areas: 
        "card1 card1 card2 card2" /* Карточка 1 и Карточка 2 занимают по 2 колонки */
        "card3 card3 card4 card4"; /* Карточка 3 и Карточка 4 занимают по 2 колонки */
        
    gap: 100px; /* Расстояние между карточками */
}

/* Назначаем области для карточек */
.services-grid .service-card:nth-child(1) { 
    grid-area: card1; 
    /* Дополнительная настройка для 1-й карточки, чтобы сдвинуть ее вправо */
    display: flex;
    flex-direction: column;
    padding-left: 20%; /* Сдвигаем контент (почти половину) вправо */
}



.services-grid .service-card:nth-child(2) { grid-area: card2; }
.services-grid .service-card:nth-child(3) { grid-area: card3; }
.services-grid .service-card:nth-child(4) { 
    grid-area: card4; 
    /* Дополнительная настройка для 4-й карточки */
    display: flex;
    flex-direction: column;
    padding-right: 30%; /* Сдвигаем контент (почти половину) влево */
}

.service-card {
    /* Сброс стилей, так как они будут переопределены ниже */
    display: flex; 
    flex-direction: column;
}

.service-card img {
    width: 100%;
    /* Устанавливаем высоту для всех, чтобы потом переопределить */
    height: 450px; 
    object-fit: cover;
    display: block;
    margin-bottom: 20px; 
    border-radius: 20px; /* Скругление углов, как на макете */
    transition: transform 0.3s ease;
}

/* Уникальная стилизация изображений по макету */

/* Карточка 1: Конструктивные решения (Высокая, смещенная вправо) */
.services-grid .service-card:nth-child(1) img {
    height: 550px; /* Делаем ее заметно выше */
    margin-top: 50px; /* Опускаем вниз, чтобы ее верхний край был ниже заголовка */
}

/* Карточка 2: Архитектурные решения (Обычная высота, выровнена по заголовку) */
.services-grid .service-card:nth-child(2) img {
    height: 450px; 
    margin-top: -70px; /* Выравнивание по верхнему краю */
}

/* Карточка 3: Архитектура для согласования (Обычная высота) */
.services-grid .service-card:nth-child(3) img {
    height: 450px;
    margin-top: 0;
}

/* Карточка 4: Инженерные сети (Небольшая, смещенная влево) */
.services-grid .service-card:nth-child(4) img {
    height: 500px; /* Делаем ее ниже */
    margin-top: -170px; /* Выравнивание по верхнему краю */
}

/* Контент (текст и кнопка) */
.card-content {
    padding: 0;
    color: #0E0E0E;
}

.card-content h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #0E0E0E;
}

.service-button {
    display: inline-block;
    background-color: #b95f45; /* Оранжевый акцент */
    color: #fff;
    text-decoration: none;
    padding: 12px 25px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    
}

.service-button:hover {
    background-color: #c76f58;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* Тень сильнее */
    transform: translateY(-2px); /* Кнопка слегка поднимается */
}
/* --- СЕТКА КАРТОЧЕК: Используем Grid Areas для точного позиционирования --- */
/* ... ваш services-grid ... */

/* ... ваши настройки grid-area ... */

.service-card {
    /* НОВОЕ: ЭТОТ КОНТЕЙНЕР БУДЕТ СКРЫВАТЬ АНИМАЦИЮ ВЫХОДА ЗА ГРАНИЦЫ */
    overflow: hidden; /* !!! КЛЮЧЕВОЕ СВОЙСТВО ДЛЯ ZOOM-ЭФФЕКТА !!! */
    position: relative; /* Чтобы можно было использовать для оверлея, если решите добавить */
    
    display: flex; 
    flex-direction: column;
}

.service-card img {
    /* ... ваш существующий код ... */
    width: 100%;
    height: 450px; 
    object-fit: cover;
    display: block;
    margin-bottom: 20px; 
    border-radius: 20px; 
    
    /* У вас уже было, но убедимся, что переход плавный */
    transition: transform 0.4s ease-in-out; 
}

/* ---------------------------------------------------- */
/* !!! АНИМАЦИЯ ПРИ НАВЕДЕНИИ !!! */
/* ---------------------------------------------------- */
.service-card:hover img {
    transform: scale(1.06); /* Увеличение изображения на 6% при наведении */
}

/* ... Уникальная стилизация изображений по макету (оставляем без изменений) ... */

/* ... ваш card-content и service-button ... */


/* -------------------------------------- */
/* Адаптивность для Секции Услуг */
//* -------------------------------------- */
/* --- Адаптив под планшеты (до 1024px) --- */
@media (max-width: 1024px) {
  .services-section {
    padding: 40px 20px 60px 20px;
 
  }

  .services-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "card1 card2"
      "card3 card4";
    gap: 60px;
 
  }

  .services-grid .service-card:nth-child(1),
  .services-grid .service-card:nth-child(4) {
    padding: 0; /* убираем большие отступы по бокам */
  }

  .service-card img {
    height: 400px;
  }

  .services-header h2 {
    font-size: 45px;
  }
  

  .services-header p {
    font-size: 18px;
  }
}

/* --- Адаптив под телефоны (до 768px) --- */
@media (max-width: 768px) {
  .services-section {
    padding: 15px 15px 50px 15px;
  }

  .services-header h2 {
    font-size: 45px !important;
  }

  .services-header p {
    font-size: 16px;
  }

  .services-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "card1"
      "card2"
      "card3"
      "card4";
    gap: 20px;
  }
  

  .service-card {
    padding: 0 !important;
  }

  .service-card img {
    width: 100%;
    height: auto;
    max-height: 300px;
    margin-top: 0;
  }

  .card-content h3 {
    font-size: 16px;
  }

  .service-button {
    font-size: 14px;
    padding: 10px;
    width: 100%;
    text-align: center;
  }
}

/* --- Мелкие телефоны (до 480px) --- */
@media (max-width: 480px) {
  .services-header h2 {
    font-size: 37px;
  }

  .services-header p {
    font-size: 14px;
  }

  .service-card img {
    max-height: 270px;
    border-radius: 15px;
  }

  .card-content h3 {
    font-size: 15px;
  }

  .service-button {
    font-size: 13px;
    padding: 8px 18px;
  }
}
/* --- Фикс перекрытия и лишних отступов на телефонах --- */
@media (max-width: 768px) {
  /* Сбрасываем индивидуальные margin-top с десктопа */
  .services-grid .service-card:nth-child(1) img,
  .services-grid .service-card:nth-child(2) img,
  .services-grid .service-card:nth-child(3) img,
  .services-grid .service-card:nth-child(4) img {
    margin-top: 0 !important;
  }

  /* Подравниваем промежутки между карточками */
  .services-grid .service-card {
    margin-bottom: 20px; /* одинаковый отступ между всеми */
  }

  /* Можно чуть уменьшить отступ между второй и третьей карточкой */
  .services-grid .service-card:nth-child(2) {
    margin-bottom: 40px;
  }

  /* Чтобы точно не перекрывались */
  .services-grid .service-card:nth-child(3),
  .services-grid .service-card:nth-child(4) {
    position: relative;
    z-index: 1;
  }
}
/* -------------------------------------- */
/* 5. Секция CTA "Получите планировочное решение" */
/* -------------------------------------- */
.cta-section {
    background-color: #0E0E0E; /* Темный фон */
    color: #fff; /* Белый текст */
    padding: 80px 40px;
    font-family: 'ral', sans-serif;
    position: relative; 
    /* Увеличиваем нижний отступ, чтобы дать место вылезающему фото */
    padding-bottom: 180px; 
    height: 520px;
    border-radius: 40px;
    width: 96%;
    margin: 10px auto;
 
}

.cta-container {
    max-width: 1500px;
    margin: 0 auto;
    display: flex; /* Flexbox для расположения текста и картинки */
    align-items: center; /* Выравнивание по вертикали */
    gap: 40px;
}

/* Левая часть: Текст и кнопка */
.cta-content {
    flex: 1; /* Занимает доступное пространство */
    max-width: 700px; /* Ограничиваем ширину текста */
}

.cta-content h2 {
    font-size: 38px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 20px;
}

.cta-content .accent-text {
    color: #b95f45; /* Оранжевый акцентный цвет */
}

.cta-description {
    font-size: 26px;
    color: #ccc;
    margin-bottom: 30px;
    line-height: 1.5;
}

/* Кнопка CTA */
.cta-button {
    display: inline-block;
    background-color: #b95f45; 
    color: #fff;
    text-decoration: none;
    padding: 15px 30px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
     /* Запускаем анимацию пульсации */
    position: relative; 
    z-index: 1; 
    transition: all 0.3s ease-in-out;
    overflow: visible; /* Меняем на visible, чтобы тень свободно пульсировала */
    
    /* Запускаем анимацию пульсации */
    animation: pulse-glow 2s infinite ease-in-out; 
    
    /* Добавляем базовую мягкую тень к самой кнопке для лучшего выделения */
    box-shadow: 0 0 5px rgba(185, 95, 69, 0.5);
}
* 3. Создаем ПСЕВДОЭЛЕМЕНТ для эффекта СВЕЧЕНИЯ */
.cta-button::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px; 
    
    /* !!! ДЕЛАЕМ ТЕНЬ ЗНАЧИТЕЛЬНО БОЛЕЕ ИНТЕНСИВНОЙ !!! */
    /* Увеличиваем радиус размытия (40px) и силу тени (0.9) */
    box-shadow: 0 0 40px rgba(185, 95, 69, 0.9); 
    
    background: transparent; 
    z-index: 0; 
    border-radius: 8px; 
    
    /* Запускаем ту же яркую анимацию */
    animation: pulse-glow 2s infinite ease-in-out; 
}

.cta-button:hover {
    background-color: #c76f58; 
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3); /* Возвращаем стандартную тень */
    animation: none; /* Останавливаем пульсацию */
}
.cta-button:hover::before {
    /* Убираем свечение при наведении, чтобы не мешало*/
    box-shadow: none; 
    /* Или можно изменить, например, на белую тень */
}
@keyframes pulse-glow {
    0% {
        transform: scale(1);
        opacity: 1; /* !!! Увеличиваем до 1: Свечение будет ярким !!! */
    }
    50% {
        transform: scale(1.05);
        opacity: 0.8; /* Небольшое уменьшение, чтобы создать эффект пульсации */
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.cta-disclaimer {
    font-size: 12px;
    color: #888;
}

.cta-image-wrapper {
    position: absolute; 
    right: -40px; /* Выносим за правый край */
    /* ИЗМЕНЕНИЕ: Опускаем изображение ниже уровня текста (примерно на 200px) */
    bottom: 240px; 
    width: 500px; 
    height: 450px; 
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    z-index: 2; 
     margin-bottom: -600px;
      position: relative;
    
}

.cta-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    
}

/* -------------------------------------- */
/* Адаптивность для Секции CTA */
/* -------------------------------------- */

/* -------------------------------------- */
/* Адаптивность для Секции CTA */
/* -------------------------------------- */

@media (max-width: 1024px) {
    .cta-section {
        padding: 60px 20px;
        padding-bottom: 60px;
    }
    
    .cta-container {
        flex-direction: column; 
        /* ИЗМЕНЕНИЕ: УДАЛЯЕМ text-align: center; ИЛИ СБРАСЫВАЕМ ЕГО */
        text-align: left; /* Устанавливаем выравнивание по левому краю */
        gap: 0; 
    }
    
    .cta-content {
        max-width: 100%;
        margin-top: 0; 
        margin-bottom: 30px; 
    }
    
    .cta-content h2 {
        font-size: 32px;
    }

    /* Сбрасываем абсолютное позиционирование на адаптации */
    .cta-image-wrapper {
        position: static; 
        width: 96%; /* Увеличим ширину, чтобы не было лишних отступов */
        height: 235px !important; 
        max-width: none; /* Убираем max-width, чтобы занять всю ширину */
        margin: 0; /* Сбрасываем margin: 0 auto; */
        margin-top: 30px; 
    }
    
    /* ИЗМЕНЕНИЕ: Кнопка должна быть выровнена по левому краю, как текст */
    .cta-button {
        display: inline-block; /* Возвращаем к inline-block */
        width: 100%; /* Ширина по контенту */
        max-width: none; 
        margin-left: 0;
        margin-right: 0;
    }
    
    .cta-disclaimer {
        text-align: left; /* Гарантируем, что дисклеймер тоже слева */
    }
}

@media (max-width: 768px) {
    .cta-section {
        padding: 40px 15px;
        padding-bottom: 40px;
    }
    
    .cta-content h2 {
        font-size: 20px;
    }
    
    .cta-description {
        font-size: 13px;
    }

    .cta-image-wrapper {
        height: 280px;
        margin-top: 20px; 
    }
}


/* 6. Стили для Блока "Портфолио" (Services Section) */
/* -------------------------------------- */
.portfolio-section {
    background-color: #fff; /* Белый фон */
    color: #0E0E0E; /* Темный текст */
    font-family: 'ral', sans-serif;
    padding: 80px 40px 80px 40px;

}

.portfolio-container {
    max-width: 1500px;
    margin: 0 auto;
     border-bottom: 1px solid #0E0E0E;
         position: relative;
  z-index: 1;
}

/* Заголовок блока */
.portfolio-header {
    margin-bottom: 50px;
}

/* 2. Добавляем стили к самому H2 */
.portfolio-header h2 {
    font-size: 38px;
    font-weight: 800;
    text-transform: uppercase;
    /* Обязательные свойства для позиционирования псевдоэлемента */
    position: relative; 
    display: inline-block; /* Ограничиваем ширину элемента H2 только до ширины текста */
    margin-bottom: 25px; /* Увеличиваем отступ, чтобы освободить место для полосы и P-тега */
    font-family: soy;
}

/* 3. Создаем полосу только под H2 */
.portfolio-header h2::after {
    content: ''; /* Обязательный параметр */
    display: block;
    width: 200px; /* Ширина полосы */
    height: 4px; /* Толщина полосы */
    background-color: #0E0E0E; /* Цвет */
    
    /* Позиционируем полосу относительно H2 */
    position: absolute;
    bottom: -10px; /* Сдвигаем вниз на 10px от H2 */
    left: 0; 
}


.portfolio-header p {
    font-size: 20px;
    color: #0E0E0E;
}

/* Сетка карточек: Используем Grid Areas для точного позиционирования */
.portfolio-grid {
    display: grid;
    /* Установим 4 колонки, чтобы иметь гибкость в расположении */
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto; /* Две строки */
    
    /* Определяем, как будут расположены элементы в сетке */
    grid-template-areas: 
        "card1 card1 card2 card2" /* Карточка 1 и Карточка 2 занимают по 2 колонки */
        "card3 card3 card4 card4"; /* Карточка 3 и Карточка 4 занимают по 2 колонки */
        
    gap: 100px; /* Расстояние между карточками */
}

/* Назначаем области для карточек */
.portfolio-grid .portfolio-card:nth-child(1) { 
    grid-area: card1; 
    /* Дополнительная настройка для 1-й карточки, чтобы сдвинуть ее вправо */
    display: flex;
    flex-direction: column;
    padding-left: 20%; /* Сдвигаем контент (почти половину) вправо */
}



.portfolio-grid .portfolio-card:nth-child(2) { grid-area: card2; }
.portfolio-grid .portfolio-card:nth-child(3) { grid-area: card3; }
.portfolio-grid .portfolio-card:nth-child(4) { 
    grid-area: card4; 
    /* Дополнительная настройка для 4-й карточки */
    display: flex;
    flex-direction: column;
    padding-right: 30%; /* Сдвигаем контент (почти половину) влево */
}

.portfolio-card {
    /* Сброс стилей, так как они будут переопределены ниже */
    display: flex; 
    flex-direction: column;
}

.portfolio-card img {
    width: 100%;
    /* Устанавливаем высоту для всех, чтобы потом переопределить */
    height: 450px; 
    object-fit: cover;
    display: block;
    margin-bottom: 20px; 
    border-radius: 20px; /* Скругление углов, как на макете */
    transition: transform 0.3s ease;
}

/* Уникальная стилизация изображений по макету */

/* Карточка 1: Конструктивные решения (Высокая, смещенная вправо) */
.portfolio-grid .portfolio-card:nth-child(1) img {
    height: 550px; /* Делаем ее заметно выше */
    margin-top: 50px; /* Опускаем вниз, чтобы ее верхний край был ниже заголовка */
}

/* Карточка 2: Архитектурные решения (Обычная высота, выровнена по заголовку) */
.portfolio-grid .portfolio-card:nth-child(2) img {
    height: 450px; 
    margin-top: -70px; /* Выравнивание по верхнему краю */
}

/* Карточка 3: Архитектура для согласования (Обычная высота) */
.portfolio-grid .portfolio-card:nth-child(3) img {
    height: 450px;
    margin-top: 0;
}

/* Карточка 4: Инженерные сети (Небольшая, смещенная влево) */
.portfolio-grid .portfolio-card:nth-child(4) img {
    height: 500px; /* Делаем ее ниже */
    margin-top: -170px; /* Выравнивание по верхнему краю */
}

/* Контент (текст и кнопка) */
.card-content {
    padding: 0;
    color: #0E0E0E;
}

.card-content h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #0E0E0E;
}

/* ... Ваш код до .portfolio-card ... */

.portfolio-card {
    /* НОВОЕ: ДОБАВЛЯЕМ overflow: hidden; для Zoom-эффекта */
    overflow: hidden; /* !!! КЛЮЧЕВОЕ СВОЙСТВО: Скрывает выступающие части изображения при увеличении !!! */
    position: relative; /* Добавляем на всякий случай, если в будущем понадобится оверлей */
    
    display: flex; 
    flex-direction: column;
}

.portfolio-card img {
    width: 100%;
    height: 450px; 
    object-fit: cover;
    display: block;
    margin-bottom: 20px; 
    border-radius: 20px; 
    
    /* Убеждаемся, что переход плавный */
    transition: transform 0.4s ease-in-out; 
}

/* ---------------------------------------------------- */
/* !!! АНИМАЦИЯ ПРИ НАВЕДЕНИИ (Hover Effect) !!! */
/* ---------------------------------------------------- */
.portfolio-card:hover img {
    transform: scale(1.06); /* Увеличиваем изображение на 6% при наведении */
}

/* ... Ваш код после (Уникальная стилизация изображений и card-content) остается без изменений ... */


/* -------------------------------------- */
/* Адаптивность для Секции Услуг */
//* -------------------------------------- */
/* --- Адаптив под планшеты (до 1024px) --- */
@media (max-width: 1024px) {
  .portfolio-section {
    padding: 80px 20px 60px 20px !important;
 
  }

  .portfolio-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "card1 card2"
      "card3 card4";
    gap: 60px;
 
  }

  .portfolio-grid .portfolio-card:nth-child(1),
  .portfolio-grid .portfolio-card:nth-child(4) {
    padding: 0; /* убираем большие отступы по бокам */
  }

  .portfolio-card img {
    height: 400px;
  }

  .portfolio-header h2 {
    font-size: 32px;
  }
  

  .portfolio-header p {
    font-size: 18px;
  }
}

/* --- Адаптив под телефоны (до 768px) --- */
@media (max-width: 768px) {
  .portfolio-section {
    padding: 80px 15px 50px 15px;
  }

  .portfolio-header h2 {
    font-size: 37px;
  }

  .portfolio-header p {
    font-size: 16px;
  }

  .portfolio-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "card1"
      "card2"
      "card3"
      "card4";
    gap: 20px;
  }
  

  .portfolio-card {
    padding: 0 !important;
  }

  .portfolio-card img {
    width: 100%;
    height: auto;
    max-height: 300px;
    margin-top: 0;
  }

  .card-content h3 {
    font-size: 16px;
  }


}
/* --- Мелкие телефоны (до 480px) --- */
@media (max-width: 480px) {
  .portfolio-header h2 {
    font-size: 37px;
  }

  .portfolio-header p {
    font-size: 14px;
  }

  .portfolio-card img {
    max-height: 270px;
    border-radius: 15px;
  }

  .card-content h3 {
    font-size: 15px;
  }


}
/* --- Фикс перекрытия и лишних отступов на телефонах --- */
@media (max-width: 768px) {
  /* Сбрасываем индивидуальные margin-top с десктопа */
  .portfolio-grid .portfolio-card:nth-child(1) img,
  .portfolio-grid .portfolio-card:nth-child(2) img,
  .portfolio-grid .portfolio-card:nth-child(3) img,
  .portfolio-grid .portfolio-card:nth-child(4) img {
    margin-top: 0 !important;
  }

  /* Подравниваем промежутки между карточками */
  .portfolio-grid .portfolio-card {
    margin-bottom: 20px; /* одинаковый отступ между всеми */
  }

  /* Можно чуть уменьшить отступ между второй и третьей карточкой */
  .portfolio-grid .portfolio-card:nth-child(2) {
    margin-bottom: 40px;
  }

  /* Чтобы точно не перекрывались */
  .portfolio-grid .portfolio-card:nth-child(3),
  .portfolio-grid .portfolio-card:nth-child(4) {
    position: relative;
    z-index: 1;
  }
}
/* 7. Контакты" */
/* -------------------------------------- */
.kontact-section {
    background-color: #A13B25; /* Темный фон */
    color: #fff; /* Белый текст */
    padding: 40px 40px;
    font-family: 'ral', sans-serif;
    position: relative; 
    /* Увеличиваем нижний отступ, чтобы дать место вылезающему фото */
    padding-bottom: 180px; 

     width: 96%;
    border-radius: 40px;
     max-width: 1500px;
      margin: 10px auto;
      height: 400px;
}

.kontact-container {
    max-width: 1500px;
    margin: 0 auto;
    display: flex; /* Flexbox для расположения текста и картинки */
     /* Выравнивание по вертикали */
    gap: 40px;
    

}

/* Левая часть: Текст и кнопка */
.kontact-content {
    flex: 1; /* Занимает доступное пространство */
    max-width: 700px; /* Ограничиваем ширину текста */
}

.kontact-content h2 {
    font-size: 38px;
    font-weight: 800;
    text-transform: uppercase;
    /* Обязательные свойства для позиционирования псевдоэлемента */
    position: relative; 
    display: inline-block; /* Ограничиваем ширину элемента H2 только до ширины текста */
    margin-bottom: 40px; /* Увеличиваем отступ, чтобы освободить место для полосы и P-тега */
    font-family: soy;
}

/* 3. Создаем полосу только под H2 */
.kontact-content h2::after {
    content: ''; /* Обязательный параметр */
    display: block;
    width: 185px; /* Ширина полосы */
    height: 2px; /* Толщина полосы */
    background-color: #ffffffff; /* Цвет */
    
    /* Позиционируем полосу относительно H2 */
    position: absolute;
    bottom: -10px; /* Сдвигаем вниз на 10px от H2 */
    left: 0; 
}


.kontact-content p {
    font-size: 25px;
    color: #ffffffff;
    width: 270px;
}
.kontact-image-wrapper {
    position: absolute; 
    right: 10px; /* Выносим за правый край */
    /* ИЗМЕНЕНИЕ: Опускаем изображение ниже уровня текста (примерно на 200px) */
    bottom: -30px; 
    width: 600px; 
    height: 400px; 
  
    
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);

    position: relative; /* Чтобы z-index сработал */
  z-index: 2;         /* Ставим картинку на слой выше, чем следующий блок */
  margin-bottom: -150px; 
  


}

.kontact-image-wrapper iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 20px;
  
   
 
}
.ksocial-icons{
        display: flex;
       gap: 15px; /* Уменьшили расстояние для соответствия макету */
     margin-left: -20px;
     margin-top: 140px;
}

.ksocial-icons a {
    color: #ffffff;
    font-size: 25px;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.ksocial-icons a:hover {
    opacity: 1;
}




/* -------------------------------------- */
/* Адаптивность для Секции CTA */
/* -------------------------------------- */

@media (max-width: 1024px) {
    .kontact-section {
        padding: 60px 20px !important;
        padding-bottom: 60px;

    }
    
    .kontact-container {
        flex-direction: column; 
        /* ИЗМЕНЕНИЕ: УДАЛЯЕМ text-align: center; ИЛИ СБРАСЫВАЕМ ЕГО */
        text-align: left !important; /* Устанавливаем выравнивание по левому краю */
        gap: 0; 
    }
    
    .kontact-content {
        max-width: 100%;
        margin-top: 0; 
        margin-bottom: 30px; 
        margin-left: 0 !important;
        margin-right: 0 !important;
        /* Если нужно, явно выравниваем текст внутри, хотя это должно сработать от .kontact-container */
        text-align: left !important;
    }
    
  .kontact-content h2 {
    font-size: 32px;
  }
  

  .kontact-content p {
    font-size: 18px;
    width: 180px;
  }

    /* Сбрасываем абсолютное позиционирование на адаптации */
    .kontact-image-wrapper {
        position: static; 
        width: 100%; /* Увеличим ширину, чтобы не было лишних отступов */
        height: 350px; 
        max-width: none; /* Убираем max-width, чтобы занять всю ширину */
        margin: 0; /* Сбрасываем margin: 0 auto; */
        margin-top: 30px; 
    }
    
    /* ИЗМЕНЕНИЕ: Кнопка должна быть выровнена по левому краю, как текст */
    .kontact-button {
        display: inline-block; /* Возвращаем к inline-block */
        width: 100%; /* Ширина по контенту */
        max-width: none; 
        margin-left: 0;
        margin-right: 0;
    }
    
    .kontact-disclaimer {
        text-align: left; /* Гарантируем, что дисклеймер тоже слева */
    }
    .ksocial-icons{
        display: flex;
       gap: 15px; /* Уменьшили расстояние для соответствия макету */
     margin-left: 250px;
     margin-top: -60px;
}
}

@media (max-width: 768px) {
    .kontact-section {
        padding: 40px 15px;
        padding-bottom: 40px;
    }
    
    .kontact-section h2 {
    font-size: 37px;
  }

  .kontact-section p {
    font-size: 16px;
  }
    
    .kontact-description {
        font-size: 16px;
    }

    .kontact-image-wrapper {
        height: 280px;
        margin-top: 20px; 
    }
}

/* -------------------------------------- */
/* 7. ФУТЕР (Подвал) */
/* -------------------------------------- */
.main-footer {
    background-color: #1a1a1a; /* Темный фон, как в шапке */
    color: #fff;
    font-family: 'ral', sans-serif;
    padding: 60px 40px 20px;
    margin-top: 100px;
 
}

.footer-container {
    max-width: 1500px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 50px;
    border-bottom: 1px solid #333; /* Разделительная линия */
    padding-bottom: 40px;
}

.footer-column {
    flex: 1;
}

/* --- Колонка 1: Контакты и Лого --- */
.footer-logo {
    margin-left: 0; /* Сбрасываем марджин из хедера */
    font-size: 40px;
}

.footer-tagline {
    font-size: 20px;
    color: #ffffffff;
    margin-top: 5px;
    margin-bottom: 25px;
}

.footer-address {
    font-style: normal;
    font-size: 20px;
    line-height: 1.8;
    color: #ffffffff;
    margin-bottom: 25px;
}

.footer-social-icons a {
    font-size: 16px;
    color: #fff;
    margin-right: 15px;
}

/* --- Колонка 2: Навигация --- */
.footer-nav ul {
    list-style: none;
    padding: 0;
    margin-top: 50px;
}

.footer-nav li {
    margin-bottom: 20px;
}

.footer-nav a {
    color: #ffffffff;
    text-decoration: none;
    font-size: 20px;
    transition: color 0.3s ease;
}

.footer-nav a:hover {
    color: #b95f45;
}

/* --- Колонка 3: Подписка и ссылки --- */
.footer-subscribe {
    max-width: 350px;
    margin-right: 80px;
    margin-top: 40px;
}

.subscribe-text {
    font-size: 15px;
    color: #777777;
    margin-bottom: 15px;
}

.subscribe-form {
    display: flex;
    margin-bottom: 40px;
    align-items: center;
     border-bottom: 1px solid #666;
}

.subscribe-form input {
    background-color: transparent;
    border: none;
    /* Тонкая линия внизу */
    color: #fff;
    padding: 10px 0;
    font-size: 20px;
    flex-grow: 1;
    margin-right: 15px;
}

.subscribe-form input::placeholder {
    color: #ffffffff;
}

.subscribe-button {
    background-color: #b95f45;
    color: #fff;
    border: none;
    padding: 5px 15px;
    border-radius: 4px;
    font-size: 15px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    
    height: 30px;
    margin-left: -40px;
}

.subscribe-button:hover {
    background-color: #c76f58;
}

.footer-link {
    display: block;
    color: #ffffffff;
    text-decoration: none;
    font-size: 20px;

    transition: color 0.3s ease;
    margin-top:20px;
}

.footer-link:hover {
    color: #b95f45;
}

/* --- Нижняя строка копирайта --- */
.footer-bottom {
    max-width: 1500px;
    margin: 0 auto;
    text-align: right;
    font-size: 12px;
    color: #555;
    padding-top: 15px;
  
}

/* -------------------------------------- */
/* ======================================= */
/* АДАПТАЦИЯ ФУТЕРА ДЛЯ МОБИЛЬНЫХ (до 768px) */
/* ======================================= */
@media (max-width: 768px) {
    
    /* --- Общий контейнер футера --- */
    .main-footer {
        padding: 20px 20px 20px;
        margin-top: 140px;
    }
      .footer-logo{
        margin-top: -20px;

      }
      .footer-tagline{
        margin-top: 60px;
        font-size: 15px; 
      }
      .footer-address{
        width: 200px;
        font-size: 16px;
      }

    /* --- Контейнер колонок: перестраиваем в две колонки --- */
    .footer-container {
        /* Включаем обертывание, чтобы элементы встали в два ряда */
        flex-wrap: wrap; 
        flex-direction: row; /* Сохраняем направление строки */
        justify-content: space-between; /* Распределяем пространство */
        gap: 20px 5%; /* Вертикальный и горизонтальный отступ */
        padding-bottom: 30px;
    }

    /* 1. Колонка: Логотип и Контакты (ARhub) */
    .footer-contact {
        order: 1; 
        /* Занимает 45% ширины, чтобы рядом поместилась навигация */
        flex: 1 1 45%; 
        max-width: 45%; /* Ограничиваем, чтобы не занимал больше */
        margin-bottom: 20px;
    }

    /* 2. Колонка: Навигация */
    .footer-nav {
        order: 2; 
        /* Занимает 45% ширины */
        flex: 1 1 45%; 
        max-width: 45%;
        margin-bottom: 20px;
        text-align: left; /* На макете ссылки выровнены по правому краю */
        margin-top: 90px;
        
    }
    
    .footer-nav ul {
        /* На мобильном навигация остается в колонку, но выровнена по правому краю */
        text-align: right; 
        list-style: none; 
        padding: 0;
        margin: 0;
       
    }
    
    .footer-nav a {
        font-size: 16px; /* Уменьшаем шрифт */
    }

    /* 3. Колонка: Подписка и Копирайт (Занимает всю ширину) */
    .footer-subscribe {
        order: 3; 
        flex: 1 1 100%; /* Занимает всю ширину под двумя верхними колонками */
        max-width: 100%;
        margin-top: -40px;
        text-align: left; /* Текст подписки слева */
    }

    /* Перестраиваем форму подписки */
    .subscribe-form {
        flex-direction: column;
        align-items: stretch;
        margin-bottom: 20px;
       
    }

    .subscribe-form input {
        margin-right: 0;
         font-size:16px;
        margin-bottom: 10px;
    }

    .subscribe-button {
        width: 31%;
        padding: 1px 1px;
        margin-left: 250px;
        margin-top: -45px;
        font-size:13px;
    }
    
    /* Ссылки конфиденциальности */
    .footer-link {
        text-align: left; /* Ссылки слева */
        display: inline; /* Чтобы они были рядом */
        margin-right: 20px;
        font-size: 16px;
    }
    
    /* --- Нижняя строка копирайта и соцсети --- */
    .footer-bottom {
        display: flex;
        justify-content: space-between; /* Соцсети и копирайт по краям */
        align-items: center;
        width: 100%;
        padding-top: 15px;
    }
    
    .footer-bottom p {
        margin: 0;
        order: 2;
    }
    
    .footer-social-icons {
        order: 1; 
        text-align: left; /* Соцсети слева */
    }

    /* Скрываем соцсети в основной контактной колонке, чтобы избежать дублирования */
    .footer-contact .social-icons {
        display: none;
    }
}