/* Основной контейнер заголовка страницы */
.pagetitle {
    padding: 30px 0 50px 0 !important;
    border-top: 1px solid #e0e0e0;
}

/* Хлебные крошки (Breadcrumbs) */
.breadcrumb {
    margin-bottom: 25px;
}

#breadcrumbs {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

#breadcrumbs li {
    font-size: 14px;
    color: #888; /* Цвет текста крошек */
    display: flex;
    align-items: center;
}

/* Ссылки в крошках */
#breadcrumbs li a {
    color: #888;
    text-decoration: none;
    transition: color 0.3s;
}

#breadcrumbs li a:hover {
    color: #da5e38; /* Цвет при наведении */
}

/* Разделитель между пунктами (длинное тире или линия как на фото) */
#breadcrumbs li:not(:last-child)::after {
    content: "—"; /* Длинное тире как на скриншоте */
    margin: 0 15px;
    color: #ccc;
    font-weight: 300;
}

/* Текущая активная страница (последний пункт) */
#breadcrumbs li:last-child {
    color: #888;
}

/* Главный заголовок страницы (H1) */
.pagetitle-item {
    font-size: 42px; /* Крупный жирный шрифт */
    font-weight: 800;
    color: #333;
    margin: 0;
    line-height: 1.2;
}

/* --- Адаптивность --- */

/* Планшеты */
@media (max-width: 991px) {
    .pagetitle-item {
        font-size: 32px;
    }
    .pagetitle {
        padding: 25px 0 40px 0 !important;
    }
}

/* Мобильные телефоны */
@media (max-width: 767px) {
    .pagetitle {
        padding: 20px 0 30px 0 !important;
    }
    
    .pagetitle-item {
        font-size: 26px;
    }
    
    /* Делаем крошки помельче на мобилках */
    #breadcrumbs li {
        font-size: 12px;
    }
    
    #breadcrumbs li:not(:last-child)::after {
        margin: 0 8px;
    }
}





















/* Базовые настройки секции */
.block1 {
    padding: 0 0 60px 0 !important;
}

/* Принудительный ряд для десктопа */
.block1 .row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
}

/* Левая колонка (Галерея) */
.block1 .col-lg-5 {
    flex: 0 0 40% !important;
    max-width: 40% !important;
    padding-right: 30px;
}

/* ФИКСИРОВАННАЯ ВЫСОТА И ЛОГИКА СЛАЙДЕРА */
.service-gallery-top {
    position: relative;
    width: 100%;
    height: 400px; /* ФИКСИРОВАННАЯ ВЫСОТА: подбери под свои фото */
    margin-bottom: 20px;
    border-radius: 25px;
    border: 10px solid #ffffff !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    overflow: hidden;
}

/* Скрываем все слайды по умолчанию */
.service-gallery-top .item {
    display: none; 
    width: 100%;
    height: 100%;
}

/* Показываем только активный */
.service-gallery-top .item.active {
    display: block;
}

.service-gallery-top .ch-item, 
.service-gallery-top .ch-item a, 
.service-gallery-top .ch-item img {
    width: 100%;
    height: 100%;
}

.service-gallery-top .ch-item img {
    object-fit: contain; /* Картинка не обрезается и вписывается в высоту */
}

/* Маленькие превью */
.slider-service-nav {
    display: flex !important;
    gap: 15px;
}

.slider-service-nav .item {
    cursor: pointer;
}

.ch-prev {
    width: 110px;
    height: 85px;
    border-radius: 12px;
    overflow: hidden;
    border: 3px solid transparent;
    transition: 0.3s;
}

.ch-prev img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Оранжевая рамка через родителя .item.active */
.slider-service-nav .item.active .ch-prev {
    border-color: #da5e38 !important;
}

/* Правая колонка (Инфо) */
.l-ind .col-lg-7 {
    flex: 0 0 60% !important;
    max-width: 60% !important;
}

/* Остальные стили (цены, галочки) без изменений */
.service-top-info { display: flex !important; gap: 15px; margin-bottom: 30px; }
.title-price { flex: 1; }
.title-price-item { padding: 15px; border-radius: 12px; font-weight: 700; text-align: center; color: #333; }
.list-check li { list-style: none; position: relative; padding-left: 35px; margin-bottom: 15px; font-size: 16px; color: #444; }
.list-check li::before {
    content: ''; position: absolute; left: 0; top: 3px; width: 20px; height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23da5e38' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat; background-size: contain;
}

/* Адаптация */
@media (max-width: 991px) {
    .l-ind .col-lg-5, .l-ind .col-lg-7 { flex: 0 0 100% !important; max-width: 100% !important; padding: 0; }
    .service-gallery { margin-bottom: 30px; }
    .service-gallery-top { height: 300px; } /* Уменьшаем высоту на мобилках */
}

/* Добавь это к стилям слайдера */
.service-gallery-top {
    touch-action: pan-y; /* Позволяет скроллить страницу вертикально, но ловит горизонтальные свайпы */
    user-select: none;
    cursor: grab;
}

.service-gallery-top:active {
    cursor: grabbing;
}

.service-gallery-top img {
    pointer-events: none; /* Чтобы браузер не пытался "утащить" картинку */
}

















/* Контейнер секции */
.block2 {
    padding: 40px 0 50px 0 !important;
}

/* Принудительная сетка */
.block2 .row {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important; /* Убеждаемся, что направление прямое */
}

/* На десктопе (от 992px) */
@media (min-width: 992px) {
    /* КАРТИНКА (col-lg-4) - ставим СЛЕВА */
    .block2 .col-lg-4 {
        flex: 0 0 33.333% !important;
        max-width: 33.333% !important;
        order: 1 !important; /* Первый порядковый номер */
    }

    /* ТЕКСТ (col-lg-8) - ставим СПРАВА */
    .block2 .col-lg-8 {
        flex: 0 0 66.666% !important;
        max-width: 66.666% !important;
        padding-left: 50px; /* Отступ текста от картинки справа */
        padding-right: 0;
        order: 2 !important; /* Второй порядковый номер */
    }
}

/* Заголовок с точкой */
.block2 .title-big {
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    margin-bottom: 30px !important;
}

/* Исправил селектор с .l-ind на .block2, чтобы точка работала */


/* Картинка */
.img-radius {
    width: 100%;
    height: auto;
    border-radius: 20px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* Адаптив для мобилок */
@media (max-width: 991px) {
    .block2 .row {
        flex-direction: column !important; 
    }
    /* На мобилках картинку обычно ставят ПЕРВОЙ (сверху) */
    .block2 .col-lg-4 { order: 1 !important; }
    .block2 .col-lg-8 { order: 2 !important; margin-top: 30px; }

    .block2 .col-lg-8, .block2 .col-lg-4 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        text-align: center;
        padding-left: 15px; /* Сбрасываем десктопный отступ */
    }
    .block2 .title-big {
        justify-content: center;
    }
}



















/* Настройки секции */
.block-theme-3 {
    padding: 80px 0 !important;
}

/* Заголовок с точкой */
.title-big {
    display: flex;
    align-items: center;
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 50px;
}



.c-theme {
    color: #da5e38;
    margin-left: 10px;
}

/* Сетка услуг: 4 колонки */
.service-lists {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 40px 20px;
}

/* Заголовок категории (Тираж, Материал и т.д.) */
.service-lists-item-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.service-lists-item-title span {
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    color: #333;
    letter-spacing: 0.5px;
}

/* Список пунктов */
.service-lists-item-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.service-lists-item-list li {
    position: relative;
    padding-left: 18px;
    margin-bottom: 10px;
    font-size: 15px;
    color: #555;
    line-height: 1.4;
}

/* Серая точка перед пунктом (как на фото) */
.service-lists-item-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 4px;
    height: 4px;
    background-color: #ddd; /* Светло-серый цвет точки */
    border-radius: 50%;
}

/* Адаптивность */

/* Планшеты (по 2 колонки) */
@media (max-width: 991px) {
    .service-lists {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Мобильные (в одну колонку) */
@media (max-width: 575px) {
    .service-lists {
        grid-template-columns: 1fr !important;
        gap: 30px;
    }
    
    .title-big {
        font-size: 26px;
    }
}

















/* Контейнер */
.contents-grid {
    display: grid !important;
    /* Создаем 3 колонки по 1 части (fr) */
    grid-template-columns: repeat(3, 1fr) !important;
    /* Создаем 2 строки */
    grid-template-rows: repeat(2, 1fr) !important;
    width: 100% !important;
    gap: 0 !important;
    background-color: #f2f2f2;
}

/* Общие стили ячеек */
.contents-grid-item {
    width: 100% !important;
    min-height: 400px;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    overflow: hidden !important;
}

/* Картинки */
.contents-grid-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Текстовые блоки */
.contents-grid-content {
    padding: 40px !important;
    background-color: #f2f2f2;
}

/* --- МАГИЯ РАССТАНОВКИ ДЛЯ 3 КОЛОНОК (Обновлено) --- */
/* Порядок в HTML: 
   1:img, 2:text, 3:img, 4:text, 5:img (нужное фото), 6:text
*/

@media (min-width: 992px) {
    /* Ряд 1 встает автоматически: [1:img] [2:text] [3:img] */

    /* Указываем точные позиции для второго ряда */

    /* 4-й элемент (текст) ставим в 1-ю колонку 2-го ряда */
    .contents-grid-item:nth-child(4) {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    /* 5-й элемент (фото) ставим в ЦЕНТР 2-го ряда (2-я колонка) */
    .contents-grid-item:nth-child(5) {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }

    /* 6-й элемент (текст) ставим в 3-ю колонку 2-го ряда */
    .contents-grid-item:nth-child(6) {
        grid-column: 3 !important;
        grid-row: 2 !important;
    }
}

/* Оранжевая точка */
.ch-item-title {
    display: flex !important;
    align-items: center !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    margin-bottom: 20px !important;
}

.ch-item-title::before {
    content: "" !important;
    width: 10px;
    height: 10px;
    background-color: #da5e38;
    border-radius: 50%;
    margin-right: 12px;
    display: inline-block;
}

/* Адаптив для планшетов и мобилок */
@media (max-width: 1199px) {
    .contents-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: auto !important;
    }
    /* Сбрасываем жесткую привязку к колонкам, пусть Bootstrap решает */
    .contents-grid-item {
        grid-column: auto !important;
        grid-row: auto !important;
    }
}

@media (max-width: 767px) {
    .contents-grid {
        grid-template-columns: 1fr !important;
    }
    .contents-grid-item {
        min-height: auto !important;
        height: 300px;
    }
    .contents-grid-content {
        height: auto !important;
        padding: 30px 20px !important;
    }
}























/* Основной контейнер секции */
.block-theme-3 {
    padding: 80px 0 !important;
}

/* Заголовок с точкой */
.title-big {
    display: flex;
    align-items: center;
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 40px;
}



/* Стили аккордеона */
.accordion-wrap {
    margin-bottom: 30px;
}

.accordion {
    background: #fff;
    border-radius: 10px;
    margin-bottom: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Мягкая тень как на фото */
    overflow: hidden;
    transition: 0.3s;
}

.accordion-title {
    padding: 20px 25px;
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
}

/* Круглая иконка Плюс */
.accordion-title::before {
    content: "+";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid #da5e38; /* Оранжевый контур */
    border-radius: 50%;
    color: #da5e38;
    font-size: 18px;
    font-weight: 400;
    margin-right: 20px;
    flex-shrink: 0;
    transition: 0.3s;
}

/* Поворот плюса при открытии (если добавишь класс active) */
.accordion.active .accordion-title::before {
    transform: rotate(45deg);
    background-color: #da5e38;
    color: #fff;
}

.accordion-title a {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    text-decoration: none;
}

/* Текст внутри выпадающего списка */
.accordion-item {
    padding: 0 25px 25px 69px; /* Отступ слева, чтобы текст был под заголовком */
}

.contenting {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
}

.img-border {
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    max-height: 520px; /* Подбери под высоту своих 5 вопросов + кнопки */
    object-fit: cover;
    border-radius: 20px;
    border: 10px solid #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    display: block;
}

/* --- АДАПТИВНОСТЬ --- */

@media (max-width: 1199px) {
    .accordion-title a {
        font-size: 16px;
    }
}

@media (max-width: 767px) {
    .block-theme-3 {
        padding: 50px 0 !important;
    }
    
    .title-big {
        font-size: 24px;
    }

    .accordion-title {
        padding: 15px;
    }
    
    .accordion-title::before {
        margin-right: 12px;
    }

    .accordion-item {
        padding: 0 15px 15px 51px;
    }
}

@media (min-width: 992px) {
    /* Контейнер ряда */
    .block-theme-3 .row {
        display: flex !important;
        flex-wrap: nowrap !important; /* Убеждаемся, что nowrap выключен, чтобы не было притыка */
        align-items: flex-start !important; /* Выравнивание по верху */
    }

    /* Левая часть (Вопросы) */
    .block-theme-3 .col-lg-8 {
        flex: 0 0 70% !important; /* Отдаем 70% ширины вопросам */
        max-width: 70% !important;
        padding-right: 50px !important; /* Четкий зазор справа от текста */
    }

    /* Правая часть (Картинка теперь меньше) */
    .block-theme-3 .col-lg-4 {
        flex: 0 0 30% !important; /* Отдаем только 30% ширины картинке */
        max-width: 30% !important;
        display: block !important;
        padding-left: 0 !important; /* Сбрасываем левый отступ, т.к. есть padding-right у соседа */
    }
}

/* Стили самой картинки, чтобы не была гигантской */
.img-border {
    width: 100% !important;
    height: auto !important;
    max-height: 550px; /* Ограничиваем высоту по уровню аккордеона */
    object-fit: cover;
    border-radius: 20px;
    border: 10px solid #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}