/* ЭТАПЫ РАБОТ И ТД И ТП */
.slide-button12 {
    background-color: rgba(0, 0, 0, 0.7); /* Полупрозрачный черный фон для кнопки */
    border: 2px solid rgba(255, 255, 255, 0.5); /* Полупрозрачная рамка */
    color: #fff; /* Белый текст */
    padding: 10px 15px; /* Отступы */
    font-size: 16px; /* Размер шрифта */
    cursor: pointer; /* Указатель при наведении */
    margin-top: 2px; /* Отступ сверху */
    transition: background-color 0.3s, color 0.3s; /* Плавный переход цвета */
}

.slide-button12:hover {
    background-color: rgba(255, 255, 255, 0.2); /* Легкая непрозрачность при наведении */
    color: black; /* Темный текст при наведении */
}

/* Медиа-запрос для мобильных устройств */
@media (max-width: 768px) {
    .slide-button12 {
        padding: 12px 20px; /* Увеличиваем отступы для мобильных */
        font-size: 18px; /* Увеличиваем размер шрифта для лучшей читаемости */
        margin-top: 5px; /* Увеличиваем отступ сверху для лучшего внешнего вида */
    }
}




.icon2 {
    width: 25px; /* Ширина иконки */
    height: 25px; /* Высота иконки */
}
   .collaboration-steps {
    position: relative; /* Убедитесь, что секция имеет относительное позиционирование */
    background-image: url('../image/image_main/menu.jpg'); /* Путь к вашей картинке */
    background-size: cover; /* Заставляет картинку покрывать весь элемент */
    background-position: center; /* Центрирует картинку */
    background-repeat: no-repeat; /* Не повторяет картинку */
    padding: 50px 0; /* Отступы сверху и снизу */
    color: white; /* Цвет текста, чтобы он был виден на фоне */
}

.collaboration-steps::before {
    content: ''; /* Псевдоэлемент требует содержимого */
    position: absolute; /* Абсолютное позиционирование для наложения */
    top: 0; /* Начало сверху */
    left: 0; /* Начало слева */
    right: 0; /* Конец справа */
    bottom: 0; /* Конец снизу */
    background-color: rgba(0, 0, 0, 0.5); /* Черный цвет с 50% прозрачностью */
    z-index: 1; /* Убедитесь, что он находится выше фона, но ниже текста */
}

.collaboration-steps h1,
.collaboration-steps .button-container {
    position: relative; /* Чтобы текст и кнопки были выше псевдоэлемента */
    z-index: 2; /* Убедитесь, что текст и кнопки находятся выше наложенного фона */
}
    .collaboration-steps2 {
    background-image: url('../image/background.jpg'); /* Путь к вашей картинке */
    background-size: cover; /* Заставляет картинку покрывать весь элемент */
    background-position: center; /* Центрирует картинку */
    background-repeat: no-repeat; /* Не повторяет картинку */
    padding: 50px 0; /* Отступы сверху и снизу */
}
.collaboration-steps3 {
    background-image: url('../image/image_main/back_calc.jpg'); /* Путь к вашей картинке */
    background-size: cover; /* Заставляет картинку покрывать весь элемент */
    background-position: center; /* Центрирует картинку */
    background-repeat: no-repeat; /* Не повторяет картинку */
    padding: 50px 0; /* Отступы сверху и снизу */
}
.collaboration-steps4 {
    background-image: url('../image/image_main/back_facade.jpg'); /* Путь к вашей картинке */
    background-size: cover; /* Заставляет картинку покрывать весь элемент */
    background-position: center; /* Центрирует картинку */
    background-repeat: no-repeat; /* Не повторяет картинку */
    padding: 50px 0; /* Отступы сверху и снизу */
}
.collaboration-steps5 {
    background-image: url('../image/image_main/back_roof.jpg'); /* Путь к вашей картинке */
    background-size: cover; /* Заставляет картинку покрывать весь элемент */
    background-position: center; /* Центрирует картинку */
    background-repeat: no-repeat; /* Не повторяет картинку */
    padding: 50px 0; /* Отступы сверху и снизу */
}

.container2 {
    max-width: 1200px; /* Максимальная ширина контейнера */
    margin: 0 auto; /* Центрируем контейнер */
    padding: 0 15px; /* Отступы по бокам */
}

.section-title2 {
    text-align: center; /* Центрируем заголовок */
    font-size: 2.5rem; /* Размер шрифта заголовка */
    margin-bottom: 30px; /* Отступ снизу */
    color: white; /* Цвет текста */
}

.steps-list2 {
    display: flex; /* Используем flexbox для расположения шагов */
    flex-direction: row; /* Располагаем шаги горизонтально */
    gap: 60px; /* Отступ между шагами и стрелочками */
    justify-content: center; /* Центрируем шаги по горизонтали */
    flex-wrap: wrap; /* Позволяем переносить шаги на следующую строку */
}

.step2 {
    background-color: rgba(255, 255, 255, 0.8); /* Полупрозрачный белый фон для каждого шага */
    border-radius: 8px; /* Скругленные углы */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Легкая тень */
    padding: 60px 20px 20px; /* Отступы (сверху больше для кружка) */
    display: flex; /* Используем flexbox для расположения номера и описания */
    align-items: center; /* Центрируем содержимое по вертикали */
    justify-content: center; /* Центрируем содержимое по горизонтали */
    flex-direction: column; /* Располагаем элементы вертикально */
    transition: transform 0.3s; /* Плавный переход при наведении */
    min-height: 180px; /* Минимальная высота блока для подгонки под текст */
    width: 200px; /* Установим фиксированную ширину для всех блоков */
    position: relative; /* Позволяет использовать абсолютное позиционирование внутри блока */
}

.step2:hover {
    transform: scale(1.05); /* Увеличение блока при наведении */
}

.step-number2 {
    background-color: black; /* Цвет фона для кружка */
    color: white; /* Цвет текста кружка */
    border-radius: 50%; /* Кружок */
    width: 40px; /* Ширина кружка */
    height: 40px; /* Высота кружка */
    display: flex; /* Используем flexbox для центрирования текста */
    align-items: center; /* Вертикальное выравнивание */
    justify-content: center; /* Горизонтальное выравнивание */
    position: absolute; /* Абсолютное позиционирование */
    top: -20px; /* Поднимаем кружок вверх на половину его высоты */
}

.step-description2 h3 {
    margin: 0; /* Убираем отступы у заголовка */
    color: black; /* Цвет заголовка */
    text-align: center; /* Центрируем заголовок */
}

.step-description2 p {
    margin: 5px 0 0; /* Отступы для описания */
    color: black; /* Цвет текста описания */
    text-align: center; /* Центрируем текст описания */
    word-wrap: break-word; /* Позволяем переносить длинные слова на новую строку */
    overflow-wrap: break-word; /* Обеспечивает перенос слов */
    max-width: 100%; /* Устанавливаем максимальную ширину для текста */



/* Адаптивный дизайн для мобильных устройств */
@media (max-width: 768px) {
    .steps-list2 {
        flex-direction: row; /* Оставляем горизонтальное расположение для мобильных */
        justify-content: space-around; /* Распределение шагов */
    }

    .step2 {
        width: 150px; /* Уменьшаем ширину шагов для мобильных */
        min-height: 150px; /* Минимальная высота блока */
        padding: 40px 10px; /* Уменьшаем отступы */
    }

    .step-number2 {
        width: 30px; /* Уменьшаем размер кружка */
        height: 30px; /* Уменьшаем размер кружка */
        font-size: 14px; /* Уменьшаем размер шрифта в кружке */
    }

    .step-description2 h3 {
        font-size: 1.5rem; /* Уменьшаем размер заголовка */
    }

    .step-description2 p {
        font-size: 0.9rem; /* Уменьшаем размер текста описания */
    }
}
    /* ЭТАПЫ РАБОТ И ТД И ТП */






    /* ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ */

}
.faq-container {
max-width: 600px;
margin: auto;
padding: 15px; /* Отступы для контейнера */
background-color: rgba(255, 255, 255, 0.1); /* Светлый фон */
border-radius: 10px; /* Скругленные углы */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Легкая тень */
}

.faq-item {
margin-bottom: 5px; /* Уменьшаем отступ между элементами */
}

.faq-question {
    background-color: rgba(224, 224, 224, 0.3); /* Прозрачный серый фон для вопросов */
    padding: 10px; /* Уменьшаем отступы для вопросов */
    border-radius: 5px; /* Скругляем углы вопросов */
    cursor: pointer; /* Указываем, что элемент кликабельный */
    display: flex; /* Используем флекс для выравнивания */
    justify-content: space-between; /* Распределяем пространство между элементами */
    align-items: center; /* Центрируем элементы по вертикали */
}
.faq-answer {
max-height: 0; /* Скрываем ответ по умолчанию */
overflow: hidden; /* Скрываем переполнение */
padding: 0 10px; /* Отступы для ответов */
border-left: 3px solid #007bff; /* Слева добавляем цветную линию */
background-color: rgba(255, 255, 255, 0); /* Светло-серый фон для ответов */
margin-top: 5px; /* Отступ сверху для ответа */
border-radius: 5px; /* Скругляем углы ответов */
transition: max-height 0.5s ease; /* Плавный переход для высоты */
}

.faq-answer.open {
max-height: 200px; /* Устанавливаем максимальную высоту при открытии */
}

.arrow1 {
    font-size: 18px; /* Размер стрелочки */
    transition: transform 0.3s ease; /* Плавный переход для анимации */
    margin-left: auto; /* Прижимаем стрелочку к правому краю */
}

.faq-question.active .arrow1 {
    transform: rotate(90deg); /* Поворачиваем стрелочку при открытом ответе */
}
/* ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ */






/* СЛАЙДЕР ПО 3 ФОТО*/
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: transparent; /* Прозрачный фон для всего тела */
}

.custom-slider-container {
    padding: 40px 0; /* Добавляем отступы сверху и снизу */
    width: 100%;
    position: relative;
    overflow: hidden;
    background-color: transparent; /* Убираем фон контейнера слайдера */
}

.custom-slider {
    display: flex;
    transition: transform 0.5s ease;
}

.custom-slide {
    display: flex; /* Для отображения 3 изображений в одном слайде */
    min-width: 100%; /* Каждый слайд занимает 100% контейнера */
    box-sizing: border-box;
    background-color: transparent; /* Убираем фон слайдов */
}

.custom-image {
    height: 150px; /* Высота изображения */
    width: 30%; /* Увеличиваем ширину каждого изображения - 1/3 от слайда */
    background-size: cover;
    background-position: center;
    position: relative;
    transition: transform 0.3s ease;
    margin: 0 2%; /* Увеличиваем отступы между изображениями */
    border-radius: 30px; /* Закругление углов изображений */
}

.custom-image:hover {
    transform: scale(1.3); /* Увеличение при наведении */
}

.custom-info {
    position: center;
    bottom: 7px;
    left: 7px;
    color: white;
    background: rgba(0, 0, 0, 0.5); /* Полупрозрачный фон для текста */
    padding: 1px;
    border-radius: 10px;
}

.custom-arrow {
    position: absolute;
    top: 65%;
    transform: translateY(-10%);
    background: rgba(255, 255, 255, 0.5);
    border: none;
    padding: 10px;
    cursor: pointer;
    border-radius: 50%;
    z-index: 10;
    transition: background 0.2s, transform 0.2s;
}

.left-custom-arrow {
    left: 20px;
}

.right-custom-arrow {
    right: 20px;
}

.custom-arrow:hover {
    background: rgba(255, 255, 255, 0.6); /* Более светлый фон при наведении */
    transform: scale(1.1); /* Увеличение при наведении */
        outline: none; /* Убираем обводку при фокусе */

}


.custom-dots-container {
    text-align: center;
    margin-top: 1px;
}

.custom-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: gray;
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
}

.custom-dot.active {
    background-color: white; /* Цвет активной точки */
}

/* Адаптивный дизайн для мобильных устройств */
@media (max-width: 768px) {
    .custom-image {
        width: 45%; /* Увеличиваем ширину изображения на мобильных */
        margin: 0 2.5%; /* Увеличиваем отступы между изображениями */
    }

    .custom-slider {
        flex-direction: row; /* Слайдер по-прежнему в строчном направлении */
    }

    .custom-slider-container {
        padding: 20px 0; /* Уменьшаем отступы контейнера для мобильных */
    }
}





/* СЛАЙДЕР ПО 3 ФОТО*/





/* СЛАЙДЕР ПО 3 ФОТО №2*/
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: transparent; /* Прозрачный фон для всего тела */
}

.custom-slider-container2 {
    padding: 40px 0; /* Добавляем отступы сверху и снизу */
    width: 100%;
    position: relative;
    overflow: hidden;
    background-color: transparent; /* Убираем фон контейнера слайдера */
}

.custom-slider2 {
    display: flex;
    transition: transform 0.5s ease;
}

.custom-slide2 {
    display: flex; /* Для отображения 3 изображений в одном слайде */
    min-width: 100%; /* Каждый слайд занимает 100% контейнера */
    box-sizing: border-box;
    background-color: transparent; /* Убираем фон слайдов */
}

.custom-image2 {
    height: 150px; /* Высота изображения */
    width: 32%; /* Ширина каждого изображения - 1/3 от слайда */
    background-size: cover;
    background-position: center;
    position: relative;
    transition: transform 0.3s ease;
    margin: 0 1%; /* Убираем отступы, добавляем небольшие отступы между изображениями */
    border-radius: 30px; /* Закругление углов изображений */
}

.custom-image2:hover {
    transform: scale(1.3); /* Увеличение при наведении */
}


.custom-info2 {
    position: center;
    bottom: 7px;
    left: 7px;
    color: white;
    background: rgba(0, 0, 0, 0.5); /* Полупрозрачный фон для текста */
    padding: 1px;
    border-radius: 10px;
}

.custom-arrow2 {
    position: absolute;
    top: 65%;
    transform: translateY(-10%);
    background: rgba(255, 255, 255, 0.5);
    border: none;
    padding: 10px;
    cursor: pointer;
    border-radius: 50%;
    z-index: 10;
    transition: background 0.2s, transform 0.2s;
}


.left-custom-arrow2 {
    left: 20px;
}

.right-custom-arrow2 {
    right: 20px;
}

.custom-arrow2:hover {
    background: rgba(255, 255, 255, 0.6); /* Более светлый фон при наведении */
    transform: scale(1.3); /* Увеличение при наведении */
    outline: none; /* Убираем обводку при фокусе */

}

.custom-button2 {
    background-color: transparent; /* Прозрачный фон для кнопки */
    border: 2px solid rgba(255, 255, 255, 0.8); /* Полупрозрачная рамка */
    color: #fff; /* Белый текст */
    padding: 10px 15px; /* Отступы */
    font-size: 16px; /* Размер шрифта */
    cursor: pointer; /* Указатель при наведении */
    margin-top: 10px; /* Отступ сверху */
    transition: background-color 0.3s, color 0.3s; /* Плавный переход цвета */
}

.custom-button2:hover {
    background-color: rgba(255, 255, 255, 0.2); /* Легкая непрозрачность при наведении */
    color: #ffffff; /* Темный текст при наведении */
    outline: none; /* Убираем обводку при фокусе */

}

.custom-dots-container2 {
    text-align: center;
    margin-top: 10px;
}

.custom-dot2 {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: gray;
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
}

.custom-dot2.active2 {
    background-color: white; /* Цвет активной точки */
}

/* Адаптивный дизайн для мобильных устройств */
@media (max-width: 768px) {
    .custom-image2 {
        width: 32%; /* Устанавливаем ширину изображения на 1/3 от слайда для мобильных */
        margin: 0 1%; /* Убираем отступы между изображениями */
    }


    .custom-slider2 {
        flex-direction: row; /* Слайдер по-прежнему в строчном направлении */
    }
    .custom-slider2 {
        flex-direction: row; /* Слайдер по-прежнему в строчном направлении */
    }

    .custom-slider-container2 {
        padding: 20px 0; /* Уменьшаем отступы контейнера для мобильных */
    }
}
/* СЛАЙДЕР ПО 3 ФОТО №2*/





.welcome-container {
    display: flex; /* Используем флекс для выравнивания элементов */
    align-items: center; /* Центрируем элементы по вертикали */
    justify-content: center; /* Центрируем элементы по горизонтали */
    padding: 20px; /* Отступы для контейнера */
    background-color: transparent; /* Прозрачный фон */
    border-radius: 10px; /* Скругленные углы */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Легкая тень */
    overflow: hidden; /* Скрываем переполнение */
    flex-direction: column; /* Вертикальная компоновка для мобильных устройств */
}

.welcome-image {
    width: 50%; /* Ширина изображения на 100% для мобильных устройств */
    max-width: 400px; /* Максимальная ширина для больших экранов */
    height: auto; /* Автоматическая высота */
    animation: slideIn 2s forwards; /* Анимация для изображения */
}

.welcome-text {
    margin-left: 0; /* Убираем отступ слева для текста на мобильных */
    margin-top: 20px; /* Добавляем отступ сверху для мобильных */
    opacity: 0; /* Начальная прозрачность текста */
    animation: fadeIn 1s forwards 2s; /* Анимация появления текста с задержкой */
    font-family: 'Roboto', sans-serif; /* Применяем шрифт Roboto */
    text-align: center; /* Центрируем текст */
}

h2 {
    font-weight: 700; /* Жирный шрифт для заголовка */
    margin: 0; /* Убираем отступы */
    font-size: 1.5rem; /* Размер шрифта заголовка */
}

p {
    font-weight: 400; /* Обычный шрифт для параграфа */
    margin: 0; /* Убираем отступы */
    font-size: 1rem; /* Размер шрифта для текста */
}

@keyframes slideIn {
    from {
        transform: translateX(-100%); /* Начальная позиция за пределами контейнера */
        opacity: 0; /* Полная прозрачность */
    }
    to {
        transform: translateX(0); /* Конечная позиция */
        opacity: 1; /* Полная видимость */
    }
}

@keyframes fadeIn {
    to {
        opacity: 1; /* Полная видимость текста */
    }
}

/* Адаптивный дизайн для мобильных устройств */
@media (max-width: 768px) {
    .welcome-container {
        padding: 10px; /* Уменьшаем отступы для мобильных устройств */
    }

    h2 {
        font-size: 1.4rem; /* Уменьшаем размер шрифта заголовка */
    }

    p {
        font-size: 0.9rem; /* Уменьшаем размер шрифта для текста */
    }
}


<<<<<<< HEAD
=======



>>>>>>> 2a0293a