/* Сброс box-model, чтобы padding и border входили в размеры элементов */
* {
    box-sizing: border-box;
}

/* Базовые стили страницы */
body {
    margin: 0; /* убираем стандартные отступы браузера */
    font-family: Arial, sans-serif; /* основной шрифт */
    background: #f8faf8; /* цвет фона страницы */
}

/* Общие стили ссылок */
a {
    text-decoration: none; /* убираем подчеркивание */
    color: inherit; /* цвет наследуется от родителя */
}

/* Ограничивающий контейнер для контента */
.container {
    width: 1200px; /* максимальная ширина */
    max-width: 90%; /* адаптация под маленькие экраны */
    margin: auto; /* центрирование */
}

/* ================= HEADER ================= */
.header {
    background: #186245; /* фон шапки */
    padding: 5px 0; /* вертикальные отступы */
}

/* Внутренний flex-контейнер шапки */
.header-inner {
    display: flex; /* горизонтальное расположение */
    justify-content: space-between; /* разнос элементов */
    align-items: center; /* вертикальное выравнивание */
    padding: 0 20px; /* внутренние отступы */
    max-width: 1200px; /* ограничение ширины */
    margin: 0 auto; /* центрирование */
}

/* Обёртка логотипа */
.logo a {
    display: inline-block; /* чтобы работал transform */
    transition: transform 0.3s ease; /* плавное увеличение */
}

/* Hover-эффект логотипа */
.logo a:hover {
    transform: scale(1.1); /* увеличение */
}

/* Размер изображения логотипа */
.logo-img {
    height: 100px; /* фиксированная высота */
    display: block; /* убираем лишние отступы */
}

/* Меню - занимает всё доступное пространство между лого и соцсетями */
.menu {
    display: flex;
    justify-content: center; /* центрируем меню */
    flex: 1; /* занимает всё доступное пространство */
    margin: 0 40px; /* отступы от лого и соцсетей */
}

/* Ссылки меню */
.menu a {
    color: white; /* цвет текста */
    margin: 0 15px; /* расстояние между пунктами */
    font-size: clamp(20px, 1.2vw, 25px); /* адаптивный размер */
    transition: 0.3s; /* плавность эффектов */
    text-decoration: none; /* убираем подчеркивание */
    font-weight: 500; /* средняя жирность */
}

/* Соцсети в шапке */
.header-social {
    display: flex;
    align-items: center;
    gap: 15px; /* расстояние между иконками */
}

/* Иконки соцсетей в шапке */
.header-social .social-icon {
    width: 32px; 
    height: 32px;
    transition: transform 0.3s ease;
    opacity: 0.9;
}

/* Hover иконок в шапке */
.header-social .social-icon:hover {
    transform: scale(1.2);
    opacity: 1;
}

/* Общие hover-эффекты для меню и кнопки "Наверх" */
.menu a,
.footer-right a {
    display: inline-block; /* для transform */
    transition: transform 0.3s ease, color 0.3s ease;
}

/* Hover-состояние ссылок меню */
.menu a:hover,
.footer-right a:hover {
    color: #a8cdb6; /* светло-зелёный */
    transform: scale(1.05); /* лёгкое увеличение */
}

@media (max-width: 768px) {
    /* Стили для мобильных устройств (ширина до 768px) */
    
    .header-inner {
        flex-wrap: wrap;          /* Разрешаем перенос элементов на новые строки */
        justify-content: center;  /* Центрируем все элементы по горизонтали */
        padding: 10px;            /* Уменьшаем внутренние отступы на мобильных */
    }
    
    .logo {
        width: 100%;              /* Логотип занимает всю ширину контейнера */
        text-align: center;       /* Центрируем логотип по горизонтали */
        margin-bottom: 15px;      /* Отступ снизу перед следующими элементами */
    }
    
    .logo-img {
        height: 80px;             /* Уменьшаем высоту логотипа для мобильных */
    }
    
    .menu {
        order: 2;                 /* Меню будет вторым по порядку */
        width: 100%;              /* Меню занимает всю ширину */
        margin: 15px 0;           /* Вертикальные отступы сверху и снизу */
        justify-content: center;  /* Центрируем пункты меню */
        flex-wrap: wrap;          /* Разрешаем перенос пунктов меню на несколько строк */
    }
    
    .menu a {
        margin: 5px 10px;         /* Уменьшаем отступы между пунктами меню */
        font-size: 14px;          /* Уменьшаем размер шрифта для мобильных */
    }
    
    .header-social {
        order: 3;                 /* Соцсети будут третьим по порядку*/
    }
}

/* ================= HERO ================= */
.hero {
    position: relative; /* для псевдоэлемента */
    min-height: 100vh; /* высота экрана */
    background: url("../images/background2.jpg") center / cover no-repeat fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* скрываем лишнее */
}

/* Затемнение поверх фонового изображения */
.hero::before {
    content: "";
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.45); /* затемнение */
    z-index: 1;
}

/* Контент поверх затемнения */
.hero-overlay {
    position: relative;
    z-index: 2; /* выше затемнения */
    color: white;
    text-align: center;
    padding: 40px 20px;
    max-width: 90%;
    width: 800px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 50px; /* расстояние между элементами */
}

/* Заголовок hero */
.hero h1 {
    font-size: clamp(32px, 5vw, 56px);
    line-height: 1.2;
    margin: 0;
    word-break: break-word;
}

/* Текст hero */
.hero p {
    font-size: clamp(18px, 1.5vw, 22px);
    margin: 0;
}

/* Контейнер кнопок */
.hero-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 30px;
}

/* ================= КНОПКИ ================= */
.btn, .btn-outline {
    cursor: pointer;
    font-weight: 500;
    text-decoration: none;
    border-radius: 5px;
    padding: 12px 25px;
    background-color: transparent;
    color: white;
    border: 2px solid white;
    transition: all 0.3s ease;
}

/* Hover-эффект кнопок */
.btn:hover, .btn-outline:hover {
    background-color: #18A370;
    color: white;
    border-color: #18A370;
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}

/* ================= TEXT BLOCK ================= */
.text-block {
    text-align: center;
    padding: 60px 20px;
}

/* Специальный блок перед FAQ */
.faq-text-block {
    padding-bottom: 0;
}

/* Заголовки секций */
.text-block h2 {
    font-size: clamp(20px, 3vw, 30px);
    line-height: 1.3;
    margin: 0;
}

/* ================= PROJECTS ================= */
.projects {
    margin: 0;
}

/* Сетка проектов */
.project-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 50vh);
    gap: 0;
    width: 100vw;
    height: 100vh;
}

/* Карточка проекта */
.project-card {
    position: relative;
    overflow: hidden;
}

/* Изображение проекта */
.project-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

/* Увеличение изображения при hover */
.project-card:hover img {
    transform: scale(1.05);
}

/* Затемнение и текст поверх карточки */
.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.4s ease;
    text-align: center;
    padding: 20px;
}

/* Появление overlay */
.project-card:hover .card-overlay {
    opacity: 1;
}

/* Заголовок карточки */
.card-overlay h3 {
    margin: 0 0 15px 0;
    font-size: clamp(20px, 2vw, 28px);
}

/* Кнопка в карточке */
.card-overlay .btn-card {
    margin-top: 10px;
	background-color: transparent;
    color: white;
    border: 2px solid white;
    border-radius: 25px;
    padding: 10px 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    font-weight: 500;
}

/* Hover кнопки карточки */
.card-overlay .btn-card:hover {
    background-color: #18A370;
    border-color: #18A370;
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}


/* ================= ADVANTAGES ================= */
.advantages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    justify-items: center;
    text-align: center;
}

.advantage {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.advantage img {
    height: 80px;
}

/* ================= FAQ ================= */
.faq {
    background: #f0f5f0;
    padding: 40px 0;
}

/* Контейнер FAQ */
.faq .container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

/* Ограничение ширины контента FAQ */
.faq-content {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

/* Заголовок FAQ */
.faq h2 {
    text-align: center;
    margin-bottom: 30px;
    font-size: clamp(24px, 3vw, 32px);
}

/* Вопрос FAQ */
.faq-item {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 15px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* Заголовок вопроса */
.faq-question {
    font-weight: 600;
    font-size: 18px;
    padding-right: 30px;
    position: relative;
}

/* Иконка + / − */
.faq-question::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 0;
    font-size: 24px;
    font-weight: 300;
    transition: transform 0.3s;
}

/* Активное состояние */
.faq-item.active .faq-question::after {
    content: '−';
    transform: rotate(180deg);
}

/* Ответ FAQ */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    padding-top: 0;
    margin-top: 0;
    border-top: 1px solid #eee;
    transition: max-height 0.4s ease, padding-top 0.4s ease, margin-top 0.4s ease;
}

/* Списки внутри ответа */
.faq-answer ul {
    list-style: disc inside;
    margin: 10px 0;
    padding-left: 15px;
}

.faq-answer li {
    margin-bottom: 8px;
    line-height: 1.5;
}

/* Подзаголовки в FAQ */
.faq-title {
    font-weight: 600;
    display: block;
    margin-top: 15px;
    margin-bottom: 5px;
    color: #186245;
}

/* Открытое состояние ответа */
.faq-item.active .faq-answer {
    max-height: 2000px;
    padding-top: 15px;
    margin-top: 15px;
}

/* ================= FOOTER ================= */
.footer {
    background: #186245;
    color: white;
    padding: 30px 20px;
}

/* Контейнер подвала */
.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
}

/* Левая и правая части */
.footer-left, .footer-right {
    text-align: center;
    margin: 10px 0;
}

/* Ссылки подвала */
.footer a {
    color: white;
    text-decoration: none;
    margin: 0 5px;
    transition: color 0.3s;
}

/* Hover ссылок */
.footer a:hover {
    color: #a8cdb6;
}

/* Иконки соцсетей */
.social-icon {
    width: 30px;
    height: 30px;
    transition: transform 0.3s;
    vertical-align: middle;
}

/* Hover иконок */
.social-icon:hover {
    transform: scale(1.2);
}

/* Заголовок соцсетей */
.footer-left b {
    display: block;
    margin-bottom: 10px;
    font-size: 16px;
}

/* Отступы между иконками */
.social-icons a {
    margin: 0 5px;
}

/* Плавная прокрутка */
html {
    scroll-behavior: smooth;
}


/* ================= CATALOG PAGE ================= */
.catalog-page {
    background: #f8faf8;
    min-height: 100vh;
}

.catalog-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* ================= FILTERS PANEL ================= */
.filters-panel {
    background: white;
    padding: 25px;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
    margin-bottom: 30px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.filters-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid #186245;
}

.filters-header h2 {
    margin: 0;
    color: #186245;
    font-size: 24px;
}

.results-count {
    color: #666;
    font-size: 16px;
    font-weight: 500;
}

/* ================= FILTERS GRID ================= */
.filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
}

.filter-group {
    margin-bottom: 0;
}

.filter-group h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #186245;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ================= FILTER BUTTONS (ИСПРАВЛЕННЫЕ) ================= */
.filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}


/* Фиксированная ширина для всех кнопок фильтров */
.filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px; 
}

.filter-btn {
    background: white;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 10px 16px; /* Увеличить padding */
    cursor: pointer;
    font-size: 14px; /* Вернуть нормальный размер шрифта */
    transition: all 0.3s ease;
    text-align: center;
    white-space: normal; /* Разрешить перенос текста на несколько строк */
    word-break: break-word; /* Переносить длинные слова */
    box-sizing: border-box;
    min-width: 180px; /* Увеличить минимальную ширину */
    max-width: 200px; /* Увеличить максимальную ширину */
    height: auto; /* Автоматическая высота для многострочного текста */
    min-height: 44px; /* Минимальная высота */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    line-height: 1.3; /* Улучшить межстрочный интервал */
}
.filter-btn:hover {
    border-color: #186245;
    color: #186245;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.filter-btn.active {
    background: #186245;
    color: white;
    border-color: #186245;
    box-shadow: 0 4px 8px rgba(24, 98, 69, 0.2);
}

/* Вертикальная раскладка для всех групп фильтров */
.filter-group .filter-options {
    display: flex;
    flex-direction: column; /* ВСЕ кнопки в столбик */
    gap: 8px;
    align-items: flex-start; /* Выравнивание по левому краю */
}

/* Кнопки в столбике занимают всю ширину */
.filter-group .filter-btn {
    width: 80%; /* Занимают всю ширину контейнера */
    max-width: 80%; /* Снимаем ограничение по максимальной ширине */
    min-width: 80%; /* Всегда 100% ширины */
    margin-right: 0;
    text-align: left; /* Текст выровнен по левому краю */
    justify-content: flex-start; /* Контент кнопки слева */
    padding-left: 20px; /* Отступ слева для красоты */
}

/* ================= PRICE RANGE ================= */
.price-range {
    display: flex;
    gap: 10px;
    align-items: center;
}

.price-range input {
    width: 120px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
}

/* ================= FILTER ACTIONS ================= */
.filter-actions {
    display: flex;
    gap: 15px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}

.btn-apply {
    background: #186245;
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: background 0.3s;
}

.btn-apply:hover {
    background: #18A370;
}

.btn-reset {
    background: transparent;
    color: #666;
    border: 1px solid #ddd;
    padding: 12px 30px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s;
    text-decoration: none;
}

.btn-reset:hover {
    border-color: #e53935;
    color: #e53935;
}

/* ================= CATALOG HEADER ================= */
.catalog-header {
    margin-bottom: 30px;
}

.catalog-header h1 {
    color: #186245;
    margin-bottom: 10px;
    font-size: 32px;
}

/* ================= PROJECTS GRID ================= */
.projects-grid-catalog {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-bottom: 40px;
}

/* ================= PRODUCT CARD ================= */
.product-card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e0e0e0;
    transition: box-shadow 0.3s;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.product-image-container {
    position: relative;
    height: 300px;
    overflow: hidden;
}

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

.product-info {
    padding: 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.product-title {
    font-size: 22px;
    font-weight: bold;
    margin: 0 0 15px 0;
    color: #333;
    line-height: 1.3;
    min-height: 56px;
}

/* ================= CATEGORY TAGS (КЛИКАБЕЛЬНЫЕ) ================= */
.category-tags {
    margin-bottom: 15px;
}

.category-tag {
    display: inline-block;
    background: #e3f2fd;
    color: #1976d2;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    margin-right: 8px;
    margin-bottom: 8px;
    text-decoration: none;
    transition: all 0.3s;
    cursor: pointer;
    border: 1px solid transparent;
}

.category-tag:hover {
    background: #1976d2;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(25, 118, 210, 0.2);
    text-decoration: none;
}

.product-meta {
    color: #666;
    font-size: 14px;
    margin: 8px 0;
    display: flex;
    align-items: center;
    gap: 15px;
}

.product-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* ================= PRODUCT PRICE ================= */
.product-price {
    font-size: 28px;
    font-weight: bold;
    color: #333;
    margin: 20px 0;
}

/* ================= PRODUCT BUTTONS ================= */
.product-buttons {
    display: flex;
    gap: 15px;
    margin-top: auto;
    padding-top: 20px;
}

.product-buttons .btn {
    flex: 1;
    text-align: center;
    padding: 14px;
    font-size: 16px;
    text-decoration: none;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.product-buttons .btn-outline {
    background-color: transparent;
    color: #186245;
    border: 2px solid #186245;
}

.product-buttons .btn-outline:hover {
    background-color: #186245;
    color: white;
}

.product-buttons .btn {
    background-color: #186245;
    color: white;
    border: 2px solid #186245;
}

.product-buttons .btn:hover {
    background-color: #18A370;
    border-color: #18A370;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* ================= PAGINATION ================= */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 40px 0;
    flex-wrap: wrap;
}

.pagination a, .pagination span {
    display: inline-block;
    padding: 10px 16px;
    border: 1px solid #ddd;
    border-radius: 5px;
    text-decoration: none;
    color: #333;
    transition: all 0.3s;
    min-width: 40px;
    text-align: center;
}

.pagination a:hover {
    background-color: #f0f5f0;
    border-color: #186245;
}

.pagination .current {
    background-color: #186245;
    color: white;
    border-color: #186245;
}

.pagination .prev-next {
    font-weight: bold;
}

.pagination .disabled {
    color: #aaa;
    cursor: not-allowed;
    border-color: #eee;
}

.pagination .disabled:hover {
    background-color: transparent;
    border-color: #eee;
}

/* ================= NO RESULTS ================= */
.no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 80px 20px;
    color: #666;
}

.no-results p {
    font-size: 20px;
    margin-bottom: 25px;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 1100px) {
    .projects-grid-catalog {
        grid-template-columns: 1fr;
        max-width: 600px;
        margin: 0 auto 40px;
    }
}

@media (max-width: 768px) {
    .catalog-container {
        padding: 20px 15px;
    }
    
    .filters-grid {
        grid-template-columns: 1fr;
    }
    
    .price-range {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .price-range input {
        width: 100%;
    }
    
    .filter-actions {
        flex-direction: column;
    }
    
    /* Адаптивность для кнопок фильтров */
    .filter-btn {
        min-width: 160px;
        max-width: 160px;
        height: 40px;
        padding: 10px 15px;
        font-size: 13px;
    }
    
    .filter-btn:not(:first-child) {
        flex: 0 0 calc(50% - 5px);
    }
    
    .product-image-container {
        height: 250px;
    }
    
    .product-buttons {
        flex-direction: column;
    }
    
    .product-buttons .btn {
        padding: 12px;
    }
    
    .pagination {
        gap: 5px;
    }
    
    .pagination a, .pagination span {
        padding: 8px 12px;
        min-width: 35px;
        font-size: 14px;
    }
    
    .filters-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .catalog-header h1 {
        font-size: 28px;
    }
    
    .product-title {
        font-size: 20px;
        min-height: auto;
    }
    
    .product-price {
        font-size: 24px;
    }
}

@media (max-width: 480px) {
    .filters-panel {
        padding: 20px 15px;
    }
    
    .filter-options {
        justify-content: center;
    }
    
    /* На очень маленьких экранах - одна кнопка в строке */
    .filter-btn {
        min-width: 140px;
        max-width: 140px;
        height: 38px;
        padding: 8px 12px;
        font-size: 12px;
    }
    
    .filter-btn:not(:first-child) {
        flex: 0 0 100%; /* На мобильных - одна кнопка в строке */
    }
    
    .projects-grid-catalog {
        gap: 20px;
    }
    
    .product-info {
        padding: 20px;
    }
    
    .category-tag {
        font-size: 12px;
        padding: 4px 8px;
        margin-right: 6px;
        margin-bottom: 6px;
    }
}



/* PROJECT DETAILS */
.project-details {
	max-width: 1200px;
	margin: 40px auto;
	padding: 0 20px;
}

.project-header {
	margin-bottom: 40px;
}

.project-title {
	color: #186245;
	margin-bottom: 15px;
	font-size: 32px;
}

.project-meta {
	display: flex;
	gap: 30px;
	color: #666;
	font-size: 16px;
	margin-bottom: 30px;
}

.project-meta span {
	display: flex;
	align-items: center;
	gap: 8px;
}

.project-price {
	font-size: 36px;
	font-weight: bold;
	color: #000000;
	margin: 30px 0;
}

.project-content {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 40px;
}

@media (max-width: 900px) {
	.project-content {
		grid-template-columns: 1fr;
	}
}

/* ГАЛЕРЕЯ */
.gallery-container {
	position: relative;
	margin-bottom: 40px;
}

.main-image {
	width: 100%;
	height: 500px;
	object-fit: cover;
	border-radius: 10px;
	cursor: pointer;
	transition: transform 0.3s;
}

.main-image:hover {
	transform: scale(1.01);
}

.image-counter {
	position: absolute;
	top: 20px;
	right: 20px;
	background: rgba(0, 0, 0, 0.7);
	color: white;
	padding: 8px 16px;
	border-radius: 20px;
	font-size: 14px;
	z-index: 10;
}

.gallery-controls {
	position: absolute;
	top: 50%;
	width: 100%;
	display: flex;
	justify-content: space-between;
	transform: translateY(-50%);
	padding: 0 20px;
	z-index: 10;
}

.gallery-btn {
	background: rgba(255, 255, 255, 0.9);
	border: none;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s;
	box-shadow: 0 2px 10px rgba(0,0,0,0.2);
	padding: 0;
}

.gallery-btn:hover {
	background: white;
	transform: scale(1.1);
}

.gallery-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.gallery-btn img {
	width: 20px;
	height: 20px;
	filter: invert(26%) sepia(89%) saturate(464%) hue-rotate(122deg) brightness(94%) contrast(90%);
}

.thumbnail-container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	gap: 10px;
	margin-top: 15px;
}

.thumbnail {
	width: 100%;
	height: 80px;
	object-fit: cover;
	border-radius: 5px;
	cursor: pointer;
	transition: all 0.3s;
	border: 2px solid transparent;
}

.thumbnail:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.thumbnail.active {
	border-color: #186245;
	box-shadow: 0 0 0 2px rgba(24, 162, 112, 0.3);
}

/* МОДАЛЬНОЕ ОКНО */
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.9);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	padding: 20px;
}

.modal-overlay.active {
	display: flex;
	animation: fadeIn 0.3s;
}

.modal-image {
	max-width: 90vw;
	max-height: 90vh;
	object-fit: contain;
	border-radius: 5px;
	animation: zoomIn 0.3s;
}

.modal-controls {
	position: absolute;
	top: 20px;
	right: 20px;
	display: flex;
	gap: 10px;
}

.modal-btn {
	background: rgba(255, 255, 255, 0.9);
	border: none;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s;
	padding: 0;
}

.modal-btn:hover {
	background: white;
	transform: scale(1.1);
}

.modal-btn img {
	width: 24px;
	height: 24px;
	filter: invert(26%) sepia(89%) saturate(464%) hue-rotate(122deg) brightness(94%) contrast(90%);
}

.modal-close {
	background: rgba(255, 255, 255, 0.9);
	border: none;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s;
	position: absolute;
	top: 20px;
	right: 20px;
	padding: 0;
}

.modal-close:hover {
	background: white;
	transform: scale(1.1);
}

.modal-close img {
	width: 24px;
	height: 24px;
	filter: invert(36%) sepia(84%) saturate(1551%) hue-rotate(341deg) brightness(97%) contrast(88%);
}

.modal-nav {
	position: absolute;
	top: 50%;
	width: 100%;
	display: flex;
	justify-content: space-between;
	padding: 0 30px;
	transform: translateY(-50%);
}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes zoomIn {
	from { transform: scale(0.9); opacity: 0; }
	to { transform: scale(1); opacity: 1; }
}

.project-description {
	background: white;
	padding: 30px;
	border-radius: 10px;
	border: 1px solid #e0e0e0;
}

.project-description h3 {
	color: #186245;
	margin-top: 0;
	margin-bottom: 20px;
}

.project-description p {
	line-height: 1.6;
	white-space: pre-line;
	color: #444;
}

.project-sidebar {
	background: white;
	padding: 30px;
	border-radius: 10px;
	border: 1px solid #e0e0e0;
}

.project-actions {
	margin-top: 30px;
}

.btn-buy-large {
	display: block;
	width: 100%;
	background: #186245;
	color: white;
	text-align: center;
	padding: 18px;
	border-radius: 5px;
	text-decoration: none;
	font-size: 18px;
	font-weight: bold;
	transition: background 0.3s;
	margin-bottom: 15px;
}

.btn-buy-large:hover {
	background: #18A370;
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.btn-back {
	display: inline-block;
	background: transparent;
	color: #666;
	border: 1px solid #ddd;
	padding: 12px 25px;
	border-radius: 5px;
	text-decoration: none;
	transition: all 0.3s;
}

.btn-back:hover {
	border-color: #186245;
	color: #186245;
}

/* ORDER */
.order-container {
	max-width: 1000px;
	margin: 40px auto;
	padding: 0 20px;
}

.order-header {
	margin-bottom: 40px;
}

.order-title {
	color: #186245;
	margin-bottom: 20px;
	font-size: 32px;
}

.order-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
}

@media (max-width: 768px) {
	.order-content {
		grid-template-columns: 1fr;
	}
}

.order-project-info {
	background: #f9f9f9;
	padding: 30px;
	border-radius: 10px;
	border: 1px solid #e0e0e0;
}

.project-image-order {
	width: 100%;
	height: 300px;
	object-fit: cover;
	border-radius: 8px;
	margin-bottom: 20px;
}

.project-title-order {
	font-size: 24px;
	color: #186245;
	margin-bottom: 15px;
}

.project-price-order {
	font-size: 28px;
	font-weight: bold;
	color: #000000;
	margin: 20px 0;
}

.project-meta-order {
	color: #666;
	margin-bottom: 10px;
}

.order-form-container {
	background: white;
	padding: 30px;
	border-radius: 10px;
	border: 1px solid #e0e0e0;
}

.form-title {
	color: #186245;
	margin-top: 0;
	margin-bottom: 25px;
	font-size: 24px;
}

.form-group {
	margin-bottom: 20px;
}

.form-label {
	display: block;
	margin-bottom: 8px;
	color: #444;
	font-weight: 500;
}

.form-input {
	width: 100%;
	padding: 12px 15px;
	border: 1px solid #ddd;
	border-radius: 5px;
	font-size: 16px;
	transition: border-color 0.3s;
	box-sizing: border-box;
}

.form-input:focus {
	outline: none;
	border-color: #186245;
	box-shadow: 0 0 0 2px rgba(24, 98, 69, 0.1);
}

.form-input.error {
	border-color: #e53935;
}

.error-message {
	color: #e53935;
	font-size: 14px;
	margin-top: 5px;
}

.btn-submit {
	display: block;
	width: 100%;
	background: #186245;
	color: white;
	border: none;
	padding: 16px;
	border-radius: 5px;
	font-size: 18px;
	font-weight: bold;
	cursor: pointer;
	transition: background 0.3s;
	margin-top: 30px;
}

.btn-submit:hover {
	background: #18A370;
}

.btn-submit:disabled {
	background: #cccccc;
	cursor: not-allowed;
}

.success-message {
	background: #d4edda;
	color: #155724;
	padding: 20px;
	border-radius: 5px;
	border: 1px solid #c3e6cb;
	margin-top: 20px;
	text-align: center;
}

.success-title {
	font-size: 24px;
	margin-bottom: 10px;
	color: #186245;
}

.back-to-catalog {
	display: inline-block;
	margin-top: 20px;
	background: transparent;
	color: #186245;
	border: 1px solid #186245;
	padding: 12px 25px;
	border-radius: 5px;
	text-decoration: none;
	transition: all 0.3s;
}

.back-to-catalog:hover {
	background: #186245;
	color: white;
}

.order-steps {
	display: flex;
	justify-content: space-between;
	margin-bottom: 40px;
	position: relative;
}

.order-steps:before {
	content: '';
	position: absolute;
	top: 25px;
	left: 10%;
	right: 10%;
	height: 2px;
	background: #ddd;
	z-index: 1;
}

.step {
	text-align: center;
	position: relative;
	z-index: 2;
	flex: 1;
}

.step-number {
	width: 50px;
	height: 50px;
	background: #ddd;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 10px;
	font-weight: bold;
	color: #666;
}

.step.active .step-number {
    background: #186245; /* Темно-зеленый для активных шагов */
    color: white;
}

.step-text {
	font-size: 14px;
	color: #666;
}

.step.active .step-text {
    color: #186245; /* Темно-зеленый для активных шагов */
    font-weight: 500;
}

/* Добавить новый класс для будущих шагов */
.step.future .step-number {
    background: #c8e6d3; /* Светло-зеленый для будущих шагов */
    color: #666;
}

.step.future .step-text {
    color: #8a8a8a; /* Серый для будущих шагов */
}

textarea.form-input {
	min-height: 100px;
	resize: vertical;
	font-family: inherit;
}


/* ================= INDIVIDUAL PAGE ================= */
.individual-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}

.individual-header {
    margin-bottom: 40px;
}

.individual-title {
    color: #186245;
    margin-bottom: 15px;
    font-size: 32px;
}

.individual-subtitle {
    font-size: 20px;
    color: #666;
    margin-bottom: 30px;
    line-height: 1.5;
}

/* Основной контейнер с двумя колонками */
.individual-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

/* Левая колонка - вертикальный стек */
.individual-left-column {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Картинка с оверлеем */
.individual-image-container {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    flex: 1;
}

.individual-image {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s;
}

.individual-image:hover {
    transform: scale(1.03);
}

.image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    color: white;
    padding: 30px;
}

.image-title {
    font-size: 24px;
    margin-bottom: 10px;
}

.image-description {
    font-size: 16px;
    opacity: 0.9;
}

/* Блок преимуществ под картинкой */
.benefits {
    background: #f8f9fa;
    padding: 30px;
    border-radius: 15px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.benefits-title {
    color: #186245;
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 22px;
    text-align: center;
}

.benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.benefits-list li {
    margin-bottom: 15px;
    color: #555;
    line-height: 1.5;
    padding-left: 30px;
    position: relative;
    font-size: 16px;
}

.benefits-list li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #186245;
    font-weight: bold;
    font-size: 18px;
}

/* Правая колонка с формой */
.individual-form-container {
    background: white;
    padding: 40px;
    border-radius: 15px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

.form-title {
    color: #186245;
    margin-top: 0;
    margin-bottom: 30px;
    font-size: 28px;
}

.form-group {
    margin-bottom: 25px;
}

.form-label {
    display: block;
    margin-bottom: 8px;
    color: #444;
    font-weight: 500;
    font-size: 16px;
}

.form-input {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s;
    box-sizing: border-box;
}

.form-input:focus {
    outline: none;
    border-color: #186245;
    box-shadow: 0 0 0 3px rgba(24, 98, 69, 0.1);
}

.form-input.error {
    border-color: #e53935;
}

.error-message {
    color: #e53935;
    font-size: 14px;
    margin-top: 5px;
}

textarea.form-input {
    min-height: 120px;
    resize: vertical;
    font-family: inherit;
}

.btn-submit-individual {
    display: block;
    width: 100%;
    background: #186245;
    color: white;
    border: none;
    padding: 18px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 10px;
}

.btn-submit-individual:hover {
    background: #18A370;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(24, 98, 69, 0.2);
}

.btn-submit-individual:disabled {
    background: #cccccc;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.success-message {
    background: #d4edda;
    color: #155724;
    padding: 30px;
    border-radius: 10px;
    border: 1px solid #c3e6cb;
    text-align: center;
}

.success-title {
    font-size: 24px;
    margin-bottom: 15px;
    color: #186245;
}

.back-to-home {
    display: inline-block;
    margin-top: 20px;
    background: transparent;
    color: #186245;
    border: 1px solid #186245;
    padding: 12px 30px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s;
    font-weight: 500;
}

.back-to-home:hover {
    background: #186245;
    color: white;
}

.btn-back {
    display: inline-block;
    background: transparent;
    color: #666;
    border: 1px solid #ddd;
    padding: 12px 25px;
    border-radius: 5px;
    text-decoration: none;
    transition: all 0.3s;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    margin-bottom: 20px;
}

.btn-back:hover {
    border-color: #186245;
    color: #186245;
}

/* Адаптивность */
@media (max-width: 900px) {
    .individual-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .individual-left-column {
        gap: 25px;
    }
    
    .benefits {
        padding: 25px;
    }
    
    .benefits-title {
        font-size: 20px;
    }
    
    .benefits-list li {
        font-size: 15px;
        margin-bottom: 12px;
        padding-left: 25px;
    }
    
    .individual-form-container {
        padding: 30px 25px;
    }
    
    .individual-title {
        font-size: 28px;
    }
    
    .individual-subtitle {
        font-size: 18px;
    }
    
    .form-title {
        font-size: 24px;
    }
}

@media (max-width: 600px) {
    .individual-container {
        margin: 20px auto;
        padding: 0 15px;
    }
    
    .individual-header {
        margin-bottom: 30px;
    }
    
    .individual-title {
        font-size: 24px;
        margin-bottom: 10px;
    }
    
    .individual-subtitle {
        font-size: 16px;
        margin-bottom: 20px;
    }
    
    .individual-left-column {
        gap: 20px;
    }
    
    .individual-image-container {
        border-radius: 10px;
    }
    
    .image-overlay {
        padding: 20px;
    }
    
    .image-title {
        font-size: 20px;
    }
    
    .image-description {
        font-size: 14px;
    }
    
    .benefits {
        padding: 20px;
        border-radius: 10px;
    }
    
    .benefits-title {
        font-size: 18px;
        margin-bottom: 15px;
    }
    
    .benefits-list li {
        font-size: 14px;
        margin-bottom: 10px;
        padding-left: 20px;
    }
    
    .benefits-list li:before {
        font-size: 16px;
    }
    
    .individual-form-container {
        padding: 25px 20px;
        border-radius: 10px;
    }
    
    .form-title {
        font-size: 22px;
        margin-bottom: 20px;
    }
    
    .form-group {
        margin-bottom: 20px;
    }
    
    .form-label {
        font-size: 15px;
        margin-bottom: 6px;
    }
    
    .form-input {
        padding: 12px 15px;
        font-size: 15px;
    }
    
    textarea.form-input {
        min-height: 100px;
    }
    
    .btn-submit-individual {
        padding: 16px;
        font-size: 16px;
    }
    
    .btn-back {
        padding: 10px 20px;
        font-size: 15px;
        margin-bottom: 15px;
    }
    
    .success-message {
        padding: 25px 20px;
    }
    
    .success-title {
        font-size: 22px;
    }
    
    .back-to-home {
        padding: 10px 25px;
        font-size: 15px;
    }
}

/* ОПЛАТА И ДОСТАВКА */
.payment-container {
	max-width: 1200px;
	margin: 40px auto;
	padding: 0 20px;
}

.payment-header {
	margin-bottom: 50px;
	text-align: center;
}

.payment-title {
	color: #186245;
	margin-bottom: 15px;
	font-size: 36px;
}

.payment-subtitle {
	font-size: 18px;
	color: #666;
	max-width: 800px;
	margin: 0 auto;
	line-height: 1.6;
}

.cards-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	gap: 30px;
	margin-bottom: 60px;
}

@media (max-width: 768px) {
	.cards-grid {
		grid-template-columns: 1fr;
	}
}

.payment-card {
	background: white;
	padding: 40px;
	border-radius: 15px;
	border: 1px solid #e0e0e0;
	box-shadow: 0 5px 20px rgba(0,0,0,0.05);
	transition: transform 0.3s, box-shadow 0.3s;
}

.payment-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.card-header {
	display: flex;
	align-items: center;
	margin-bottom: 25px;
	gap: 20px;
}

.card-icon {
	width: 70px;
	height: 70px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f8f9fa;
	border-radius: 12px;
	flex-shrink: 0;
}

.card-icon img {
	max-width: 40px;
	max-height: 40px;
}

.card-title {
	color: #186245;
	margin: 0;
	font-size: 24px;
}

.card-content {
	color: #444;
	line-height: 1.7;
}

.card-content p {
	margin-bottom: 15px;
}

.card-content p:last-child {
	margin-bottom: 0;
}

.warning-note {
	background: #fff3cd;
	border-left: 4px solid #ffc107;
	padding: 15px 20px;
	margin: 20px 0;
	border-radius: 4px;
	color: #856404;
}

.success-note {
	background: #d4edda;
	border-left: 4px solid #28a745;
	padding: 15px 20px;
	margin: 20px 0;
	border-radius: 4px;
	color: #155724;
}

.btn-back {
	display: inline-block;
	background: transparent;
	color: #666;
	border: 1px solid #ddd;
	padding: 12px 25px;
	border-radius: 5px;
	text-decoration: none;
	transition: all 0.3s;
	margin-bottom: 30px;
}

.btn-back:hover {
	border-color: #186245;
	color: #186245;
}

.contact-info {
	background: #f8f9fa;
	padding: 30px;
	border-radius: 10px;
	margin-top: 0px;
	text-align: center;
}

.contact-title {
	color: #186245;
	margin-bottom: 15px;
	font-size: 22px;
}

.contact-phone {
	font-size: 24px;
	font-weight: bold;
	color: #186245;
	margin: 10px 0;
}

.contact-email {
	font-size: 18px;
	color: #666;
}

.payment-steps {
	display: flex;
	justify-content: center;
	gap: 40px;
	margin: 40px 0;
	flex-wrap: wrap;
}

.payment-step {
	text-align: center;
	max-width: 200px;
}

.step-number {
	width: 50px;
	height: 50px;
	background: #186245;
	color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 15px;
	font-weight: bold;
	font-size: 20px;
}

.step-text {
	color: #444;
	font-size: 16px;
}

========== ОТКЛЮЧЕНИЕ МОБИЛЬНОЙ ВЕРСИИ ==========
/* @media (max-width: 768px) { */
    Отменяем ВСЕ мобильные стили
    /* body, html { */
        /* width: 1200px !important; /* Фиксированная ширина */ */
        /* max-width: none !important; */
        /* overflow-x: auto !important; /* Скроллим по горизонтали */ */
    /* } */
    
    Отменяем адаптивные сетки
    /* .project-grid, */
    /* .projects-grid-catalog, */
    /* .order-content, */
    /* .individual-content, */
    /* .cards-grid { */
        /* grid-template-columns: repeat(3, 1fr) !important; /* Как на ПК */ */
        /* gap: 30px !important; */
    /* } */
    
    Возвращаем ПК размеры
    /* .container { */
        /* width: 1200px !important; */
        /* margin: 0 auto !important; */
    /* } */
    
    Фиксируем меню как на ПК
    /* .menu { */
        /* display: flex !important; */
        /* flex-wrap: nowrap !important; */
    /* } */
    
    /* .menu a { */
        /* margin: 0 15px !important; */
        /* font-size: 16px !important; */
    /* } */
    
    Убираем все мобильные трансформации
    /* * { */
        /* transform: none !important; */
        /* transition: none !important; */
    /* } */
/* } */