---

body{margin:0;font-family:'Montserrat',sans-serif;background:#f2f2f2;color:#333}
.container{width:1200px;max-width:95%;margin:auto}


.header {
    position: fixed;
    width: 100vw; /* Полная ширина экрана */
    z-index: 100;
    font-size: 14px;
}


/* Верхняя панель */
.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    color: #fff;
    background: rgba(0,0,0,0.7);
    border-top: 1px solid rgba(255,255,255,0.1);
}


/* Логотип */
.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
}


/* Форма поиска */
.header-search {
    display: flex;
    align-items: center;
    gap: 10px;
}


.header-search input {
    padding: 8px 15px;
    border: none;
    border-radius: 5px 0 0 5px;
    background: rgba(173, 173, 173, 0.384);
    color: #fff;
}


.header-search button {
    padding: 8px 15px;
    border: none;
    border-radius: 0 5px 5px 0;
    background: #969696;
    color: #fff;
    cursor: pointer;
}


/* Контактная информация */
.header-info {
    display: flex;
    gap: 20px;
    font-size: 12px;
}


/* Нижний блок меню */
.nav-bar {
    background: rgba(0,0,0,0.8);
    border-top: 1px solid rgba(255,255,255,0.1);
}


.nav {
    display: flex;
    justify-content: center;
    gap: 30px;
    padding: 10px 20px;
}


.nav a {
    color: #fff;
    text-decoration: none;
    padding: 12px 15px;
    transition: 0.3s;
}


.nav a:hover {
    background: #c89b3c;
}


.nav .active {
    background: #c89b3c;
}


/* Удаляем ограничение максимальной ширины для верхней панели */
.header-top {
    max-width: none;
    width: 100vw;
    margin: 0;
}


/* Сохраняем ограничение ширины только для нижнего меню */
.nav-bar .container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}


.krug{
    text-align: center;
    position: relative;
    top: -50px; /* сдвиг вверх на 10 пикселей */
}




.hero{height:100vh;background:url('https://kurgan.studio-mint.ru/sites/default/files/styles/kartinka_stranica_diz_pro/public/house.jpg') center/cover no-repeat;position:relative}
.hero-overlay{position:absolute;width:100%;height:100%;background:rgba(0,0,0,0.6)}
.hero-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:#fff}
.hero h1{font-size:42px;line-height:1.4}


.btn{background:#c89b3c;border:none;color:#fff;padding:12px 25px;margin-top:15px;cursor:pointer}
.btn.center{display:block;margin:40px auto}
.btn.small{padding:8px 14px;font-size:12px}


.products {
    padding: 80px 0;
    text-align: center;
    position: relative; /* Позволяет размещать элементы поверх фона */
}


.products h2 {
    color: #c89b3c;
    margin-bottom: 40px;
}


.products u {
    color: #c89b3c;
    margin-bottom: 40px;
}
/* Создание фонового узора из четырех изображений */
:root {
    /* Переменные для управления каждым изображением */
    --img1-x: 1%; /* Левое верхнее изображение */
    --img1-y: 15%;


    --img2-x: 58%; /* Правое верхнее изображение */
    --img2-y: 15%;


    --img3-x: 1%; /* Левое нижнее изображение */
    --img3-y: 73%;


    --img4-x: 58%; /* Правое нижнее изображение */
    --img4-y: 73%;
}


.products::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTcUx7l60knbucbq66dpCvTTozXhxdKLP4SWg&s'), /* Левое верхнее */
        url('https://zcc.ru/upload/collections/9d6836da-fae6-11e9-80eb-ac1f6b68d552.jpeg'), /* Правое верхнее */
        url('https://website-duneceramics.s3.eu-central-1.amazonaws.com/Dune/public/azulejos-efecto-artesanal-1776864387jTKUs.jpg'), /* Левое нижнее */
        url('https://kurgan.studio-mint.ru/sites/default/files/styles/kartinka_stranica_diz_pro/public/house.jpg'); /* Правое нижнее */
    background-size: 15% 25%; /* Размер каждого изображения */
    background-position:
        var(--img1-x) var(--img1-y), /* Левое верхнее */
        var(--img2-x) var(--img2-y), /* Правое верхнее */
        var(--img3-x) var(--img3-y), /* Левое нижнее */
        var(--img4-x) var(--img4-y); /* Правое нижнее */
    background-repeat: no-repeat;
    z-index: -1; /* Фоновый рисунок под всеми элементами */
}


/* Основная сетка продуктов */
.products-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 150px;
    margin-top: 10px;
    justify-items: center;
}


.product {
    display: flex; /* Гибкая структура */
    background: rgba(255,255,255,0.9); /* Полупрозрачный фон */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    max-width: 900px;
    padding: 30px;
    border-radius: 5px;
    margin-right: 50px; /* Отводим вправо */
    text-align: left; /* Выравнивание текста */
}


.product img {
    width: 100px; /* Размер изображения */
    height: 100px;
    border-radius: 50%; /* Круглое изображение */
    margin-right: 20px; /* Отступ справа */
    order: -1; /* Ставим изображение первым элементом */
}


.product-text {
    width: 100%; /* Занимает всю ширину карточки */
}


.product-text h3 {
    color: #c89b3c;
    font-size: 18px;
    margin-bottom: 10px;
}


.product-text span {
    color: #c89b3c;
    font-size: 14px;
    display: block; /* Новая строка */
    margin-top: 300px;
}


.btn.center {
    display: block;
    margin: 40px auto;
}
.features{padding:60px 0}
.features-row{display:flex;align-items:center}
.features-row img{width:60%}
.features-box{background:#fff;padding:30px;border:1px solid #c89b3c}
.features-box h3{color:#c89b3c
    }








.types{padding:60px 0;text-align:center}
.types h2{color:#c89b3c}
.types u{color:#c89b3c}
.types-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Ровно два столбца */
    grid-template-rows: repeat(4, 1fr); /* Ровно четыре ряда */
    gap: 100px; /* Увеличили интервал между карточками */
    margin-top: 80px;
}


.type {
    background: #fff;
    padding: 15px;
    position: relative; /* Позволяет позиционировать аватар вне рамки */
    display: flex;
    flex-direction: column; /* Размещаем элементы вертикально */
    align-items: flex-start; /* Выравниваем по левому краю */
}


.type img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    position: absolute; /* Позиция абсолютная */
    left: -30px; /* Частично выводим за левую границу */
    top: 50%;
    transform: translateY(-50%); /* По центру по высоте */
    box-shadow: 0 2px 10px rgba(0,0,0,0.2); /* Тонкая лёгкая тень */
}


.type-name { /* Заголовок */
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
}


.type-description { /* Описание */
    font-size: 14px;
    color: #333;
    margin-bottom: 10px;
}


.more { /* Слово "Подробнее" */
    color: #c89b3c; /* Жёлтый цвет */
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}


.more:hover { /* Наведение мыши */
    text-decoration: underline;
}
.type p {
    margin: 0;
    font-size: 14px;
    color: #333;
    text-align: left; /* Выравниваем текст по левому краю */
    padding-left: 180px; /* Чтобы текст не накладывался на аватар */
}


.type span {
    margin: 0;
    font-size: 14px;
    color: #c89b3c;
    text-align: left; /* Выравниваем текст по левому краю */
    padding-left: 180px; /* Чтобы текст не накладывался на аватар */
}


.type h3 {
    margin: 0;
    font-size: 14px;
    color: #333;
    text-align: left; /* Выравниваем текст по левому краю */
    padding-left: 120px; /* Чтобы текст не накладывался на аватар */
}


.info{padding:60px 0;text-align:center}
.info h2{color:#c89b3c}
.info u{color:#c89b3c}
.info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Три колонки */
    gap: 30px; /* Увеличили промежутки между карточками */
    margin-top: 40px;
}


.info-card {
    position: relative; /* Позволяет размещать элементы поверх изображения */
    background: #fff;
    overflow: hidden; /* Скрывает выходящие за края элементы */
}


.card-content { /* Контент поверх изображения */
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%); /* Центрирование по середине */
    text-align: center;
    color: #fff; /* Цвет текста белый */
    background: rgba(0, 0, 0, 0); /* Полупрозрачный тёмный фон */
    padding: 10px 20px;
    border-radius: 5px;
}


.date { /* Дата */
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 5px;
}


.title { /* Заголовок */
    font-size: 70px;
    font-weight: bold;
    margin: 0;
}


.info-card img {
    width: 100%;
    vertical-align: middle;
}
.info-text{padding:15px}
.info-text span{color:#c89b3c;font-weight:700}






.consultation-block {
    display: flex; /* Гибкая структура */
    align-items: center; /* Вертикальное выравнивание */
    background: #e0e0e0; /* Нежный фон */
    padding: 50px;


    max-width: 2500px; /* Максимальная ширина */
    margin: 10px auto; /* Центровка по горизонтали */
}


.consultation-content {
    flex-grow: 1; /* Занимает свободное пространство */
}


.consultation-content h3 {
    color: #333;
    font-size: 18px;
   
}


.consultation-content u {
    color: #c89b3c;
   
   
}


.consultation-content p {
    color: #666;
    font-size: 14px;
    line-height: 1.4;
}


.consultation-btn {
    background: #c89b3c; /* Яркий оранжевый цвет */
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}


.consultation-btn:hover {
    background: #b38226; /* Более насыщенный оттенок при наведении */
}












.footer {
    background-image:url(https://i.pinimg.com/originals/8b/76/28/8b762865c0515d2d5d625f075f762b18.jpg?nii=t);
   
    color: #fff;
    padding: 40px 0;
    text-align: center;
}


.company-info {
   
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}


.logo {
    width: 100px; /* Размер логотипа по желанию */
    height: auto;
    margin-bottom: 10px;
}


.separator {
    border: none;
    border-top: 1px solid #555; /* Тонкая светло-серебряная линия */
    width: 50%; /* Линия средней длины */
    margin: 20px auto; /* Равномерные отступы */
}


.contact-info p {
    margin: 5px 0;
}