/* Основные сетки */
.services-area .row,
.doctors-area .row {
    display: flex;
    flex-wrap: wrap;
    margin: -10px;
}

.services-area .col-lg-4,
.services-area .col-md-6,
.doctors-area .col-lg-3,
.doctors-area .col-md-6 {
    padding: 10px;
    flex: 0 0 auto;
}

/* Карточки услуг и докторов */
.single-services-box,
.single-doctor {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    overflow: hidden;
    text-align: center;
    transition: transform 0.3s;
}

/* Hover для докторов */
.single-doctor:hover {
    transform: translateY(-10px);
}

/* Изображения */
.single-services-box img,
.single-doctor img {
    width: 100%;
    height: auto;
    display: block;
}

/* Иконки и заголовки */
.single-services-box .icon-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}
.single-services-box .icon-title i {
    font-size: 2.5rem;
    color: #007bff;
}

/* Контент внутри карточки */
.single-services-box p,
.single-doctor span {
    flex-grow: 1;
    padding: 15px;
}

/* Overlay у докторов */
.doctor-img {
    position: relative;
}
.doctor-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(50, 50, 50, 0.85);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s;
    padding: 15px;
}
.single-doctor:hover .doctor-overlay {
    opacity: 1;
}

/* Социальные ссылки */
.social-links {
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
    display: flex;
    justify-content: center;
}
.social-links li {
    margin: 0 5px;
}
.social-links li a {
    color: #fff;
    font-size: 16px;
    transition: color 0.3s;
}
.social-links li a:hover {
    color: #ffcc00;
}

/* Кнопки */
.default-btn {
    display: inline-block;
    padding: 10px 25px;
    background-color: #3270ff;
    color: #fff;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 500;
    transition: background 0.3s;
}
.default-btn:hover {
    background-color: #2550cc;
}
.services-slide .single-services-box {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%; /* растягиваем под высоту контейнера */
    min-height: 300px; /* можно регулировать минимальную высоту */
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.logo-img {
    filter: none;
    transition: filter 0.3s ease;
}

/* Тёмная тема — делаем логотип белым */
.dark-mode .logo-img {
    filter: brightness(0) invert(1);
}

/* Responsive */
@media (max-width: 992px) {
    .services-area .col-lg-4,
    .doctors-area .col-lg-3 {
        width: calc(50% - 20px);
    }
}

@media (max-width: 576px) {
    .services-area .col-lg-4,
    .doctors-area .col-lg-3,
    .services-area .col-md-6,
    .doctors-area .col-md-6 {
        width: 100%;
    }
}
/* Мобильная версия */
@media (max-width: 767px) {
    .desktop-nav .navbar-brand {
        display: none !important; /* скрыть десктопный логотип */
    }
}

/* Десктоп версия */
@media (min-width: 768px) {
    .mobile-responsive-nav .logo {
        display: none !important; /* скрыть мобильный логотип */
    }
}
@media (max-width: 991px) { /* теперь меню мобильное с экранов <= 991px */
    .navbar-collapse {
        max-height: 90vh;
        overflow-y: auto;
    }
}

.navbar-nav .nav-link {
    font-weight: 500; /* можно 600 для ещё жирнее */
    font-size: 1rem;
    color: #000; /* цвет текста ссылок */
}

/* Подсветка активной ссылки */
.navbar-nav .nav-item .nav-link.active {
    color: #0d6efd; /* синий цвет подсветки */
    font-weight: 600; /* чуть жирнее */
    border-bottom: 2px solid #0d6efd; /* можно добавить линию снизу для эффекта */
}

/* Эффект при наведении */
.navbar-nav .nav-link:hover {
    color: #0d6efd;
}

/* ============================= */
/* 2. Логотип для тёмной темы    */
/* ============================= */

/* Если у вас есть светлый вариант логотипа, например logo-light.svg */
body.dark-mode .logo-img {
    content: url('assets/images/logo-light.svg') !important;
}

/* Если SVG чёрный и нужно просто сделать его видимым на тёмной теме */
body.dark-mode .logo-img img,
body.dark-mode .navbar-brand img {
    filter: brightness(0) invert(1); /* делает чёрный логотип белым */
}