a{color:#f3f3f3}
a:hover{text-decoration: none;}
/* Общие стили для модального окна */
.modal {
  position: fixed !important; /* Фиксированное позиционирование */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999999 !important; /* Выше всего */
}

/* Стили для диалогового окна */
.modal-dialog {
  margin: auto; /* Центрирование по вертикали и горизонтали */
  max-width: 600px; /* Ограничение ширины */
}

/* Подложка должна быть ниже модального окна, но выше остальных элементов */
.modal-backdrop {
  z-index: 999998 !important;
}

/* Убедитесь, что .card не мешает работе модального окна */
.card {
  z-index: 1200;
  overflow: visible !important; /* Разрешаем содержимому выходить за пределы .card */
}

/*to top*/
.top {
  opacity: 0; /* Начальная прозрачность */
  transition: opacity 0.3s ease; /* Плавный переход прозрачности */
  transition: background .5s ease;
  position: fixed; /* Фиксированное положение */
  bottom: 20px; /* Расположение снизу */
  right: 20px; /* Расположение справа */
  cursor: pointer; /* Указываем, что это кликабельный элемент */
  z-index: 1000; /* Кнопка должна быть поверх других элементов */
  padding: 10px; /* Отступы внутри кнопки */
  background-color: #aaa; /* Цвет фона */
  color: white; /* Цвет текста */
  border: none; /* Без границ */
  border-radius: 5px; /* Закруглённые углы */
  font-size: 14px; /* Размер шрифта */
}

.top:hover{
  background:#ccc;
  transition: background .5s ease;
}


/* Плавный переход цветов */
body {
  transition: background-color 0.3s ease, color 0.3s ease;
}


#btnSwitch svg {
  transition: fill 0.3s ease; /* Плавное изменение цвета SVG */
}

.sun-icon,
.moon-icon {
  width: 30px !important; /* Фиксированный размер */
  height: 30px !important; /* Фиксированный размер */
  display: inline-block; /* Корректное позиционирование */
  vertical-align: middle; /* Выравнивание по вертикали */
  transition: fill 0.3s ease; /* Плавный переход цвета */
}

/* Card container styles */
.card {
  position: relative;
  overflow: hidden;
}

/* Image container styles */
.image-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 0;
  padding-top: 77.83%; /* Соотношение сторон 600:467 */
}

/* Image styles */
.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto; /* Высота автоматически рассчитывается по ширине */
  object-fit: cover;
  transition: transform 0.3s ease;
  will-change: transform; /* Оптимизация производительности */
  backface-visibility: hidden; /* Убираем артефакты анимации */
z-index: 1;
}
.showimg{
  position: absolute;
  top:0;
  left:0;
  z-index: 999999;}
/* Hover effect for image scaling */
.card:hover .image-container img, .card.active .image-container img {
  transform: scale(1.1) translateZ(0); /* Масштабирование + использование GPU */
}

/* Reveal Effect */
.card .image-container::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 123, 255, 0.3);
  transform: scaleX(0); /* Эффект появления слева */
  transform-origin: left;
  opacity: 0; /* Сначала эффект невидим */
  pointer-events: none; /* Чтобы не мешать взаимодействию с изображением */
  transition: transform 0.3s ease, opacity 0.3s ease; /* Плавная анимация */
  z-index: 10; /* Убедитесь, что перекрытие поверх всего */
}

/* Активация эффекта при наведении */
.card:hover .image-container::before, .card.active .image-container::before {
  transform: scaleX(1); /* Полное раскрытие эффекта */
  opacity: 1; /* Показываем эффект */
}

.blurry{
  filter: blur(8px);
}
/*
#naked1{
  filter: blur(8px);
}


.card:hover #naked1, .card.active #naked1{
  filter: blur(0px);
}