/* ОБЩИЙ КОНТЕЙНЕР */
.accordion_bl margin: 3px 0;.accordion_blok {
}
/* БЛОК */
.accordion-item_blok {
margin-bottom: 12px;
border: 1px solid #dbe4ea;
border-radius: 12px;
overflow: hidden;
background: #ffffff;
box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
/* ЗАГОЛОВОК */
.accordion-title_blok {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
background: #0078d4;
color: #fff;
border: none;
cursor: pointer;
font-size: 18px;
font-weight: 600;
text-align: -webkit-center;
transition: background .3s ease;
}
.accordion-title_blok:hover {
background: #0063b1;
}
/* ИКОНКА */
.accordion-icon_blok {
font-size: 24px;
line-height: 1;
transition: transform .3s ease;
}
/* ОТКРЫТОЕ СОСТОЯНИЕ */
.accordion-item_blok.active_blok .accordion-icon_blok {
transform: rotate(45deg);
}
/* КОНТЕНТ */
.accordion-content_blok {
max-height: 0;
overflow: hidden;
transition: max-height .4s ease;
background: #fff;
}
.accordion-content-inner_blok {
padding: 20px;
color: #333;
line-height: 1.6;
}
width: 100%;
}
.info-section {
background: #f7f7f7;
border: 1px solid #e5e5e5;
border-radius: 8px;
padding: 20px 10px;
margin: 20px 0;
}
.info-column {
padding: 15px 25px;
}
/* Вертикальные разделители на ПК */
@media (min-width: 992px) {
.info-column:not(:last-child) {
border-right: 1px solid #d9d9d9;
}
}
/* Горизонтальные разделители на мобильных */
@media (max-width: 991px) {
.info-column {
border-bottom: 1px solid #d9d9d9;
padding-bottom: 25px;
margin-bottom: 20px;
}
.info-column:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 15px;
}
}
.info-column h4 {
margin-top: 0;
margin-bottom: 15px;
color: #005baa;
font-weight: 600;
}
.info-column p {
margin-bottom: 12px;
}
.info-phone {
text-align: center;
font-size: 22px;
font-weight: 700;
color: #005baa;
}
.info-column a {
color: #005baa;
text-decoration: none;
}
.info-column a:hover {
text-decoration: underline;
}
.responsive-table-wrapper {
overflow-x: auto; /* горизонтальная прокрутка только здесь */
width: 100%;
}
.admin-procedures-table {
width: 100%;
border-collapse: collapse;
font-size: inherit; /* наследует размер шрифта сайта */
line-height: inherit;
color: inherit;
}
.admin-procedures-table th,
.admin-procedures-table td {
border: 1px solid #ccc;
padding: 12px 10px;
text-align: left;
vertical-align: top;
}
.admin-procedures-table th {
background-color: #f5f5f5;
position: sticky;
top: 0;
z-index: 1;
}
/* Заголовки разделов (ЖИЛИЩНЫЕ, ТРУД, ЗДРАВООХРАНЕНИЕ) */
.admin-procedures-table .section-header {
background-color: #eef;
font-weight: bold;
text-align: center;
border-top: 2px solid #333;
}
/* Адаптивные пропорции колонок (можно подстроить под ваши данные) */
@media (min-width: 768px) {
.admin-procedures-table th:nth-child(1),
.admin-procedures-table td:nth-child(1) { width: 18%; }
.admin-procedures-table th:nth-child(2),
.admin-procedures-table td:nth-child(2) { width: 22%; }
.admin-procedures-table th:nth-child(3),
.admin-procedures-table td:nth-child(3) { width: 30%; }
.admin-procedures-table th:nth-child(4),
.admin-procedures-table td:nth-child(4) { width: 8%; }
.admin-procedures-table th:nth-child(5),
.admin-procedures-table td:nth-child(5) { width: 12%; }
.admin-procedures-table th:nth-child(6),
.admin-procedures-table td:nth-child(6) { width: 10%; }
}
/* ***************************************************************************************** */
/* =========================================
ГЛАВНЫЙ КОНТЕЙНЕР
========================================= */
#main_slider_19crp {
margin-bottom: 30px;
border-radius: 5px;
overflow: hidden;
position: relative;
width: 100%;
}
#main_slider_19crp .owl-stage { display: flex; flex-wrap: nowrap; }
#main_slider_19crp .owl-item { flex-shrink: 0; flex-grow: 1; }
/* =========================================
НАВИГАЦИЯ (Стрелки)
========================================= */
#main_slider_19crp .owl-nav {
position: absolute; top: 50%; transform: translateY(-50%);
width: 100%; opacity: 0.2; font-size: 0; z-index: 10;
}
#main_slider_19crp .owl-nav button.owl-prev,
#main_slider_19crp .owl-nav button.owl-next {
width: 40px; height: 40px; position: absolute;
font-size: 0 !important; line-height: 0; color: transparent !important;
background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 50%;
cursor: pointer; transition: all 0.3s ease;
display: flex; align-items: center; justify-content: center;
}
#main_slider_19crp .owl-nav button.owl-prev { left: 20px; }
#main_slider_19crp .owl-nav button.owl-next { right: 20px; }
#main_slider_19crp .owl-nav button.owl-prev::before {
content: "\f137"; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 18px; color: var(--color-6, #000);
}
#main_slider_19crp .owl-nav button.owl-next::before {
content: "\f138"; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 18px; color: var(--color-6, #000);
}
#main_slider_19crp .owl-nav button:hover {
opacity: 1; transform: scale(1.1) translateY(-2px); background: #fff; border-color: #ccc;
}
/* Пагинация */
#main_slider_19crp .owl-dots {
display: block; text-align: center; position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
width: auto; padding: 0; opacity: 0.4; z-index: 10;
}
#main_slider_19crp .owl-dot {
display: inline-block; border-radius: 50%; width: 14px; height: 14px; margin: 0 6px;
background: var(--color-5, #ccc); transition: background 0.3s;
}
#main_slider_19crp .owl-dot.active { background: var(--color-0, #fff); transform: scale(1.3); }
/* =========================================
СТРУКТУРА СЛАЙДА (ДЕСКТОП - ГЛАВНОЕ ИЗМЕНЕНИЕ)
========================================= */
/* =========================================
СТРУКТУРА СЛАЙДА (ДЕСКТОП - ТЕПЕРЬ СМЕЩЕН ВПРАВО)
========================================= */
.item_19crp {
position: relative;
min-height: 450px;
display: flex;
align-items: stretch;
/* ИЗМЕНЕНИЕ: Прижимаем контент к правому краю */
justify-content: flex-end;
border-radius: 5px;
overflow: hidden;
background-color: #1a1a1a;
}
.slide-img_19crp {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
object-fit: cover;
z-index: 1;
filter: brightness(0.95);
transition: filter 0.5s ease;
}
.item_19crp:hover .slide-img_19crp { filter: brightness(0.85); }
/*
БЛОК ТЕКСТА:
1. width: 33% - занимает треть ширины.
2. margin: 20px - ОТСТУПЫ СО ВСЕХ СТОРОН ПО 20PX.
Так как родитель прижат вправо (flex-end), блок встанет справа,
но будет иметь отступ 20px от правого края, от верха, низа и слева.
*/
.slide-content_19crp {
position: relative;
z-index: 2;
width: 45%;
max-width: 500px;
/* ГЛАВНОЕ: margin: 20px дает отступ сверху, снизу, слева и справа */
margin: 20px;
padding: 30px 20px; /* Внутренние отступы текста от краев блока */
background-color: rgba(255, 255, 255, 0.88);
box-shadow: -8px 8px 24px rgba(0, 0, 0, 0.15);
display: flex;
flex-direction: column;
justify-content: center;
overflow-y: auto;
}
/*
БЛОК ТЕКСТА:
1. width: 33% - занимает треть ширины.
2. margin: 20px - ОТСТУПЫ СО ВСЕХ СТОРОН ПО 20PX.
Это создаст рамку воздуха вокруг белого блока.
3. max-width: 500px - защита от слишком широких блоков.
*/
.slide-content_19crp {
position: relative;
z-index: 2;
width: 45%;
max-width: 500px;
/* ГЛАВНОЕ: margin: 20px дает отступ сверху, снизу, слева и справа */
margin: 20px;
padding: 30px 20px; /* Внутренние отступы текста от краев блока */
background-color: rgba(255, 255, 255, 0.88);
box-shadow: -8px 8px 24px rgba(0, 0, 0, 0.15);
display: flex;
flex-direction: column;
justify-content: center;
overflow-y: auto;
}
.title_19crp { font-size: 2.2em; line-height: 1.1; font-weight: 800; color: var(--color-6, #2c3e50); margin: 0 0 16px 0; }
.desc_19crp { font-size: 1.15em; line-height: 1.5; color: #444; margin: 0 0 28px 0; flex-grow: 1; }
.btn_19crp { display: inline-block; padding: 16px 40px; border-radius: 8px; text-decoration: none; font-weight: 700; text-transform: uppercase; }
.btn-primary_19crp { background-color: var(--color-6, #3498db); color: #fff; }
.btn-primary_19crp:hover { background-color: var(--color-0, #2980b9); transform: translateY(-3px); }
/* =========================================
АДАПТИВНОСТЬ
========================================= */
@media (max-width: 992px) {
.item_19crp { height: 480px; justify-content: center; }
.slide-content_19crp {
width: 70%;
margin: 15px; /* Чуть меньше отступ на планшетах */
padding: 30px 20px;
}
}
@media (max-width: 767px) {
#main_slider_19crp { border-radius: 0; }
.item_19crp {
height: auto;
min-height: 360px;
display: flex;
align-items: center; /* Центрируем по вертикали */
justify-content: center; /* Центрируем по горизонтали */
position: relative;
overflow: visible;
}
.slide-img_19crp {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
object-fit: cover;
z-index: 1;
filter: brightness(0.85);
border: none;
}
/* На мобильном блок по центру, ширина почти во всю, но с отступами */
.slide-content_19crp {
position: relative;
z-index: 10;
width: 85%;
max-width: 500px;
margin: 0 auto; /* Центрируем сам блок горизонтально */
/* Убираем margin: 20px сверху/снизу, так как на мобильном лучше контролировать через padding */
margin-top: 0;
padding: 40px 20px; /* Большой внутренний отступ сверху, чтобы текст не наезжал на верх картинки */
background-color: rgba(255, 255, 255, 0.94);
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.title_19crp { font-size: 1.8em; }
.desc_19crp { font-size: 1em; }
#main_slider_19crp .owl-nav { display: none; }
#main_slider_19crp .owl-dots { bottom: 15px; opacity: 0.5; }
}
/* ***************************************************************************************** */
/* =========================================
ОБЩИЕ СТИЛИ БАННЕРА (ФОН ТЕПЕРЬ ЗДЕСЬ)
========================================= */
.banner_19crp {
position: relative;
width: 100%;
overflow: hidden; /* Обрезает всё, что вылезает за скругления */
border-radius: 15px; /* Небольшое скругление всего баннера */
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
/* НАСТОЯЩИЙ ФОН: */
background-color: #111; /* Цвет подстраховки, если картинка не грузится */
background-size: cover; /* Заполняет весь блок, обрезая края (аналог object-fit: cover) */
background-position: center;/* Центрирует картинку */
background-repeat: no-repeat;/* Запрещает повторение */
/* ВАЖНО: Задаем высоту. На мобильных она будет меняться через медиа-запросы */
min-height: 450px;
}
/* Контейнер для контента поверх картинки */
.banner_19crp .banner-container {
position: relative;
z-index: 2; /* Контент всегда поверх фона */
display: flex;
align-items: center; /* Центрирование по вертикали */
justify-content: space-between; /* Распределяем по ширине */
height: 100%; /* Высота равна высоте баннера */
padding: 20px;
box-sizing: border-box;
}
/* Общие стили для колонок */
.banner_19crp .banner-col {
flex-basis: 33.33%;
display: flex;
align-items: center;
justify-content: center;
}
/* =========================================
ЛЕВАЯ КОЛОНКА: КНОПКИ
========================================= */
.banner_19crp .banner-col-left {
text-align: center;
}
.banner_19crp .btn-group {
display: flex;
flex-direction: column;
gap: 12px;
}
.banner_19crp .custom-btn {
display: inline-block;
padding: 14px 28px;
background-color: rgba(255, 255, 255, 0.95);
color: #333;
text-decoration: none;
font-weight: 700;
text-transform: uppercase;
border-radius: 50px;
transition: transform 0.3s, background 0.3s;
box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}
.banner_19crp .custom-btn:hover {
background-color: #fff;
transform: translateY(-3px);
}
/* =========================================
ПРАВАЯ КОЛОНКА: КОНТАКТЫ
========================================= */
.banner_19crp .banner-col-right {
text-align: left;
}
.banner_19crp .contacts-block {
/* Светлый фон 88% белого */
background-color: rgba(255, 255, 255, 0.88);
/* Скругленная обводка */
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 12px;
/* Отступы 20px со всех сторон ВНУТРИ блока */
padding: 20px;
max-width: 320px;
}
.banner_19crp .contacts-block h3 {
margin: 0 0 12px 0;
color: #222;
font-size: 1.4em;
}
.banner_19crp .contacts-block p {
margin: 6px 0;
color: #555;
line-height: 1.5;
}
/* =========================================
АДАПТИВНОСТЬ (ПЛАНШЕТЫ)
========================================= */
@media (max-width: 992px) {
.banner_19crp .banner-container {
flex-direction: row;
justify-content: center;
}
.banner_19crp .banner-col-center {
display: none;
}
.banner_19crp .banner-col {
flex-basis: auto;
width: auto;
margin: 0 20px;
}
.banner_19crp .contacts-block {
max-width: none;
}
}
/* =========================================
АДАПТИВНОСТЬ (МОБИЛЬНЫЕ ТЕЛЕФОНЫ)
========================================= */
@media (max-width: 767px) {
.banner_19crp {
/* На мобильном высота должна быть адаптивной, а не фиксированной */
min-height: auto;
height: auto;
}
.banner_19crp .banner-container {
flex-direction: column; /* Вертикальная укладка */
align-items: stretch;
height: auto;
padding: 30px 20px;
box-sizing: border-box;
}
/* Порядок блоков: сначала Контакты, потом Кнопки */
.banner_19crp .banner-col-left { order: 2; }
.banner_19crp .banner-col-center { display: none; }
.banner_19crp .banner-col-right { order: 1; }
/* Кнопки на мобильном в одну строку */
.banner_19crp .btn-group {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-top: 20px;
}
.banner_19crp .custom-btn {
padding: 12px 24px;
font-size: 0.9em;
}
/* Блок контактов на мобильном */
.banner_19crp .contacts-block {
width: 100%;
border-radius: 12px;
margin-bottom: 20px;
}
.banner_19crp .banner-col-right {
text-align: center;
}
}
/* ***************************************************************************************** */
.custom-btn_19crp {
display: inline-block;
padding: 12px 24px;
/* Твой цвет */
background-color: var(--color-3, #008ada);
/* ГЛАВНОЕ: Белый цвет + !important, чтобы перебить любые другие стили */
color: #ffffff !important;
text-decoration: none;
border-radius: 6px;
font-weight: 700; /* Чуть жирнее, чем 600, лучше читается */
font-size: 1rem;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
/* ДОБАВЛЕНО: Тень под текстом. Это делает белые буквы объемными и четкими на синем фоне */
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
/* Состояние при наведении */
.custom-btn_19crp:hover {
background-color: var(--color-4, #004b8a); /* Чуть темнее */
color: #ffffff !important; /* Гарантируем белый цвет при наведении */
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
/* Состояние при нажатии */
.custom-btn_19crp:active {
background-color: var(--color-4, #003f73); /* Еще темнее */
color: #ffffff !important;
transform: translateY(0);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
/* Убираем тень текста только если кнопка находится на очень светлом фоне (опционально) */
/* Если фон кнопки всегда темный, этот блок можно удалить */
body.light-mode .custom-btn_19crp,
.bg-white .custom-btn_19crp {
text-shadow: none;
}
.custom-btn_mini_19crp {
display: inline-block;
/* Компактные отступы для мини-кнопки */
padding: 6px 12px;
/* Цвет из вашей палитры */
background-color: var(--color-3, #008ada);
/* Наследуем шрифт сайта */
font-family: inherit;
/* Обычный вес шрифта (не жирный), как вы просили */
font-weight: 400;
font-size: 0.95rem; /* Чуть меньше стандартного размера для аккуратности */
line-height: 1.2;
color: #ffffff !important;
text-decoration: none;
border-radius: 3px; /* Более строгие, менее скруглённые углы */
transition: all 0.3s ease;
/* Очень лёгкая тень, почти незаметная */
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
/* Тень под текстом для читаемости на синем фоне */
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
/* Состояние при наведении */
.custom-btn_mini_19crp:hover {
background-color: var(--color-4, #004b8a);
color: #ffffff !important;
/* Лёгкий подъём */
transform: translateY(-1px);
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
}
/* Состояние при нажатии */
.custom-btn_mini_19crp:active {
background-color: var(--color-4, #003f73);
color: #ffffff !important;
transform: translateY(0);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
/* Если фон белый — убираем тень текста, чтобы не было лишнего объёма */
body.light-mode .custom-btn_mini_19crp,
.bg-white .custom-btn_mini_19crp {
text-shadow: none;
}
/* Общие настройки блока */
.tabs-block-19crp {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
max-width: 800px;
margin: 40px auto;
border: 1px solid #d1d1d1;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
background-color: #ffffff;
}
/* Заголовок с кнопками (вкладками) */
.tabs-header-19crp {
display: flex;
flex-wrap: wrap;
background-color: #f8f9fa;
padding: 0;
border-bottom: 1px solid #e9ecef;
}
.tab-btn-19crp {
padding: 15px 20px;
cursor: pointer;
border: none;
background: transparent;
color: #5a5a5a;
font-size: 14px;
font-weight: 500;
text-align: left;
width: 100%;
transition: all 0.3s ease;
min-width: 160px;
}
.tab-btn-19crp:hover {
background-color: #e9ecef;
color: #333;
}
.tab-btn-19crp.active {
background-color: #ffffff;
color: #007bff; /* Синий цвет активной вкладки */
border-top: 3px solid #007bff;
border-left: 1px solid #dee2e6;
border-right: 1px solid #dee2e6;
border-bottom: none;
}
/* Контент вкладок */
#tabContent {
padding: 25px;
}
.tab-content-19crp {
display: none; /* Скрываем все по умолчанию */
animation: fadeIn 0.4s ease-in-out;
}
.tab-content-19crp.active {
display: block; /* Показываем активный */
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(5px); }
to { opacity: 1; transform: translateY(0); }
}
/* Картинка */
.content-photo-19crp {
width: 100%;
height: 240px;
object-fit: cover;
border-radius: 6px;
margin-bottom: 20px;
background-color: #f0f0f0; /* Цвет заглушки, если фото нет */
display: block;
}
/* Текстовая информация */
.info-grid-19crp {
display: grid;
grid-template-columns: 1fr 1fr; /* Две колонки */
gap: 12px;
margin-bottom: 20px;
}
.info-row-19crp {
display: flex;
align-items: flex-start;
}
.label-19crp {
font-weight: bold;
color: #495057;
min-width: 110px;
margin-right: 8px;
}
.value-19crp {
color: #212529;
line-height: 1.5;
}
/* Подпись внизу */
.footer-note-19crp {
margin-top: 25px;
padding-top: 15px;
border-top: 1px dashed #ccc;
font-size: 13px;
color: #888;
text-align: right;
}
/* Адаптивность для мобильных устройств */
@media (max-width: 600px) {
.tabs-header-19crp {
flex-direction: column;
}
.tab-btn-19crp {
width: 100%;
min-width: auto;
border-bottom: 1px solid #eee;
border-left: none;
border-right: none;
}
.tab-btn-19crp.active {
border-top: 3px solid #007bff;
border-bottom: 1px solid #eee;
}
.info-grid-19crp {
grid-template-columns: 1fr; /* Одна колонка на телефоне */
}
}
/***************** новости на главной********************************/
/* Контейнер для сетки новостей */
.news-grid-row_19crp {
margin-left: -15px;
margin-right: -15px;
}
/* Обертка одной карточки (чтобы работало col-md-6) */
.news-card-col_19crp {
padding-left: 15px;
padding-right: 15px;
margin-bottom: 30px; /* Отступ между карточками */
}
/* Сама карточка новости */
.news-card_19crp {
display: flex;
align-items: flex-start;
gap: 20px;
border-bottom: 1px solid #eee;
padding-bottom: 20px;
}
/* Блок с картинкой (фиксированная ширина) */
.news-img-box_19crp {
flex: 0 0 25%; /* Всегда 25% ширины карточки */
min-width: 120px; /* Чтобы на узких экранах не сжималась в точку */
max-width: 200px; /* Ограничение максимальной ширины картинки */
}
.news-img-box_19crp img {
width: 100%;
height: auto;
display: block;
border-radius: 4px;
object-fit: cover;
}
/* Блок с текстом (занимает все остальное место) */
.news-text-box_19crp {
flex: 1;
}
.news-text-box_19crp h3 {
margin: 0 0 10px 0;
line-height: 1.3;
}
.news-date_19crp {
color: #666;
font-size: 0.9rem;
margin-bottom: 8px;
}
.news-anno_19crp {
color: #333;
line-height: 1.5;
margin-bottom: 12px;
}