/* Основной файл стилей для сайта поликлиники */

/* Reset и базовые стили для сброса стандартных отступов и установки box-sizing */
* {
    margin: 0;          /* Сброс внешних отступов */
    padding: 0;         /* Сброс внутренних отступов */
    box-sizing: border-box; /* Учет padding и border в ширине элемента */
    transition: color 0.3s ease, background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; /* Плавные переходы */
}

/* Стили для body - основного контейнера страницы */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Шрифтовая гарнитура */
    line-height: 1.6;   /* Межстрочный интервал для лучшей читаемости */
    color: #2c3e50;     /* Основной цвет текста */
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* Градиентный фон страницы */
    min-height: 100vh;  /* Минимальная высота на весь экран */
}

/* Контейнер для ограничения максимальной ширины и центрирования контента */
.container {
    max-width: 1200px;  /* Максимальная ширина контента */
    margin: 0 auto;     /* Автоматические отступы по бокам для центрирования */
    padding: 0 20px;    /* Внутренние отступы по бокам */
}

/* Стили для шапки сайта */
header {
    background: rgba(255, 255, 255, 0.95); /* Полупрозрачный белый фон */
    backdrop-filter: blur(10px); /* Размытие фона для стеклянного эффекта */
    padding: 1rem 0;    /* Внутренние отступы сверху и снизу */
    position: sticky;   /* Липкое позиционирование */
    top: 0;             /* Прилипание к верху страницы */
    z-index: 1000;      /* Высокий z-index поверх других элементов */
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Полупрозрачная граница снизу */
    box-shadow: 0 4px 20px rgba(0,0,0,0.1); /* Тень для глубины */
}

/* Контейнер заголовка с flex-распределением */
header .container {
    display: flex;              /* Flexbox для горизонтального расположения */
    justify-content: space-between; /* Распределение пространства между элементами */
    align-items: center;        /* Выравнивание по центру по вертикали */
    flex-wrap: wrap;            /* Перенос на новую строку при нехватке места */
}

/* Стили для главного заголовка */
header h1 {
    color: #2c3e50;            /* Цвет текста */
    font-size: 2rem;           /* Размер шрифта */
    font-weight: 700;          /* Жирное начертание */
    background: linear-gradient(135deg, #667eea, #764ba2); /* Градиентный текст */
    -webkit-background-clip: text; /* Обрезка фона по тексту */
    -webkit-text-fill-color: transparent; /* Прозрачный цвет текста для градиента */
    margin-bottom: 0.5rem;     /* Отступ снизу */
}

/* Стили для навигационного меню */
nav ul {
    list-style: none;          /* Убираем маркеры списка */
    display: flex;             /* Горизонтальное меню */
    gap: 2rem;                 /* Расстояние между пунктами меню */
    flex-wrap: wrap;           /* Перенос пунктов меню на новую строку */
}

/* Стили для ссылок в навигации */
nav a {
    color: #2c3e50;           /* Цвет текста */
    text-decoration: none;     /* Убираем подчеркивание */
    font-weight: 600;          /* Полужирное начертание */
    padding: 0.5rem 1rem;      /* Внутренние отступы */
    border-radius: 25px;       /* Скругленные углы */
    transition: all 0.3s ease; /* Плавные переходы */
    position: relative;        /* Для позиционирования псевдоэлементов */
}

/* Эффекты при наведении на ссылки навигации */
nav a:hover {
    color: #667eea;           /* Изменение цвета текста */
    background: rgba(102, 126, 234, 0.1); /* Легкий фон при наведении */
    transform: translateY(-2px); /* Легкий подъем */
}

/* Подчеркивание ссылок при наведении с помощью псевдоэлемента */
nav a::after {
    content: '';              /* Пустой контент */
    position: absolute;       /* Абсолютное позиционирование */
    bottom: -5px;            /* Позиционирование снизу */
    left: 50%;               /* Центрирование по горизонтали */
    width: 0;                /* Начальная ширина 0 */
    height: 2px;             /* Высота линии */
    background: linear-gradient(135deg, #667eea, #764ba2); /* Градиентная линия */
    transition: all 0.3s ease; /* Плавное изменение */
    transform: translateX(-50%); /* Центрирование */
}

/* Анимация подчеркивания при наведении */
nav a:hover::after {
    width: 80%;              /* Ширина линии 80% от ссылки */
}

/* Стили для основного контента */
main {
    padding: 2rem 0;         /* Внутренние отступы сверху и снизу */
}

/* Стили для всех секций */
section {
    margin: 3rem 0;          /* Внешние отступы сверху и снизу */
    padding: 3rem 2rem;      /* Внутренние отступы */
    background: rgba(255, 255, 255, 0.95); /* Полупрозрачный белый фон */
    backdrop-filter: blur(10px); /* Размытие фона */
    border-radius: 20px;     /* Скругление углов */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Полупрозрачная граница */
    box-shadow: 0 8px 32px rgba(0,0,0,0.1); /* Тень для глубины */
    position: relative;      /* Для позиционирования псевдоэлементов */
    overflow: hidden;        /* Скрытие выходящего за границы контента */
}

/* Цветная полоса сверху секций */
section::before {
    content: '';             /* Пустой контент */
    position: absolute;      /* Абсолютное позиционирование */
    top: 0;                 /* Вверху секции */
    left: 0;                /* Слева секции */
    right: 0;               /* На всю ширину */
    height: 4px;            /* Высота полосы */
    background: linear-gradient(135deg, #667eea, #764ba2); /* Градиентный фон */
}

/* Стили для заголовков секций h2 */
h2 {
    color: #2c3e50;         /* Цвет текста */
    margin-bottom: 2rem;    /* Отступ снизу */
    font-size: 2.2rem;      /* Размер шрифта */
    text-align: center;     /* Выравнивание по центру */
    position: relative;     /* Для позиционирования псевдоэлемента */
    padding-bottom: 1rem;   /* Отступ снизу для псевдоэлемента */
}

/* Подчеркивание заголовков секций */
h2::after {
    content: '';            /* Пустой контент */
    position: absolute;     /* Абсолютное позиционирование */
    bottom: 0;             /* Внизу заголовка */
    left: 50%;             /* Центрирование по горизонтали */
    transform: translateX(-50%); /* Точное центрирование */
    width: 50%;            /* Ширина 50% от заголовка */
    height: 4px;           /* Высота линии */
    background: linear-gradient(135deg, #667eea, #764ba2); /* Градиентный фон */
    border-radius: 2px;    /* Легкое скругление углов */
}

/* Стили для секции "О нас" */
.about-content {
    max-width: 1200px;     /* Ограничение максимальной ширины */
    margin: 0 auto;        /* Центрирование */
}

/* Основной блок героя секции "О нас" */
.about-hero {
    display: grid;                    /* CSS Grid layout */
    grid-template-columns: 2fr 1fr;  /* Соотношение колонок 2:1 */
    gap: 3rem;                       /* Расстояние между колонками */
    align-items: center;             /* Выравнивание по центру по вертикали */
    margin-bottom: 3rem;             /* Отступ снизу */
}

/* Стили для текстовой части героя */
.about-text h3 {
    color: #2c3e50;                  /* Цвет текста */
    font-size: 2rem;                 /* Размер шрифта */
    margin-bottom: 1.5rem;           /* Отступ снизу */
    background: linear-gradient(135deg, #667eea, #764ba2); /* Градиентный текст */
    -webkit-background-clip: text;   /* Обрезка фона по тексту */
    -webkit-text-fill-color: transparent; /* Прозрачный цвет текста */
}

/* Стили для вводного текста */
.lead {
    font-size: 1.2rem;     /* Увеличенный размер шрифта */
    line-height: 1.7;      /* Увеличенный межстрочный интервал */
    color: #6c757d;        /* Серый цвет текста */
    margin-bottom: 2rem;   /* Отступ снизу */
}

/* Сетка статистики */
.stats-grid {
    display: grid;                    /* CSS Grid layout */
    grid-template-columns: repeat(4, 1fr); /* 4 равные колонки */
    gap: 1rem;                       /* Расстояние между карточками */
    margin-top: 2rem;                /* Отступ сверху */
}

/* Стили для карточек статистики */
.stat-card {
    background: linear-gradient(135deg, #667eea, #764ba2); /* Градиентный фон */
    color: white;                    /* Белый текст */
    padding: 1.5rem;                 /* Внутренние отступы */
    border-radius: 12px;             /* Скругление углов */
    text-align: center;              /* Выравнивание по центру */
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3); /* Тень с цветом градиента */
    transition: transform 0.3s ease; /* Плавная трансформация */
}

/* Эффект подъема карточек статистики при наведении */
.stat-card:hover {
    transform: translateY(-5px);     /* Подъем на 5px */
}

/* Стили для числового значения в статистике */
.stat-number {
    font-size: 2.5rem;    /* Крупный размер шрифта */
    font-weight: bold;    /* Жирное начертание */
    margin-bottom: 0.5rem; /* Отступ снизу */
}

/* Стили для подписи в статистике */
.stat-label {
    font-size: 0.9rem;    /* Мелкий шрифт */
    opacity: 0.9;         /* Легкая прозрачность */
}

/* Стили для блока с изображением */
.about-image {
    display: flex;                   /* Flexbox для центрирования */
    justify-content: center;         /* Центрирование по горизонтали */
    align-items: center;             /* Центрирование по вертикали */
}

/* Заглушка для изображения */
.image-placeholder {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef); /* Градиентный фон */
    border: 2px dashed #667eea;     /* Пунктирная граница */
    border-radius: 16px;             /* Скругление углов */
    padding: 3rem 2rem;              /* Внутренние отступы */
    text-align: center;              /* Выравнивание по центру */
    width: 100%;                     /* Ширина 100% */
}

/* Стили для медицинской иконки */
.medical-icon {
    font-size: 4rem;      /* Крупный размер иконки */
    margin-bottom: 1rem;  /* Отступ снизу */
}

/* Стили для текста в заглушке изображения */
.image-placeholder p {
    color: #6c757d;       /* Серый цвет текста */
    font-style: italic;   /* Курсивное начертание */
}

/* Сетка преимуществ */
.features-grid {
    display: grid;                                /* CSS Grid layout */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Адаптивные колонки */
    gap: 2rem;                                   /* Расстояние между карточками */
    margin: 3rem 0;                              /* Отступы сверху и снизу */
}

/* Стили для карточек преимуществ */
.feature-card {
    background: white;              /* Белый фон */
    padding: 2rem;                  /* Внутренние отступы */
    border-radius: 16px;            /* Скругление углов */
    text-align: center;             /* Выравнивание по центру */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Тень */
    transition: all 0.3s ease;      /* Плавные переходы */
    border: 1px solid #e1e8ed;     /* Граница */
    position: relative;             /* Для позиционирования псевдоэлемента */
    overflow: hidden;               /* Скрытие выходящего контента */
}

/* Цветная полоса сверху карточек преимуществ */
.feature-card::before {
    content: '';                    /* Пустой контент */
    position: absolute;             /* Абсолютное позиционирование */
    top: 0;                        /* Вверху карточки */
    left: 0;                       /* Слева карточки */
    width: 100%;                   /* На всю ширину */
    height: 4px;                   /* Высота полосы */
    background: linear-gradient(135deg, #667eea, #764ba2); /* Градиентный фон */
}

/* Эффекты при наведении на карточки преимуществ */
.feature-card:hover {
    transform: translateY(-8px);    /* Подъем карточки */
    box-shadow: 0 12px 30px rgba(0,0,0,0.15); /* Увеличенная тень */
}

/* Стили для иконок преимуществ */
.feature-icon {
    font-size: 3rem;      /* Крупный размер иконок */
    margin-bottom: 1rem;  /* Отступ снизу */
}

/* Стили для заголовков преимуществ */
.feature-card h4 {
    color: #2c3e50;       /* Цвет текста */
    margin-bottom: 1rem;  /* Отступ снизу */
    font-size: 1.3rem;    /* Размер шрифта */
}

/* Стили для текста преимуществ */
.feature-card p {
    color: #6c757d;       /* Серый цвет текста */
    line-height: 1.6;     /* Межстрочный интервал */
}

/* Стили для секции миссии */
.mission-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* Градиентный фон */
    color: white;                    /* Белый текст */
    padding: 3rem;                   /* Внутренние отступы */
    border-radius: 16px;             /* Скругление углов */
    margin: 3rem 0;                  /* Отступы сверху и снизу */
}

/* Стили для заголовка миссии */
.mission-section h3 {
    color: white;          /* Белый текст */
    text-align: center;    /* Выравнивание по центру */
    margin-bottom: 2rem;   /* Отступ снизу */
    font-size: 2rem;       /* Размер шрифта */
}

/* Стили для текста миссии */
.mission-content p {
    font-size: 1.2rem;     /* Увеличенный размер шрифта */
    line-height: 1.7;      /* Увеличенный межстрочный интервал */
    text-align: center;    /* Выравнивание по центру */
    margin-bottom: 2rem;   /* Отступ снизу */
    opacity: 0.9;          /* Легкая прозрачность */
}

/* Сетка ценностей */
.values-list {
    display: grid;                                /* CSS Grid layout */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Адаптивные колонки */
    gap: 1.5rem;                                 /* Расстояние между элементами */
    margin-top: 2rem;                            /* Отступ сверху */
}

/* Стили для элементов ценностей */
.value-item {
    background: rgba(255, 255, 255, 0.1); /* Полупрозрачный белый фон */
    backdrop-filter: blur(10px);           /* Размытие фона */
    padding: 1.5rem;                       /* Внутренние отступы */
    border-radius: 12px;                   /* Скругление углов */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Полупрозрачная граница */
    transition: transform 0.3s ease;       /* Плавная трансформация */
}

/* Эффект сдвига элементов ценностей при наведении */
.value-item:hover {
    transform: translateX(10px);           /* Сдвиг вправо */
}

/* Стили для заголовков ценностей */
.value-item strong {
    font-size: 1.1rem;    /* Размер шрифта */
    margin-bottom: 0.5rem; /* Отступ снизу */
    display: block;        /* Блочный элемент */
}

/* Стили для текста ценностей */
.value-item p {
    font-size: 0.95rem;   /* Мелкий шрифт */
    opacity: 0.8;         /* Полупрозрачность */
    margin: 0;            /* Сброс отступов */
}

/* Стили для списка филиалов */
.branches-list {
    display: grid;                                /* CSS Grid layout */
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* Адаптивные колонки */
    gap: 2rem;                                   /* Расстояние между карточками */
}

/* Стили для карточек филиалов */
.branch-card {
    background: white;              /* Белый фон */
    border-radius: 16px;            /* Скругление углов */
    padding: 2rem;                  /* Внутренние отступы */
    box-shadow: 0 8px 25px rgba(0,0,0,0.1); /* Тень */
    transition: all 0.3s ease;      /* Плавные переходы */
    position: relative;             /* Для позиционирования псевдоэлемента и бейджа */
    overflow: hidden;               /* Скрытие выходящего контента */
    border: 1px solid #e1e8ed;     /* Граница */
}

/* Цветная полоса слева карточек филиалов */
.branch-card::before {
    content: '';                    /* Пустой контент */
    position: absolute;             /* Абсолютное позиционирование */
    top: 0;                        /* Вверху карточки */
    left: 0;                       /* Слева карточки */
    width: 4px;                    /* Ширина полосы */
    height: 100%;                  /* На всю высоту */
    background: linear-gradient(135deg, #667eea, #764ba2); /* Градиентный фон */
}

/* Эффекты при наведении на карточки филиалов */
.branch-card:hover {
    transform: translateY(-8px);    /* Подъем карточки */
    box-shadow: 0 15px 40px rgba(0,0,0,0.15); /* Увеличенная тень */
}

/* Стили для главного филиала */
.branch-card.main-branch {
    border: 2px solid #667eea;     /* Синяя граница */
    background: linear-gradient(135deg, #fff 0%, #f8f9ff 100%); /* Градиентный фон */
}

/* Стили для бейджа главного филиала */
.branch-badge {
    position: absolute;             /* Абсолютное позиционирование */
    top: 1rem;                     /* Отступ сверху */
    right: 1rem;                   /* Отступ справа */
    background: linear-gradient(135deg, #667eea, #764ba2); /* Градиентный фон */
    color: white;                  /* Белый текст */
    padding: 0.5rem 1rem;          /* Внутренние отступы */
    border-radius: 20px;           /* Скругленные углы */
    font-size: 0.8rem;             /* Мелкий шрифт */
    font-weight: bold;             /* Жирное начертание */
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); /* Тень */
}

/* Стили для заголовков филиалов */
.branch-card h3 {
    color: #2c3e50;       /* Цвет текста */
    margin-bottom: 1rem;  /* Отступ снизу */
    font-size: 1.4rem;    /* Размер шрифта */
}

/* Стили для информации о филиалах */
.branch-info div {
    margin-bottom: 0.8rem;         /* Отступ между строками */
    display: flex;                 /* Flexbox для выравнивания иконок и текста */
    align-items: flex-start;       /* Выравнивание по верху */
    gap: 0.5rem;                  /* Расстояние между иконкой и текстом */
    color: #6c757d;               /* Серый цвет текста */
}

/* Стили для секции отделений */
.filter-section {
    margin-bottom: 2rem;           /* Отступ снизу */
    display: flex;                 /* Flexbox для горизонтального расположения */
    gap: 1rem;                     /* Расстояние между фильтрами */
    flex-wrap: wrap;               /* Перенос на новую строку */
    justify-content: center;       /* Центрирование фильтров */
}

/* Стили для выпадающих списков фильтров */
.filter-select {
    padding: 1rem 1.5rem;          /* Внутренние отступы */
    border: 2px solid #e1e8ed;     /* Граница */
    border-radius: 12px;           /* Скругление углов */
    font-size: 1rem;               /* Размер шрифта */
    background: white;             /* Белый фон */
    color: #2c3e50;               /* Цвет текста */
    cursor: pointer;               /* Указатель при наведении */
    transition: all 0.3s ease;     /* Плавные переходы */
    min-width: 250px;              /* Минимальная ширина */
}

/* Стили для фокуса на фильтрах */
.filter-select:focus {
    outline: none;                 /* Убираем стандартный контур */
    border-color: #667eea;         /* Синяя граница */
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); /* Синяя тень */
}

/* Эффекты при наведении на фильтры */
.filter-select:hover {
    border-color: #667eea;         /* Синяя граница */
}

/* Сетка отделений */
.departments-list {
    display: grid;                                /* CSS Grid layout */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* Адаптивные колонки */
    gap: 1.5rem;                                 /* Расстояние между карточками */
}

/* Стили для карточек отделений */
.department-card {
    background: white;              /* Белый фон */
    border-radius: 12px;            /* Скругление углов */
    padding: 1.5rem;                /* Внутренние отступы */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Тень */
    transition: all 0.3s ease;      /* Плавные переходы */
    border-left: 4px solid #667eea; /* Синяя полоса слева */
    position: relative;             /* Для позиционирования */
    overflow: hidden;               /* Скрытие выходящего контента */
}

/* Эффекты при наведении на карточки отделений */
.department-card:hover {
    transform: translateY(-5px);    /* Подъем карточки */
    box-shadow: 0 8px 25px rgba(0,0,0,0.15); /* Увеличенная тень */
}

/* Стили для метки филиала в карточках отделений */
.department-card .branch {
    background: linear-gradient(135deg, #667eea, #764ba2); /* Градиентный фон */
    color: white;                  /* Белый текст */
    padding: 0.5rem 1rem;          /* Внутренние отступы */
    border-radius: 20px;           /* Скругленные углы */
    font-size: 0.8rem;             /* Мелкий шрифт */
    display: inline-block;         /* Строчно-блочный элемент */
    margin-bottom: 1rem;           /* Отступ снизу */
    font-weight: 600;              /* Полужирное начертание */
}

/* Стили для заголовков отделений */
.department-card h3 {
    color: #2c3e50;       /* Цвет текста */
    margin-bottom: 0.8rem; /* Отступ снизу */
    font-size: 1.3rem;    /* Размер шрифта */
}

/* Стили для описания отделений */
.department-card p {
    color: #6c757d;       /* Серый цвет текста */
    line-height: 1.6;     /* Межстрочный интервал */
}

/* Сетка врачей */
.doctors-list {
    display: grid;                                /* CSS Grid layout */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* Адаптивные колонки */
    gap: 1.5rem;                                 /* Расстояние между карточками */
}

/* Стили для карточек врачей */
.doctor-card {
    background: white;              /* Белый фон */
    border-radius: 12px;            /* Скругление углов */
    padding: 1.5rem;                /* Внутренние отступы */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Тень */
    transition: all 0.3s ease;      /* Плавные переходы */
    position: relative;             /* Для позиционирования псевдоэлемента */
    overflow: hidden;               /* Скрытие выходящего контента */
    border: 1px solid #e1e8ed;     /* Граница */
}

/* Цветная полоса слева карточек врачей */
.doctor-card::before {
    content: '';                    /* Пустой контент */
    position: absolute;             /* Абсолютное позиционирование */
    top: 0;                        /* Вверху карточки */
    left: 0;                       /* Слева карточки */
    width: 4px;                    /* Ширина полосы */
    height: 100%;                  /* На всю высоту */
    background: linear-gradient(135deg, #667eea, #764ba2); /* Градиентный фон */
}

/* Эффекты при наведении на карточки врачей */
.doctor-card:hover {
    transform: translateY(-8px);    /* Подъем карточки */
    box-shadow: 0 12px 30px rgba(0,0,0,0.15); /* Увеличенная тень */
}

/* Стили для метки филиала в карточках врачей */
.doctor-card .branch {
    background: linear-gradient(135deg, #667eea, #764ba2); /* Градиентный фон */
    color: white;                  /* Белый текст */
    padding: 0.4rem 0.8rem;        /* Внутренние отступы */
    border-radius: 15px;           /* Скругленные углы */
    font-size: 0.75rem;            /* Мелкий шрифт */
    display: inline-block;         /* Строчно-блочный элемент */
    margin-bottom: 0.5rem;         /* Отступ снизу */
    margin-right: 0.5rem;          /* Отступ справа */
    font-weight: 600;              /* Полужирное начертание */
}

/* Стили для метки отделения в карточках врачей */
.doctor-card .department {
    background: #ecf0f1;           /* Светло-серый фон */
    color: #2c3e50;               /* Темный текст */
    padding: 0.4rem 0.8rem;        /* Внутренние отступы */
    border-radius: 15px;           /* Скругленные углы */
    font-size: 0.75rem;            /* Мелкий шрифт */
    display: inline-block;         /* Строчно-блочный элемент */
    margin-bottom: 1rem;           /* Отступ снизу */
    font-weight: 600;              /* Полужирное начертание */
}

/* Стили для имени врача */
.doctor-card h3 {
    color: #2c3e50;       /* Цвет текста */
    margin-bottom: 0.5rem; /* Отступ снизу */
    font-size: 1.2rem;    /* Размер шрифта */
}

/* Стили для специальности врача */
.specialty {
    color: #667eea;       /* Синий цвет текста */
    font-style: italic;   /* Курсивное начертание */
    margin-bottom: 0.5rem; /* Отступ снизу */
    font-weight: 600;     /* Полужирное начертание */
}

/* Стили для опыта, квалификации и контактов врача */
.experience, .qualification, .contact {
    color: #6c757d;       /* Серый цвет текста */
    margin-bottom: 0.3rem; /* Отступ снизу */
    font-size: 0.9rem;    /* Мелкий шрифт */
}

/* Стили для секции поиска */
#search {
    /*background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* Градиентный фон */
    background: white;             /* Белый фон */
    color: white;                    /* Белый текст */
}

/* Стили для заголовка секции поиска */
#search h2 {
    color: #2c3e50;          /* Белый текст */
}

/* Стили для подчеркивания заголовка поиска */
#search h2::after {
    /*background: rgba(255, 255, 255, 0.8); /* Полупрозрачный белый фон */
}

/* Контейнер для секций поиска */
.search-sections-container {
    display: grid;                                /* CSS Grid layout */
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); /* Адаптивные колонки */
    gap: 2rem;                                   /* Расстояние между секциями */
    margin-top: 2rem;                            /* Отступ сверху */
}

/* Стили для отдельных секций поиска */
.search-section {
    background: rgba(255, 255, 255, 0.95); /* Полупрозрачный белый фон */
    backdrop-filter: blur(10px);           /* Размытие фона */
    padding: 2rem;                         /* Внутренние отступы */
    border-radius: 16px;                   /* Скругление углов */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Полупрозрачная граница */
    box-shadow: 0 8px 32px rgba(0,0,0,0.1); /* Тень */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Плавные переходы */
}

/* Эффекты при наведении на секции поиска */
.search-section:hover {
    transform: translateY(-5px);           /* Подъем секции */
    box-shadow: 0 12px 40px rgba(0,0,0,0.15); /* Увеличенная тень */
}

/* Стили для подзаголовков секций поиска */
.search-section h3 {
    color: #2c3e50;       /* Цвет текста */
    margin-bottom: 1.5rem; /* Отступ снизу */
    font-size: 1.4rem;    /* Размер шрифта */
}

/* Стили для выпадающих списков поиска */
.search-select {
    width: 100%;           /* Ширина 100% */
    padding: 1rem 1.5rem;  /* Внутренние отступы */
    border: 2px solid #e1e8ed; /* Граница */
    border-radius: 12px;   /* Скругление углов */
    font-size: 1rem;       /* Размер шрифта */
    background: white;     /* Белый фон */
    color: #2c3e50;       /* Цвет текста */
    cursor: pointer;       /* Указатель при наведении */
    transition: all 0.3s ease; /* Плавные переходы */
}

/* Стили для фокуса на выпадающих списках поиска */
.search-select:focus {
    outline: none;                 /* Убираем стандартный контур */
    border-color: #667eea;         /* Синяя граница */
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); /* Синяя тень */
}

/* Эффекты при наведении на выпадающие списки поиска */
.search-select:hover {
    border-color: #667eea;         /* Синяя граница */
}

/* Стили для контейнера результатов поиска */
.search-results {
    margin-top: 1.5rem;    /* Отступ сверху */
    min-height: 100px;     /* Минимальная высота */
}

/* Стили для секции расписания */
.schedule-controls {
    margin-bottom: 2rem;           /* Отступ снизу */
    display: flex;                 /* Flexbox для горизонтального расположения */
    gap: 1rem;                     /* Расстояние между элементами */
    flex-wrap: wrap;               /* Перенос на новую строку */
    justify-content: center;       /* Центрирование */
    align-items: center;           /* Выравнивание по центру по вертикали */
}

/* Стили для элементов управления расписанием */
.schedule-controls select,
.schedule-controls input {
    padding: 1rem 1.5rem;          /* Внутренние отступы */
    border: 2px solid #e1e8ed;     /* Граница */
    border-radius: 12px;           /* Скругление углов */
    font-size: 1rem;               /* Размер шрифта */
    background: white;             /* Белый фон */
    color: #2c3e50;               /* Цвет текста */
    transition: all 0.3s ease;     /* Плавные переходы */
    min-width: 200px;              /* Минимальная ширина */
}

/* Стили для фокуса на элементах управления расписанием */
.schedule-controls select:focus,
.schedule-controls input:focus {
    outline: none;                 /* Убираем стандартный контур */
    border-color: #667eea;         /* Синяя граница */
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); /* Синяя тень */
}

/* Стили для кнопки расписания */
.schedule-btn {
    padding: 1rem 2rem;            /* Внутренние отступы */
    background: linear-gradient(135deg, #667eea, #764ba2); /* Градиентный фон */
    color: white;                  /* Белый текст */
    border: none;                  /* Без границы */
    border-radius: 12px;           /* Скругление углов */
    cursor: pointer;               /* Указатель при наведении */
    font-size: 1rem;               /* Размер шрифта */
    font-weight: 600;              /* Полужирное начертание */
    transition: all 0.3s ease;     /* Плавные переходы */
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); /* Тень */
}

/* Эффекты при наведении на кнопку расписания */
.schedule-btn:hover {
    transform: translateY(-2px);   /* Подъем кнопки */
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4); /* Увеличенная тень */
}

/* Стили для списка расписания */
.schedule-list {
    display: grid;          /* CSS Grid layout */
    gap: 1rem;             /* Расстояние между элементами */
}

/* Стили для элементов расписания */
.schedule-item {
    background: white;              /* Белый фон */
    border-radius: 12px;            /* Скругление углов */
    padding: 1.5rem;                /* Внутренние отступы */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Тень */
    transition: all 0.3s ease;      /* Плавные переходы */
    display: flex;                  /* Flexbox для распределения контента */
    justify-content: space-between; /* Пространство между информацией и временем */
    align-items: center;            /* Выравнивание по центру по вертикали */
    border-left: 4px solid #667eea; /* Синяя полоса слева */
}

/* Эффекты при наведении на элементы расписания */
.schedule-item:hover {
    transform: translateX(5px);     /* Сдвиг вправо */
    box-shadow: 0 8px 25px rgba(0,0,0,0.15); /* Увеличенная тень */
}

/* Стили для информационной части элемента расписания */
.schedule-info {
    flex-grow: 1;          /* Занимает все доступное пространство */
}

/* Стили для метки филиала в расписании */
.schedule-info .branch {
    background: linear-gradient(135deg, #667eea, #764ba2); /* Градиентный фон */
    color: white;                  /* Белый текст */
    padding: 0.3rem 0.8rem;        /* Внутренние отступы */
    border-radius: 15px;           /* Скругленные углы */
    font-size: 0.75rem;            /* Мелкий шрифт */
    display: inline-block;         /* Строчно-блочный элемент */
    margin-bottom: 0.5rem;         /* Отступ снизу */
    font-weight: 600;              /* Полужирное начертание */
}

/* Стили для блока времени в расписании */
.schedule-time {
    background: linear-gradient(135deg, #2ecc71, #27ae60); /* Зеленый градиентный фон */
    color: white;                  /* Белый текст */
    padding: 0.8rem 1.5rem;        /* Внутренние отступы */
    border-radius: 25px;           /* Скругленные углы */
    font-weight: bold;             /* Жирное начертание */
    font-size: 1.1rem;             /* Размер шрифта */
    box-shadow: 0 4px 15px rgba(46, 204, 113, 0.3); /* Зеленая тень */
}

/* Стили для результатов поиска по отделениям и специализациям */
.department-branches,
.specialty-results {
    display: grid;          /* CSS Grid layout */
    gap: 1rem;             /* Расстояние между элементами */
}

/* Стили для карточек отделений и филиалов в результатах поиска */
.branch-department-card,
.specialty-branch-card {
    background: white;              /* Белый фон */
    border: 1px solid #e1e8ed;     /* Граница */
    border-radius: 12px;            /* Скругление углов */
    padding: 1.5rem;                /* Внутренние отступы */
    transition: all 0.3s ease;      /* Плавные переходы */
    position: relative;             /* Для позиционирования псевдоэлемента */
    overflow: hidden;               /* Скрытие выходящего контента */
}

/* Цветная полоса слева карточек в результатах поиска */
.branch-department-card::before,
.specialty-branch-card::before {
    content: '';                    /* Пустой контент */
    position: absolute;             /* Абсолютное позиционирование */
    top: 0;                        /* Вверху карточки */
    left: 0;                       /* Слева карточки */
    width: 4px;                    /* Ширина полосы */
    height: 100%;                  /* На всю высоту */
    background: linear-gradient(135deg, #667eea, #764ba2); /* Градиентный фон */
}

/* Эффекты при наведении на карточки в результатах поиска */
.branch-department-card:hover,
.specialty-branch-card:hover {
    transform: translateX(5px);     /* Сдвиг вправо */
    box-shadow: 0 8px 25px rgba(0,0,0,0.1); /* Тень */
}

/* Стили для заголовков в карточках результатов поиска */
.branch-department-card h4,
.specialty-branch-card h4 {
    color: #2c3e50;       /* Цвет текста */
    margin-bottom: 1rem;  /* Отступ снизу */
    font-size: 1.2rem;    /* Размер шрифта */
}

/* Стили для информации о филиале в результатах поиска */
.department-branch-info,
.specialty-branch-info {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef); /* Градиентный фон */
    padding: 1rem;                  /* Внутренние отступы */
    border-radius: 8px;             /* Скругление углов */
    margin-top: 0.5rem;             /* Отступ сверху */
    border-left: 3px solid #667eea; /* Синяя полоса слева */
}

/* Стили для текста в информации о филиале */
.department-branch-info p,
.specialty-branch-info p {
    margin: 0.3rem 0;     /* Отступы сверху и снизу */
    color: #495057;       /* Цвет текста */
}

/* Сетка для мини-списка врачей в результатах поиска */
.doctors-mini-list {
    display: grid;          /* CSS Grid layout */
    gap: 0.8rem;           /* Расстояние между карточками */
    margin-top: 1rem;      /* Отступ сверху */
}

/* Стили для карточек врачей в результатах поиска */
.specialty-doctor-card {
    background: white;              /* Белый фон */
    border: 1px solid #e1e8ed;     /* Граница */
    border-radius: 10px;            /* Скругление углов */
    padding: 1rem;                  /* Внутренние отступы */
    transition: all 0.3s ease;      /* Плавные переходы */
    position: relative;             /* Для позиционирования псевдоэлемента */
}

/* Цветная полоса слева карточек врачей в результатах поиска */
.specialty-doctor-card::before {
    content: '';                    /* Пустой контент */
    position: absolute;             /* Абсолютное позиционирование */
    top: 0;                        /* Вверху карточки */
    left: 0;                       /* Слева карточки */
    width: 3px;                    /* Ширина полосы */
    height: 100%;                  /* На всю высоту */
    background: linear-gradient(135deg, #667eea, #764ba2); /* Градиентный фон */
}

/* Эффекты при наведении на карточки врачей в результатах поиска */
.specialty-doctor-card:hover {
    transform: translateY(-2px);    /* Подъем карточки */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Тень */
}

/* Стили для имени врача в результатах поиска */
.specialty-doctor-card h5 {
    color: #2c3e50;       /* Цвет текста */
    margin-bottom: 0.5rem; /* Отступ снизу */
    font-size: 1.1rem;    /* Размер шрифта */
}

/* Стили для информации о враче в результатах поиска */
.specialty-doctor-card p {
    margin: 0.2rem 0;     /* Отступы сверху и снизу */
    color: #6c757d;       /* Серый цвет текста */
    font-size: 0.9rem;    /* Мелкий шрифт */
}

/* Стили для статистики поиска */
.search-stats {
    display: flex;         /* Flexbox для горизонтального расположения */
    gap: 1rem;            /* Расстояние между элементами */
    margin-bottom: 1.5rem; /* Отступ снизу */
    flex-wrap: wrap;      /* Перенос на новую строку */
}

/* Стили для элементов статистики */
.stat-item {
    background: rgba(255, 255, 255, 0.2); /* Полупрозрачный белый фон */
    padding: 0.5rem 1rem;  /* Внутренние отступы */
    border-radius: 20px;   /* Скругленные углы */
    font-size: 0.9rem;     /* Мелкий шрифт */
    backdrop-filter: blur(10px); /* Размытие фона */
    border: 1px solid rgba(255, 255, 255, 0.3); /* Полупрозрачная граница */
}

/* Стили для вторичных кнопок */
.btn-secondary {
    background: linear-gradient(135deg, #95a5a6, #7f8c8d); /* Градиентный серый фон */
    color: white;                  /* Белый текст */
    border: none;                  /* Без границы */
    padding: 0.8rem 1.5rem;        /* Внутренние отступы */
    border-radius: 25px;           /* Скругленные углы */
    cursor: pointer;               /* Указатель при наведении */
    font-weight: 600;              /* Полужирное начертание */
    transition: all 0.3s ease;     /* Плавные переходы */
    box-shadow: 0 4px 15px rgba(149, 165, 166, 0.3); /* Тень */
    margin-top: 1rem;              /* Отступ сверху */
}

/* Эффекты при наведении на вторичные кнопки */
.btn-secondary:hover {
    transform: translateY(-2px);   /* Подъем кнопки */
    box-shadow: 0 6px 20px rgba(149, 165, 166, 0.4); /* Увеличенная тень */
}

/* Стили для состояний без результатов */
.no-results {
    text-align: center;    /* Выравнивание по центру */
    padding: 2rem;         /* Внутренние отступы */
    color: #6c757d;       /* Серый цвет текста */
    font-style: italic;   /* Курсивное начертание */
    background: rgba(255, 255, 255, 0.5); /* Полупрозрачный белый фон */
    border-radius: 10px;   /* Скругление углов */
    border: 2px dashed #dee2e6; /* Пунктирная граница */
}

/* Стили для состояния загрузки поиска */
.search-loading {
    text-align: center;    /* Выравнивание по центру */
    padding: 2rem;         /* Внутренние отступы */
    color: #6c757d;       /* Серый цвет текста */
}

/* Стили для подвала сайта */
footer {
    background: rgba(255, 255, 255, 0.95); /* Полупрозрачный белый фон */
    backdrop-filter: blur(10px);   /* Размытие фона */
    color: #2c3e50;               /* Цвет текста */
    text-align: center;            /* Выравнивание по центру */
    padding: 2rem 0;               /* Внутренние отступы */
    margin-top: 3rem;              /* Отступ сверху */
    border-top: 1px solid rgba(255, 255, 255, 0.2); /* Полупрозрачная граница сверху */
}

/* Анимация спиннера загрузки */
@keyframes spin {
    0% { transform: rotate(0deg); }   /* Начальное положение */
    100% { transform: rotate(360deg); } /* Конечное положение (полный оборот) */
}

/* Анимация появления контента */
@keyframes fadeInUp {
    from {
        opacity: 0;                   /* Начальная прозрачность */
        transform: translateY(20px);  /* Начальное положение снизу */
    }
    to {
        opacity: 1;                   /* Конечная прозрачность */
        transform: translateY(0);     /* Конечное положение */
    }
}

/* Применение анимации к контенту результатов поиска */
.search-results-content {
    animation: fadeInUp 0.5s ease;    /* Анимация появления */
}

/* Адаптивность для мобильных устройств (максимальная ширина 768px) */
@media (max-width: 768px) {
    /* Адаптивность шапки */
    header .container {
        flex-direction: column;     /* Вертикальное расположение */
        text-align: center;         /* Выравнивание по центру */
    }

    header .container h1 {
        display: none;
    }
    
    /* Адаптивность навигации */
    nav ul {
        justify-content: center;    /* Центрирование пунктов меню */
        gap: 1rem;                 /* Уменьшение расстояния между пунктами */
    }
    
    /* Адаптивность секций */
    section {
        padding: 2rem 1rem;        /* Уменьшение внутренних отступов */
        margin: 2rem 0;            /* Уменьшение внешних отступов */
    }
    
    /* Адаптивность заголовков */
    h2 {
        font-size: 1.8rem;         /* Уменьшение размера шрифта */
    }
    
    /* Адаптивность героя секции "О нас" */
    .about-hero {
        grid-template-columns: 1fr; /* Одна колонка */
        gap: 2rem;                 /* Уменьшение расстояния */
        text-align: center;        /* Выравнивание по центру */
    }
    
    /* Адаптивность статистики */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 колонки вместо 4 */
    }
    
    /* Адаптивность списков (филиалы, отделения, врачи) */
    .branches-list,
    .departments-list,
    .doctors-list {
        grid-template-columns: 1fr; /* Одна колонка */
    }
    
    /* Адаптивность контейнера поиска */
    .search-sections-container {
        grid-template-columns: 1fr; /* Одна колонка */
    }
    
    /* Адаптивность сетки преимуществ */
    .features-grid {
        grid-template-columns: 1fr; /* Одна колонка */
    }
    
    /* Адаптивность списка ценностей */
    .values-list {
        grid-template-columns: 1fr; /* Одна колонка */
    }
    
    /* Адаптивность секций фильтров */
    .filter-section,
    .schedule-controls {
        flex-direction: column;     /* Вертикальное расположение */
        align-items: stretch;       /* Растягивание на всю ширину */
    }
    
    /* Адаптивность фильтров */
    .filter-select,
    .search-select,
    .schedule-controls select,
    .schedule-controls input {
        min-width: 100%;            /* Ширина 100% */
    }
    
    /* Адаптивность элементов расписания */
    .schedule-item {
        flex-direction: column;     /* Вертикальное расположение */
        align-items: flex-start;    /* Выравнивание по левому краю */
        gap: 1rem;                 /* Расстояние между элементами */
    }
    
    /* Адаптивность времени в расписании */
    .schedule-time {
        align-self: flex-end;       /* Выравнивание времени по правому краю */
    }
    
    /* Адаптивность статистики поиска */
    .search-stats {
        flex-direction: column;     /* Вертикальное расположение */
        gap: 0.5rem;               /* Уменьшение расстояния */
    }
    
    /* Адаптивность элементов статистики */
    .stat-item {
        text-align: center;         /* Выравнивание по центру */
    }
    
    /* Адаптивность секции миссии */
    .mission-section {
        padding: 2rem 1rem;        /* Уменьшение внутренних отступов */
    }
    
    /* Скрытие навигации и показ кнопки меню на мобильных */
    nav ul {
        display: none;              /* Скрытие навигации по умолчанию */
        flex-direction: column;     /* Вертикальное меню */
        position: absolute;         /* Абсолютное позиционирование */
        top: 100%;                 /* Под шапкой */
        left: 0;                   /* Слева */
        right: 0;                  /* На всю ширину */
        background: white;          /* Белый фон */
        box-shadow: 0 4px 20px rgba(0,0,0,0.1); /* Тень */
    }
    
    /* Показ кнопки переключения меню */
    .menu-toggle {
        display: block;             /* Показ кнопки меню */
    }
}

/* Стили для секции контактов */
.contacts-content {
    max-width: 1200px;     /* Ограничение максимальной ширины */
    margin: 0 auto;        /* Центрирование */
}

/* Сетка контактов */
.contacts-grid {
    display: grid;                    /* CSS Grid layout */
    grid-template-columns: 1fr 1fr;  /* Две равные колонки */
    gap: 2rem;                       /* Расстояние между колонками */
    margin-bottom: 3rem;             /* Отступ снизу */
}

/* Стили для подсекций контактов */
.contacts-section {
    margin-bottom: 2rem;   /* Отступ снизу */
}

/* Стили для заголовков подсекций контактов */
.contacts-section h3 {
    color: #2c3e50;       /* Цвет текста */
    margin-bottom: 1.5rem; /* Отступ снизу */
    font-size: 1.4rem;    /* Размер шрифта */
    border-bottom: 2px solid #667eea; /* Синее подчеркивание */
    padding-bottom: 0.5rem; /* Отступ снизу для подчеркивания */
}

/* Стили для карточек руководства */
.administration-cards {
    display: grid;          /* CSS Grid layout */
    gap: 1.5rem;           /* Расстояние между карточками */
}

/* Стили для карточек администраторов */
.admin-card {
    background: white;              /* Белый фон */
    border-radius: 12px;            /* Скругление углов */
    padding: 1.5rem;                /* Внутренние отступы */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Тень */
    transition: all 0.3s ease;      /* Плавные переходы */
    border: 1px solid #e1e8ed;     /* Граница */
    position: relative;             /* Для позиционирования псевдоэлемента */
    overflow: hidden;               /* Скрытие выходящего контента */
}

/* Цветная полоса слева карточек администраторов */
.admin-card::before {
    content: '';                    /* Пустой контент */
    position: absolute;             /* Абсолютное позиционирование */
    top: 0;                        /* Вверху карточки */
    left: 0;                       /* Слева карточки */
    width: 4px;                    /* Ширина полосы */
    height: 100%;                  /* На всю высоту */
    background: linear-gradient(135deg, #667eea, #764ba2); /* Градиентный фон */
}

/* Эффекты при наведении на карточки администраторов */
.admin-card:hover {
    transform: translateY(-5px);    /* Подъем карточки */
    box-shadow: 0 8px 25px rgba(0,0,0,0.15); /* Увеличенная тень */
}

/* Стили для заголовка карточки администратора */
.admin-header {
    display: flex;                  /* Flexbox для распределения */
    justify-content: space-between; /* Пространство между заголовком и бейджем */
    align-items: flex-start;        /* Выравнивание по верху */
    margin-bottom: 1rem;            /* Отступ снизу */
}

/* Стили для заголовка должности */
.admin-header h4 {
    color: #2c3e50;       /* Цвет текста */
    margin: 0;            /* Сброс отступов */
    font-size: 1.2rem;    /* Размер шрифта */
}

/* Стили для бейджа администратора */
.admin-badge {
    background: linear-gradient(135deg, #667eea, #764ba2); /* Градиентный фон */
    color: white;                  /* Белый текст */
    padding: 0.3rem 0.8rem;        /* Внутренние отступы */
    border-radius: 15px;           /* Скругленные углы */
    font-size: 0.75rem;            /* Мелкий шрифт */
    font-weight: 600;              /* Полужирное начертание */
}

/* Стили для информации администратора */
.admin-info {
    color: #2c3e50;       /* Цвет текста */
}

/* Стили для имени администратора */
.admin-name {
    font-size: 1.1rem;    /* Размер шрифта */
    font-weight: 600;     /* Полужирное начертание */
    margin-bottom: 1rem;  /* Отступ снизу */
    color: #2c3e50;       /* Цвет текста */
}

/* Стили для контактов администратора */
.admin-contact {
    display: flex;                  /* Flexbox для распределения */
    justify-content: space-between; /* Пространство между меткой и значением */
    align-items: center;            /* Выравнивание по центру */
    margin-bottom: 0.5rem;          /* Отступ снизу */
    padding: 0.3rem 0;              /* Внутренние отступы сверху и снизу */
}

/* Стили для метки контакта */
.admin-contact span:first-child {
    color: #6c757d;       /* Серый цвет текста */
    font-weight: 500;     /* Средняя жирность */
}

/* Стили для значения контакта */
.contact-value {
    color: #2c3e50;       /* Цвет текста */
    font-weight: 600;     /* Полужирное начертание */
    text-align: right;    /* Выравнивание по правому краю */
}

/* Стили для сетки отделов администрации */
.departments-grid {
    display: grid;          /* CSS Grid layout */
    gap: 1rem;             /* Расстояние между карточками */
}

/* Стили для карточек контактов отделов */
.department-contact-card {
    background: white;              /* Белый фон */
    border-radius: 10px;            /* Скругление углов */
    padding: 1.2rem;                /* Внутренние отступы */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Тень */
    transition: all 0.3s ease;      /* Плавные переходы */
    border: 1px solid #e1e8ed;     /* Граница */
    position: relative;             /* Для позиционирования псевдоэлемента */
    overflow: hidden;               /* Скрытие выходящего контента */
}

/* Цветная полоса слева карточек отделов */
.department-contact-card::before {
    content: '';                    /* Пустой контент */
    position: absolute;             /* Абсолютное позиционирование */
    top: 0;                        /* Вверху карточки */
    left: 0;                       /* Слева карточки */
    width: 3px;                    /* Ширина полосы */
    height: 100%;                  /* На всю высоту */
    background: linear-gradient(135deg, #667eea, #764ba2); /* Градиентный фон */
}

/* Эффекты при наведении на карточки отделов */
.department-contact-card:hover {
    transform: translateX(5px);     /* Сдвиг вправо */
    box-shadow: 0 4px 15px rgba(0,0,0,0.15); /* Увеличенная тень */
}

/* Стили для заголовков отделов */
.department-contact-card h4 {
    color: #2c3e50;       /* Цвет текста */
    margin-bottom: 0.8rem; /* Отступ снизу */
    font-size: 1.1rem;    /* Размер шрифта */
}

/* Стили для информации о контактах отдела */
.department-contact-info {
    color: #6c757d;       /* Серый цвет текста */
}

/* Стили для строк информации отдела */
.department-contact-info div {
    margin-bottom: 0.3rem;         /* Отступ между строками */
    display: flex;                 /* Flexbox для выравнивания иконок и текста */
    align-items: center;           /* Выравнивание по центру */
    gap: 0.5rem;                  /* Расстояние между иконкой и текстом */
}

/* Стили для экстренных контактов */
.emergency-contacts {
    display: grid;          /* CSS Grid layout */
    gap: 1rem;             /* Расстояние между карточками */
}

/* Стили для карточек экстренных контактов */
.emergency-card {
    background: linear-gradient(135deg, #e74c3c, #c0392b); /* Красный градиентный фон */
    color: white;                    /* Белый текст */
    border-radius: 12px;            /* Скругление углов */
    padding: 1.5rem;                /* Внутренние отступы */
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3); /* Красная тень */
    transition: all 0.3s ease;      /* Плавные переходы */
    position: relative;             /* Для позиционирования псевдоэлемента */
    overflow: hidden;               /* Скрытие выходящего контента */
}

/* Полоса сверху карточек экстренных контактов */
.emergency-card::before {
    content: '';                    /* Пустой контент */
    position: absolute;             /* Абсолютное позиционирование */
    top: 0;                        /* Вверху карточки */
    left: 0;                       /* Слева карточки */
    width: 100%;                   /* На всю ширину */
    height: 4px;                   /* Высота полосы */
    background: rgba(255, 255, 255, 0.5); /* Полупрозрачный белый фон */
}

/* Эффекты при наведении на карточки экстренных контактов */
.emergency-card:hover {
    transform: translateY(-3px);    /* Подъем карточки */
    box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4); /* Увеличенная тень */
}

/* Стили для заголовков экстренных контактов */
.emergency-card h4 {
    color: white;          /* Белый текст */
    margin-bottom: 0.5rem; /* Отступ снизу */
    font-size: 1.2rem;    /* Размер шрифта */
}

/* Стили для телефона экстренного контакта */
.emergency-phone {
    font-size: 1.3rem;              /* Крупный размер шрифта */
    font-weight: bold;              /* Жирное начертание */
    margin: 0.5rem 0;               /* Отступы сверху и снизу */
    text-shadow: 0 2px 4px rgba(0,0,0,0.3); /* Тень текста для лучшей читаемости */
}

/* Стили для описания экстренного контакта */
.emergency-description {
    opacity: 0.9;         /* Легкая прозрачность */
    font-size: 0.9rem;    /* Мелкий шрифт */
}

/* Стили для общей информации */
.general-info {
    display: grid;          /* CSS Grid layout */
    gap: 1rem;             /* Расстояние между карточками */
}

/* Стили для карточек общей информации */
.info-card {
    background: white;              /* Белый фон */
    border-radius: 10px;            /* Скругление углов */
    padding: 1.2rem;                /* Внутренние отступы */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Тень */
    transition: all 0.3s ease;      /* Плавные переходы */
    border: 1px solid #e1e8ed;     /* Граница */
    display: flex;                  /* Flexbox для расположения иконки и контента */
    align-items: center;            /* Выравнивание по центру */
    gap: 1rem;                     /* Расстояние между иконкой и контентом */
}

/* Эффекты при наведении на карточки общей информации */
.info-card:hover {
    transform: translateY(-2px);    /* Подъем карточки */
    box-shadow: 0 4px 15px rgba(0,0,0,0.15); /* Увеличенная тень */
}

/* Стили для иконок общей информации */
.info-icon {
    font-size: 2rem;       /* Крупный размер иконки */
    width: 50px;           /* Фиксированная ширина */
    height: 50px;          /* Фиксированная высота */
    display: flex;         /* Flexbox для центрирования */
    align-items: center;   /* Выравнивание по центру по вертикали */
    justify-content: center; /* Выравнивание по центру по горизонтали */
    background: linear-gradient(135deg, #667eea, #764ba2); /* Градиентный фон */
    border-radius: 10px;   /* Скругление углов */
    color: white;          /* Белый цвет иконки */
}

/* Стили для заголовков общей информации */
.info-content h4 {
    color: #2c3e50;       /* Цвет текста */
    margin-bottom: 0.3rem; /* Отступ снизу */
    font-size: 1.1rem;    /* Размер шрифта */
}

/* Стили для текста общей информации */
.info-content p {
    color: #6c757d;       /* Серый цвет текста */
    margin: 0;            /* Сброс отступов */
}

/* Стили для секции карты */
.map-section {
    margin-top: 2rem;     /* Отступ сверху */
}

/* Стили для заголовка карты */
.map-section h3 {
    color: #2c3e50;       /* Цвет текста */
    margin-bottom: 1.5rem; /* Отступ снизу */
    font-size: 1.4rem;    /* Размер шрифта */
    border-bottom: 2px solid #667eea; /* Синее подчеркивание */
    padding-bottom: 0.5rem; /* Отступ снизу для подчеркивания */
}

/* Стили для заглушки карты */
.map-placeholder {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef); /* Градиентный фон */
    border: 2px dashed #667eea;     /* Пунктирная граница */
    border-radius: 16px;             /* Скругление углов */
    padding: 3rem 2rem;              /* Внутренние отступы */
    text-align: center;              /* Выравнивание по центру */
}

/* Стили для контента карты */
.map-content {
    color: #6c757d;       /* Серый цвет текста */
}

/* Стили для иконки карты */
.map-icon {
    font-size: 4rem;      /* Крупный размер иконки */
    margin-bottom: 1rem;  /* Отступ снизу */
}

/* Стили для текста в карте */
.map-content p {
    margin: 0.5rem 0;     /* Отступы сверху и снизу */
    font-size: 1.1rem;    /* Размер шрифта */
}

/* Адаптивность для контактов на мобильных устройствах */
@media (max-width: 768px) {
    .contacts-grid {
        grid-template-columns: 1fr; /* Одна колонка */
        gap: 1.5rem;               /* Уменьшение расстояния */
    }
    
    .administration-cards {
        grid-template-columns: 1fr; /* Одна колонка */
    }
    
    .admin-contact {
        flex-direction: column;     /* Вертикальное расположение */
        align-items: flex-start;    /* Выравнивание по левому краю */
        gap: 0.2rem;               /* Уменьшение расстояния */
    }
    
    .contact-value {
        text-align: left;           /* Выравнивание по левому краю */
    }
    
    .info-card {
        flex-direction: column;     /* Вертикальное расположение */
        text-align: center;         /* Выравнивание по центру */
        gap: 0.8rem;               /* Уменьшение расстояния */
    }
    
    .map-placeholder {
        padding: 2rem 1rem;        /* Уменьшение внутренних отступов */
    }
}

/* Анимации для контактов */
@keyframes fadeInContacts {
    from {
        opacity: 0;                   /* Начальная прозрачность */
        transform: translateY(20px);  /* Начальное положение снизу */
    }
    to {
        opacity: 1;                   /* Конечная прозрачность */
        transform: translateY(0);     /* Конечное положение */
    }
}

/* Применение анимации к элементам контактов */
.admin-card,
.department-contact-card,
.emergency-card,
.info-card {
    animation: fadeInContacts 0.6s ease; /* Анимация появления */
}

/* Стили для скелетона загрузки */
.loading-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); /* Градиентный фон */
    background-size: 200% 100%;     /* Размер фона для анимации */
    animation: loading 1.5s infinite; /* Бесконечная анимация */
}

/* Анимация для скелетона загрузки */
@keyframes loading {
    0% { background-position: 200% 0; } /* Начальная позиция */
    100% { background-position: -200% 0; } /* Конечная позиция */
}