/* Сброс стилей */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Comic Sans MS', cursive, sans-serif;
  background: white;
  position: relative;
  overflow-x: hidden;
}

/* ------------------ Шапка ------------------ */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 20px 40px;
  border-bottom: 2px solid #ddd;
  background-color: #ffffff;
}

.logo-block {
  display: flex;
  align-items: center;
  gap: 60px;
}

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

.logo-block img {
  height: 80px;
  width: auto;
}

.subname {
  font-size: 24px;
  color: #3a3a3a;
  font-weight: bold;
  text-align: center;
  margin-top: 5px;
}

.logo-text h1 {
  font-size: 36px;
  font-weight: 700;
  color: #3a3a3a;
}

/* Звёзды в шапке */
/* Звёзды в шапке */
.stars-header {
  position: relative;
  width: 100px;
  height: 100px;
}

/* Переменные для ширины и высоты звезды, а также отступов */
:root {
  --star-width: 75px;  /* Ширина звезды (уменьшено) */
  --star-height: 75px;  /* Высота звезды (уменьшено) */
  --star-offset-left: -60px;  /* Отступ первой звезды по горизонтали */
  --star-offset-top-left: -20px; /* Отступ первой звезды по вертикали */
  --star-offset-right: -47px;  /* Отступ второй звезды по горизонтали */
  --star-offset-top-right: 15px; /* Отступ второй звезды по вертикали */
}

/* Звезды */
.stars-header img {
  position: absolute;
  width: var(--star-width);  /* Ширина звезды */
  height: var(--star-height); /* Высота звезды */
}

/* Первая звезда */
.stars-header img:first-child {
  left: var(--star-offset-left); /* Отступ по горизонтали */
  top: var(--star-offset-top-left); /* Отступ по вертикали */
}

/* Вторая звезда */
.stars-header img:last-child {
  right: var(--star-offset-right); /* Отступ по горизонтали */
  top: var(--star-offset-top-right); /* Отступ по вертикали */
}


/* Фоновые звезды */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    url('../images/sta1.png'),
    url('../images/sta2.png'),
    url('../images/sta3.png'),
    url('../images/sta4.png'),
    url('../images/sta1.png'),
    url('../images/sta2.png'),
    url('../images/sta3.png'),
    url('../images/sta4.png'),
    url('../images/sta1.png'),
    url('../images/sta2.png');
  background-repeat: no-repeat;
  background-position:
    1% 10%, 3% 30%, 6% 70%, 8% 50%, 10% 85%, /* левая часть — ближе к краю */
    75% 15%, 80% 40%, 85% 60%, 90% 30%, 95% 75%; /* правая часть */
  background-size: 60px;
  opacity: 1;
  z-index: -1;
}


/* ------------------ Навигация ------------------ */
nav ul {
  display: flex;
  gap: 20px;
  list-style: none;
  font-size: 18px;
  flex-wrap: wrap;
  justify-content: center;
}

nav ul li {
  cursor: pointer;
  transition: 0.3s;
}

nav ul li:hover {
  color: #424242;
}

nav ul li.highlight {
  font-weight: bold;
  color: white;
  background: #007bff;
  padding: 8px 15px;
  border-radius: 12px;
}


/* ------------------ Карусель ------------------ */
.nav-block h2 {
  background-color: #ff4d4d; /* ярко-красный */
  color: rgb(14, 14, 14);
  padding: 10px 20px;
  border-radius: 15px;
  display: inline-block;
  margin-bottom: 20px;
}
.branch-title.port {
  background-color: #fff176; /* жёлтый */
  color: black;
  padding: 6px 15px;
  border-radius: 12px;
  display: inline-block;
}

.branch-title.leven {
  background-color: #dda0dd; /* фиалковый */
  color: black;
  padding: 6px 15px;
  border-radius: 12px;
  display: inline-block;
}
.carousel {
  background: #b8e9ff;
  margin: auto;
  padding: 10px;
  border-radius: 0 0 30px 30px;
  max-width: 1200px;
  position: relative;
  text-align: center;
  overflow: hidden;
}

.carousel-container {
  display: flex;
  transition: transform 0.5s ease-in-out;
  width: 100%; /* два слайда по 100% */
}

#carousel {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.slide {
  min-width: 100%;
  display: flex;
  align-items: flex-start;
  padding: 10px 200px; /* <-- добавили отступы слева и справа */
  gap: 140px;
  justify-content: flex-start; /* убираем лишнее пространство */
}

.info {
  flex: 1;
  max-width: 50%;
  text-align: left;
}

.branch-title {
  font-size: 32px;
  font-weight: 200;
  margin-bottom: 8px;
}

.contact-icons {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
}

.contact-icons img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.phone, .address {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 5px;
}

.image-container {
  width: 250px;
  height: 250px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image {
  width: 95%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 30px;
}

/* Стрелки */
.arrows-container {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  padding: 0 30px;
  z-index: 2;
  pointer-events: none; /* чтобы не перекрывать слайды */
}

.arrow {
  width: 30px;
  height: 30px;
  border: solid black;
  border-width: 0 6px 6px 0;
  display: inline-block;
  padding: 6px;
  cursor: pointer;
  background-color: rgba(255,255,255,0.6);
  border-radius: 6px;
  box-sizing: border-box; /* важно! */
  pointer-events: auto; /* вернуть кликабельность */
}

.left {
  left: 50%;
  transform: translate(10px, -50%) rotate(135deg); /* сдвиг влево */
}

.right {
  right: 50%;
  transform: translate(-30px, -50%) rotate(-45deg); /* сдвиг вправо */
}

/* Точки-индикаторы */
.dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.dot {
  width: 30px;
  height: 10px;
  background: #d9d9d9;
  cursor: pointer;
  border-radius: 5px;
}

.dot.active {
  background: #000;
}

/* ------------------ Услуги ------------------ */
.services-layout {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 40px;
  margin-bottom: 0px;
  flex-wrap: wrap;
}

.consultation-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.consultation-block {
  background-color: #f7941d;
  padding: 20px;
  border-radius: 20px;
  width: 280px;
}

.contracts-block {
  background-color: #e178f6;
  padding: 15px 75px;
  border-radius: 20px;
  font-weight: bold;
  font-size: 20px;
  text-align: center;
  width: fit-content;
}

.right-blocks {
  display: flex;
  flex-direction: column;
  gap: 17px;
}

.diagnostics-block {
  background-color: #f26c63;
  padding: 20px;
  border-radius: 20px;
  width: 320px;
}

.services-block {
  background-color: #b3ff99;
  padding: 20px;
  border-radius: 20px;
  width: 320px;
}

/* --- Остальной стиль без изменений --- */

.services {
  text-align: center;
  padding: 10px 10px 0px;
}

.services h2 {
  font-size: 32px;
  margin-bottom: 30px;
  background: #ffd6d6;
  padding: 10px 20px;
  border-radius: 20px;
  display: inline-block;
}

.cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

.card {
  width: 300px;
  padding: 20px;
  border-radius: 20px;
  color: white;
  text-align: left;
}

.card h3 {
  font-size: 24px;
  margin-bottom: 10px;
}

.card ul {
  list-style: disc;
  padding-left: 20px;
}

.card.orange {
  background-color: #ffad60;
}

.card.red {
  background-color: #ff6b6b;
}

.card.green {
  background-color: #60d394;
}

.contracts {
  margin-top: 0px;
}

/* ------------------ Подвал ------------------ */
footer {
  margin-top: 0; /* добавь на всякий случай */
  padding-top: 0; /* чтобы точно не было отступа сверху */
  display: flex;
  position: relative; /* Делаем футер относительно позиционированным */
  justify-content: space-between;
  padding: 0; /* вообще убираем весь padding */
  align-items: flex-start; /* Поднимаем картинки вверх */
}

footer img {
  position: absolute; /* Делаем картинки абсолютно позиционированными */
  top: 0; /* Привязываем к верхней части футера */
  margin-top: -200px; /* Поднимаем картинки на 20px вверх, можно изменять это значение */
}

.bear-footer {
  width: 180px;
  height: 280px;
  left: 0; /* Сдвигаем медвежонка влево */
}

.rubik-footer {
  width: 200px;
  height: 180px;
  right: 0; /* Сдвигаем кубик Рубика вправо */
  top: 40px; /* Опускаем кубик Рубика на 100px ниже */
}

/* Контейнер для выпадающего меню */
nav ul li.dropdown {
  position: relative;
  display: inline-block;
}

/* Стили для выпадающего блока */
.dropdown-menu {
  position: absolute;
  top: 100%; /* прямо под кнопкой */
  left: 50%; /* центрируем по горизонтали */
  transform: translateX(-50%) translateY(10px); /* выравниваем */
  background: white;
  padding: 6px 12px;
  list-style: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  border-radius: 8px;
  white-space: nowrap;
  z-index: 1000;
}

/* Показываем при наведении */
nav ul li.dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Стили для кнопки внутри */
.dropdown-menu li a {
  display: block;
  text-align: center;
  text-decoration: none;
  color: #333;
  font-weight: 500;
  padding: 8px 16px;
  transition: background 0.3s ease;
  border-radius: 6px;
}

.dropdown-menu li a:hover {
  background-color: #f2f2f2;
}


/* ------------------ Адаптация ------------------ */

/* Планшеты и экраны до 1024px */
@media (max-width: 1024px) {
  .slide {
    padding: 10px 80px;
    gap: 60px;
    display: flex;
    justify-content: center; /* Центрируем блоки */
  }

  .info {
    max-width: 100%;
  }

  .image-container {
    width: 150px; /* Уменьшаем картинку */
    height: 150px;
  }

  .logo-block {
    gap: 30px;
    flex-direction: column;
    align-items: center; /* Центрируем блоки */
    width: 100%; /* Убираем сдвиг */
  }

  .carousel {
    border-radius: 0 0 20px 20px;
  }

  .consultation-block,
  .diagnostics-block,
  .services-block {
    width: 100%; /* Равная ширина */
    max-width: 260px; /* Устанавливаем максимальную ширину */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto; /* Центрируем блоки */
  }

  .contracts-block {
    padding: 15px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 300px; /* Устанавливаем максимальную ширину */
    margin: 0 auto; /* Центрируем блок */
  }

  /* Убираем чёрные кружочки (если это связано с .dot) */
  .dot {
    display: none;
  }
}

/* Мобильные экраны до 768px */
@media (max-width: 768px) {
  header {
    flex-direction: column;
    align-items: center;
    padding: 20px;
  }

  .logo-block {
    align-items: center;
    width: 100%;
  }

  nav ul {
    flex-direction: column;
    gap: 20px;
    font-size: 20px;
    width: 100%;
    padding-top: 10px;
  }

  .slide {
    flex-direction: column;
    align-items: center;
    padding: 10px 20px;
    gap: 30px;
  }

  .info {
    text-align: center;
    max-width: 100%;
  }

  .services-layout {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
  }

  .contracts-block {
    font-size: 18px;
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 300px;
    margin: 0 auto; /* Центрируем блок */
  }

  .consultation-block,
  .diagnostics-block,
  .services-block {
    width: 90%;
    max-width: 260px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto; /* Центрируем блоки */
  }

  .cards {
    gap: 20px;
  }

  .card {
    width: 90%;
  }

  .arrows-container {
    padding: 0 10px;
  }

  /* Убираем чёрные кружочки */
  .dot {
    display: none;
  }

  .logo-text h1 {
    font-size: 28px;
  }

  .subname {
    font-size: 18px;
  }

  .branch-title {
    font-size: 26px;
  }
}

/* Очень маленькие экраны до 480px */
@media (max-width: 480px) {
  header {
    flex-direction: column;
    align-items: center;
    padding: 15px;
  }

  .logo-block {
    align-items: center;
    width: 100%;
  }

  nav ul {
    flex-direction: column;
    gap: 15px;
    font-size: 18px;
    width: 100%;
    padding-top: 8px;
  }

  .slide {
    flex-direction: column;
    align-items: center;
    padding: 10px;
    gap: 20px;
  }

  .info {
    text-align: center;
    max-width: 100%;
    padding: 0 10px;
  }

  .services-layout {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 25px;
    padding: 0 10px;
  }

  .contracts-block,
  .consultation-block,
  .diagnostics-block,
  .services-block {
    width: 100%;
    max-width: 260px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    padding: 10px;
    font-size: 16px;
  }

  .cards {
    gap: 15px;
    padding: 0 10px;
  }

  .card {
    width: 100%;
    max-width: 300px;
    height: auto;
    aspect-ratio: 3 / 4;
    margin: 0 auto;
  }

  .arrows-container {
    padding: 0 8px;
  }

  .arrow {
    width: 20px;
    height: 20px;
    padding: 4px;
    border-width: 0 4px 4px 0;
  }

  .left {
    transform: translate(5px, -50%) rotate(135deg);
  }

  .right {
    transform: translate(-15px, -50%) rotate(-45deg);
  }

  .carousel {
    border-radius: 0 0 10px 10px;
  }

  .services h2 {
    font-size: 22px;
    text-align: center;
  }

  .nav-block h2 {
    font-size: 18px;
    padding: 6px 12px;
    text-align: center;
  }

  .logo-text h1 {
    font-size: 24px;
    text-align: center;
  }

  .subname {
    font-size: 16px;
    text-align: center;
  }

  .branch-title {
    font-size: 22px;
    text-align: center;
  }

  .dot {
    display: none;
  }
}



.burger {
  display: none;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  z-index: 1001;
  position: absolute;
  top: 25px;
  right: 20px;
}

.burger span {
  width: 30px;
  height: 4px;
  background: #333;
  border-radius: 2px;
}

.mobile-menu {
  position: fixed;
  top: 0;
  right: -260px;
  width: 260px;
  height: 100%;
  background-color: #fff;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.15);
  transition: right 0.3s ease;
  padding: 80px 30px;
  z-index: 1000;
}

.mobile-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-menu li {
  margin: 20px 0;
  font-size: 18px;
  color: #333;
  cursor: pointer;
}

.mobile-menu.open {
  right: 0;
}

/* Мобильное выпадающее меню */
.dropdown-mobile {
  position: relative;
}

.dropdown-mobile:hover .dropdown-menu-mobile {
  max-height: 60px;
  opacity: 1;
  visibility: visible;
}

.dropdown-menu-mobile {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  margin-top: 5px;
  background: #f9f9f9;
  border-radius: 8px;
  text-align: center;
}

.dropdown-menu-mobile li a {
  display: block;
  padding: 10px 0;
  color: #333;
  text-decoration: none;
  font-size: 16px;
  transition: background 0.3s ease;
}

.dropdown-menu-mobile li a:hover {
  background-color: #eee;
  border-radius: 8px;
}


@media (max-width: 768px) {
  nav {
    display: none;
  }

  .burger {
    display: flex;
  }

  .stars-header {
    display: none;
  }
}

@media (max-width: 768px) {
  .contact-icons {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .stars-header {
    display: none;
  }
}


@media (max-width: 768px) {
  .contact-icons {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .stars-header {
    display: none;
  }
}

/* Медиа-запрос для мобильных устройств */
@media (max-width: 768px) {
  .mobile-menu ul {
    padding: 0 10px;  /* Отступы по бокам */
  }

  .mobile-menu li {
    width: 100%;  /* Убираем фиксированную ширину, чтобы элементы занимали всю ширину */
    text-align: center;  /* Центрируем текст */
  }

  .mobile-menu .button {
    width: 100%;
    padding: 15px;
    text-align: center;
    font-size: 18px;  /* Увеличиваем размер шрифта для лучшего восприятия */
  }

  .mobile-menu .dropdown-menu-mobile {
    width: 100%;
  }
}

/* Медиазапросы для адаптивности */

@media (max-width: 1200px) {
  .bear-footer {
    top: 30px; /* Поднимаем медведя на 30px при ширине экрана меньше 1200px */
  }

  .rubik-footer {
    top: 40px; /* Поднимаем кубик Рубика на 40px при ширине экрана меньше 1200px */
  }
}

@media (max-width: 800px) {
  .bear-footer {
    top: -270px; /* Поднимаем медведя еще выше при ширине экрана меньше 800px */
  }

  .rubik-footer {
    top: -245px; /* Поднимаем кубик Рубика на 80px при ширине экрана меньше 800px */
  }
}

@media (max-width: 500px) {
  .bear-footer {
    top: -150px; /* Поднимаем медведя еще выше при ширине экрана меньше 500px */
  }

  .rubik-footer {
    top: -150px; /* Поднимаем кубик Рубика на 120px при очень маленькой ширине экрана */
  }
}

@media (max-width: 1024px) {
  ul {
    list-style: none;
    padding-left: 0; /* Убираем отступ */
  }
}

@media (max-width: 768px) {
  ul {
    list-style: none;
    padding-left: 0;
  }
}

@media (max-width: 480px) {
  ul {
    list-style: none;
    padding-left: 0;
  }
}
@media (max-width: 1024px) {
  .bear-footer,
  .rubik-footer {
    width: 100px;
    height: auto;
  }
}

@media (max-width: 768px) {
  .bear-footer,
  .rubik-footer {
    width: 130px;
    height: auto;
  }
}

@media (max-width: 480px) {
  .bear-footer,
  .rubik-footer {
    width: 130px;
    height: auto;
  }
}

/* Общие заголовки секций */
.section-title {
  text-align: center;
  margin: 0 auto 60px;
  padding: 20px 40px;
  display: inline-block;
  border-radius: 20px;
  background: #9fc9ee;
}

.photo-clinic {
  margin-top: 100px; /* ← ВОТ он — отступ сверху от секции */
  text-align: center;
  font-size: 23px; /* ← размер текста */
}


.news-events .card {
  animation: none !important;
}

/* Индивидуальные стили для секций */
.leven-carousel .section-title {
  background: #cc97fa;
}
.port-carousel .section-title {
  background: #8ffde9;
}
.news-title {
  background: none;
  border: none;
  border-bottom: 2px solid #aaa;
  margin-bottom: 30px;
  padding: 0 20px 10px;
}

/* Карусель */
.slider-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.carousel-wrapper {
  overflow: hidden;
  width: 100%;
  max-width: 1600px;  /* !!! */
  padding: 40px 0; /* ← добавим отступ сверху и снизу карусели */
}
.two-blocks {
  display: flex;
  transition: transform 0.5s ease-in-out;
}
.carousel-slide {
  min-width: 100%;
  display: flex;
  justify-content: center;
}
.grid-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  width: 100%;
  padding: 0 20px;
}
.card-column {
  display: flex;
  justify-content: center;
  align-items: center;
}
.card {
  width: 100%;
  height: 500px;
  border-radius: 20px;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 60px;
  margin-bottom: 60px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.card-img {
  width: 98%;  /* Фотография занимает 95% карточки */
  height: 98%;  /* Фотография занимает 95% карточки */
  object-fit: cover;  /* Фотография не искажается, сохраняет пропорции */
  border-radius: 10px;  /* Скругленные края у фото */
  margin: 2.5%;  /* Отступы, чтобы фото не прилипало к краям */
}

.card:hover {
  animation: pulsate 2s infinite ease-in-out;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  transform: scale(1.08); /* был 1.02 — теперь больше */
}

/* Радужная анимация подсветки при наведении */
@keyframes pulsate {
  0% {
    box-shadow: 0 0 15px #00bfff, 0 0 15px #32cd32, 0 0 15px #ff6347, 0 0 15px #8a2be2, 0 0 15px #ff1493;
  }
  25% {
    box-shadow: 0 0 20px #9932cc, 0 0 20px #ff69b4, 0 0 20px #00fa9a, 0 0 20px #ff00ff, 0 0 20px #00ffff;
  }
  50% {
    box-shadow: 0 0 30px #ff6347, 0 0 30px #ff4500, 0 0 30px #32cd32, 0 0 30px #8a2be2, 0 0 30px #00bfff;
  }
  75% {
    box-shadow: 0 0 20px #00fa9a, 0 0 20px #9932cc, 0 0 20px #ff4500, 0 0 20px #00ffff, 0 0 20px #ff1493;
  }
  100% {
    box-shadow: 0 0 15px #00bfff, 0 0 15px #32cd32, 0 0 15px #ff6347, 0 0 15px #8a2be2, 0 0 15px #ff1493;
  }
}



.arrow-btn {
  font-size: 40px;
  background: none;
  border: none;
  cursor: pointer;
  user-select: none;
  transition: transform 0.2s ease;
}
.arrow-btn:hover {
  transform: scale(1.2);
}

/* Новости */

.news-events h2 {
  text-align: center;
  margin: 0 auto 30px;
  background: none;
  border-bottom: 2px solid #aaa;
  padding: 0 20px 10px;
  width: 800px; /* ← длина черты */
}

.news-events .card.news-card {
  animation: none;
}


.news-events {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.news-events .grid-row {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  padding: 0 20px;
}

.news-events .card-column {
  justify-content: center;
}
.news-card {
  width: 100%;    /* Ширина карточки */
  height: 150px;  /* Высота карточки */
  background: linear-gradient(135deg, #41f326, #4aff2e); /* градиент от жёлтого */
  color: #1a1a1a;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  padding: 20px;
  font-size: 16px;
  font-weight: 600;
  min-height: 150px; /* фиксированная высота, можно изменить */
  display: flex;
  justify-content: center; /* горизонтальная центровка */
  align-items: center;     /* вертикальная центровка */
  text-align: center;      /* текст по центру */
  box-sizing: border-box;
  overflow-wrap: break-word;
}

.news-card:nth-child(2) {
  background-color: #edbdf5;
}
.news-card:hover {
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
  transform: scale(1.02);
}

/* Для планшетов и мобильных (до 1024px) */
@media (max-width: 1024px) {
  .grid-row {
    grid-template-columns: repeat(2, 1fr); /* 2 карточки на экран */
  }

  .card {
    height: 450px;
  }
}

/* Для мобильных (до 767px) — почти как на 1024px */
@media (max-width: 767px) {
  .grid-row {
    grid-template-columns: repeat(2, 1fr); /* Оставляем 2 карточки, как на планшетах */
    gap: 10px; /* Меньше отступы между карточками */
    padding: 0 10px; /* Немного внутреннего отступа */
  }

  .card {
    height: auto; /* Убираем фиксированную высоту — пусть адаптируется */
    aspect-ratio: 3 / 4; /* Поддерживаем красивое соотношение сторон */
  }

  .news-events h2 {
    width: 100%;
    text-align: center;
    margin: 0 auto 30px;
    padding: 0 20px;
  }
}
/* Для очень маленьких экранов (до 480px) */
@media (max-width: 480px) {
  .grid-row {
    grid-template-columns: 1fr; /* Только одна карточка на строку */
    gap: 10px;
    padding: 0 10px;
  }

  .card {
    height: auto; /* Автоматическая высота */
    aspect-ratio: 3 / 4; /* Поддерживаем хорошую пропорцию */
  }

  .news-events h2 {
    font-size: 20px; /* Чуть меньше заголовок */
    padding: 0 10px;
    margin-bottom: 20px;
  }
}



.photo-clinic {
  position: relative; /* важно: родитель для абсолютного позиционирования */
}

.photo-clinic-top-stickers {
  position: absolute; /* теперь стикеры не влияют на остальной контент */
  top: 20px; /* регулируй отступ сверху */
  left: 0;
  right: 0;

  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  pointer-events: none; /* чтобы не мешались при клике, если нужно */
  z-index: 10;
}

.sticker-frame {
  width: 300px;
  height: 300px;
  border-radius: 12px; /* можно поставить 0 для строго квадратных углов */
}

.sticker-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.section-title {
  font-size: 24px;
  text-align: center;
  margin: 30px 0 20px;
}

.photo-frame-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 10px; /* теперь точно опустится */
}

.photo-frame {
  width: calc(50% - 20px);
  max-width: 400px;
  border: none;
  border-radius: 16px;
  padding: 8px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.photo-frame img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
}

/* Новый стиль для нижних стикеров */
.photo-clinic-bottom-stickers {
  position: absolute; /* Абсолютное позиционирование */
  bottom: 20px; /* Располагаем их ближе к низу */
  left: 20px;
  right: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  pointer-events: none; /* Чтобы стикеры не мешали кликам */
  z-index: 5; /* Задний слой, чтобы не перекрывать основной контент */
}

.sticker-frame-bottom {
  width: 250px; /* Уменьшаем размер нижних стикеров */
  height: 250px;
  border-radius: 12px; 
}

.sticker-frame-bottom img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

/* Медиазапросы для мобильных устройств */
/* Адаптация для планшетов и мобильных (до 768px) */
@media (max-width: 768px) {
  .photo-clinic-top-stickers {
    top: 10px;
    left: 10px;
    right: 10px;
    justify-content: space-between;
  }

  .photo-clinic-bottom-stickers {
    bottom: 10px;
    left: 10px;
    right: 10px;
    justify-content: space-between;
  }

  .sticker-frame,
  .sticker-frame-bottom {
    width: 100px;
    height: 100px;
  }

  .photo-frame-container {
    margin-top: 20px;
    justify-content: space-around;
  }

  .photo-frame {
    width: calc(100% - 20px);
    max-width: 350px;
  }
}

/* Адаптация для очень узких экранов (до 480px), почти без изменений */
@media (max-width: 480px) {
  /* Можно вообще убрать, либо оставить только точечные улучшения */
  .photo-frame {
    max-width: 330px; /* Немного уменьшить, если надо */
  }
}



html {
  scroll-behavior: smooth;
}

a.button {
  color: #3a3a3a;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
}

.contacts-section {
  padding: 40px 10px; /* Меньше отступов с правой и левой стороны */
  background-color: transparent;
  margin: 30px auto;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center; /* Центрируем все элементы по горизонтали */
}

.section-title {
  font-size: 28px;
  margin-bottom: 30px;
  text-align: center;
}

.contacts-content {
  display: flex;
  justify-content: center; /* Центрируем контент по горизонтали */
  gap: 15px; /* Уменьшаем расстояние между блоками */
  flex-wrap: wrap;
  width: 70%;
}

.left-column,
.right-column {
  flex: 1;
  min-width: 250px;
  max-width: 300px;
}

.center-column {
  flex: 2;
  display: flex;
  flex-direction: column;
  align-items: center; /* Центрируем адреса */
  justify-content: center;
}

.highlight-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
  text-align: center;
}

.social-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.btn {
  padding: 14px 24px;
  border: none;
  border-radius: 8px;
  text-decoration: none;
  color: white;
  font-weight: 600;
  font-size: 28px;
  text-align: center;
  transition: background 0.3s ease;
  max-width: 280px;
}

.insta {
  background-color: #e1306c;
}

.whatsapp {
  background-color: #25d366;
}

.btn:hover {
  opacity: 0.9;
}

.address-block {
  background-color: #f2f524;
  padding: 25px;
  border-radius: 16px;
  box-shadow: 0 0 12px rgba(195, 234, 39, 0.05);
  font-size: 32px;
  line-height: 1.6;
  margin-bottom: 16px; /* можно больше или меньше */
}


.map-container {
  flex: 1;
  min-width: 460px;
  max-width: 600px;
  height: 440px;
  border-radius: 12px;
  overflow: hidden;
}

.map-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.how-to-get {
  margin-top: 40px;
  text-align: center;
}

.how-to-get h3 {
  font-size: 24px;
  margin-bottom: 10px;
}

.video-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.video-block {
  flex: 1 1 45%;
  max-width: 480px;
  height: 270px;
  border-radius: 12px;
  background: black;
}

.sectionу-title {
  text-align: center;
  margin: 0 auto 20px;
  padding: 20px 40px;
  display: inline-block;
  border-radius: 20px;
  background: #e550f6;
}


@media (max-width: 768px) {
  .contacts-content {
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 20px;
  }

  .left-column,
  .right-column,
  .center-column {
    width: 100%;
    max-width: 300px;
    text-align: center;
  }

  .map-container {
    width: 100%;
    max-width: 480px;
    min-width: unset;
    height: 300px;
  }

  .address-block {
    font-size: 24px;
    padding: 20px;
  }

  .section-title {
    font-size: 24px;
    margin-bottom: 20px;
  }

  .highlight-title {
    font-size: 16px;
    margin-bottom: 10px;
  }

  .btn {
    font-size: 22px;
    padding: 12px 20px;
    max-width: 240px;
  }

  .video-block {
    flex: 1 1 100%;
    max-width: 100%;
    height: 220px;
  }

  .how-to-get h3 {
    font-size: 20px;
  }

  .sectionу-title {
    font-size: 20px;
    padding: 16px 24px;
  }
}

@media (max-width: 480px) {
  .contacts-section {
    padding: 30px 10px;
    margin: 20px auto;
  }

  .contacts-content {
    width: 100%;
    gap: 16px;
  }

  .left-column,
  .right-column,
  .center-column {
    width: 100%;
    max-width: 260px;
  }

  .address-block {
    font-size: 20px;
    padding: 16px;
    margin-bottom: 12px;
  }

  .btn {
    font-size: 18px;
    padding: 10px 16px;
    max-width: 220px;
  }

  .section-title {
    font-size: 20px;
    margin-bottom: 16px;
  }

  .highlight-title {
    font-size: 14px;
  }

  .map-container {
    height: 220px;
    max-width: 100%;
    border-radius: 10px;
  }

  .video-block {
    height: 180px;
  }

  .how-to-get h3 {
    font-size: 18px;
  }

  .sectionу-title {
    font-size: 18px;
    padding: 12px 20px;
  }
}

@media (max-width: 768px) {
  .map-container {
    min-width: unset;
    max-width: 100%;
    width: 90%;
    height: 300px;
    margin: 20px auto 0;
    display: block;
  }

  .map-container iframe {
    width: 100%;
    height: 100%;
    border-radius: 12px;
  }
}

/* --- Футер --- */
.footer {
  text-align: center;
  padding: 30px 10px;
  background-color: #f2f2f2;
  margin-top: 40px;
  border-top: 1px solid #ccc;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-main {
  font-size: 24px;
  font-weight: 500;
  color: #333;
}

.footer-subtext {
  font-size: 14px;
  color: #333;
  margin-top: 5px;
}


.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  width: 60px;
  height: 60px;
  cursor: pointer;
}

.whatsapp-float img {
  width: 100%;
  height: auto;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* Кнопка для слабовидящих */
:root {
  --btn-bottom: 100px; /* Меняешь это значение — и кнопка поднимается или опускается */
}

.accessibility-btn {
  position: fixed;
  bottom: 100px; /* <-- приподнята от низа */
  right: 20px; /* справа */
  z-index: 9999;
  background-color: #000;
  color: #fff;
  border: none;
  padding: 14px 18px;
  font-size: 20px;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.accessibility-btn:hover {
  background-color: #444;
}

/* Тема для слабовидящих */
body.accessibility-mode {
  background-color: #000 !important;
  color: #fff !important;
  font-size: 20px !important;
  letter-spacing: 0.5px;
}

body.accessibility-mode h1,
body.accessibility-mode h2,
body.accessibility-mode h3,
body.accessibility-mode h4,
body.accessibility-mode h5 {
  color: #ffd700 !important;
}

body.accessibility-mode a {
  color: #00ffff !important;
}

body.accessibility-mode .documents img {
  border: 3px solid #ffd700;
}

/* Можно добавить другие селекторы по желанию */