/* Стили для table-1 */
.table-1 {
  width: 100%;
  border-collapse: collapse;
}

.table-1 th,
.table-1 td {
  padding: 1px;
  text-align: left;
  border-bottom: 2px solid black; /* Горизонтальная линия между блоками */
}

.table-1 th:last-child,
.table-1 td:last-child {
  border-right: none; /* Убираем правую границу у последней ячейки в строке */
}

.table-1 th:first-child,
.table-1 td:first-child {
  border-left: none; /* Убираем левую границу у первой ячейки в строке */
}

.table-1 tr:last-child th,
.table-1 tr:last-child td {
  border-bottom: none; /* Убираем нижнюю границу у последней строки */
}

/* Основные стили для абзаца */
.product-description {
  margin-top: 26px;
  margin-bottom: -5px;
  font-size: 16px; /* Начальный размер шрифта */
}

/* Стили для table-2 */
.table-2 {
  width: 100%;
  border-collapse: collapse;
}

.table-2 th,
.table-2 td {
  padding: 10px;
  text-align: left;
  border-bottom: 2px solid black; /* Горизонтальная линия между блоками */
}

.table-2 th:last-child,
.table-2 td:last-child {
  border-right: none; /* Убираем правую границу у последней ячейки в строке */
}

.table-2 th:first-child,
.table-2 td:first-child {
  border-left: none; /* Убираем левую границу у первой ячейки в строке */
}

.table-2 tr:last-child th,
.table-2 tr:last-child td {
  border-bottom: none; /* Убираем нижнюю границу у последней строки */
}

/* Стили для контейнера продукта */
.product-container {
  display: flex;
  align-items: flex-start; /* Выравниваем элементы по верхней границе */
  position: relative;
}

/* Стили для overlay с точками */
.image8 {
  max-width: 50%;
  height: 500px; /* Set the desired height here */
  margin-right: 20px;
  transition: all 0.3s ease-in-out; /* Плавный переход для изменения изображения */
  object-fit: cover; /* Позволяет изображению полностью заполнять контейнер */
  object-position: top; /* Прикрепляет изображение к верхней границе контейнера */
  margin-top: 30px;
  position: relative; /* Позиционируем для overlay */
  display: inline-block; /* Делаем картинку блочным элементом, чтобы точки могли быть внутри */
}

.product-container {
  display: flex;
  align-items: flex-start; /* Выравниваем элементы по верхней границе */
  position: relative; /* Позиционируем для overlay */
}

.overlay {
  position: absolute;
  top: 490px; /* Фиксируем позицию по высоте на 490 пикселей от верхнего края контейнера */
  left: 0; /* Позиционируем overlay влево контейнера */
  width: 50%; /* Ширина равна 50% ширины контейнера */
  height: auto; /* Высота элемента будет автоматически подстраиваться */
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

.dot {
  width: 12px;
  height: 12px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  margin: 0 4px; /* Добавляем отступы между точками */
  border: 1px solid rgba(0, 0, 0, 0.5); /* Обводка для контраста */
}

.product-details {
  flex-grow: 1;
}

.product-details table {
  width: 100%;
}

@media only screen and (max-width: 768px) {
  .product-container {
    flex-direction: column;
  }

  .product-details {
    margin-top: 20px;
  }

  .image8 {
    max-width: 100%;
    margin-bottom: 20px;
  }
}

.prev-btn,
.next-btn {
  position: absolute;
  top: 22%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  font-size: 18px;
  padding: 10px;
  cursor: pointer;
  z-index: 2;
  display: none; /* По умолчанию скрыты */
}

.prev-btn {
  left: 10px;
}

.next-btn {
  right: 10px;
}

/* Медиа-запрос для планшетов */
@media screen and (min-width: 577px) and (max-width: 768px) {
  .prev-btn,
  .next-btn {
    display: block; /* Показываем кнопки на планшетах */
  }

  .overlay {
    bottom: 220px; /* Поднимаем overlay на 50 пикселей от нижнего края */
    height: auto; /* Высота подстраивается под содержимое */
    width: 100%; /* Ширина подстраивается под контейнер */
  }
}

/* Медиа-запрос для мобильных устройств */
@media screen and (max-width: 576px) {
  .prev-btn,
  .next-btn {
    display: block; /* Показываем кнопки на мобильных устройствах */
  }

  .overlay {
    bottom: 520px; /* Поднимаем overlay на 120 пикселей от нижнего края */
    height: auto; /* Высота подстраивается под содержимое */
    width: 100%; /* Ширина подстраивается под контейнер */
  }

  .prev-btn,
  .next-btn {
    top: 13%;
  }
}

@media screen and (max-width: 768px) {
  .dot {
    display: none; /* Скрыть элемент на экранах шириной до 768px */
  }
}
/* Адаптивные стили для мобильных устройств */
@media (max-width: 576px) {
  .table-2 th,
  .table-2 td {
    padding: 10px;
    font-size: 12px; /* Уменьшаем размер шрифта */
  }

  .table-2 {
    font-size: 12px; /* Уменьшаем размер шрифта для всей таблицы */
  }

  .product-description {
    font-size: 16px; /* Уменьшаем размер шрифта описания продукта */
  }

  .product-details h2,
  .product-details h5,
  .product-details h4 {
    font-size: 16px; /* Уменьшаем размер заголовков в деталях продукта */
  }

  .button-price {
    font-size: 14px; /* Уменьшаем размер текста кнопки */
  }

  .content-3 h2 {
    font-size: 18px; /* Уменьшаем размер заголовков секции */
  }

  /* Стили для overlay с точками */
  .image8 {
    max-width: 100%;
    height: auto;
    margin-right: 20px;
    transition: all 0.3s ease-in-out; /* Плавный переход для изменения изображения */
    object-fit: cover; /* Позволяет изображению полностью заполнять контейнер */
    object-position: top; /* Прикрепляет изображение к верхней границе контейнера */
    margin-top: 30px;
    position: relative; /* Позиционируем для overlay */
    display: inline-block; /* Делаем картинку блочным элементом, чтобы точки могли быть внутри */
  }
}

h5.subtitle {
  margin-top: 5px;
  margin-bottom: 5px;
  font-weight: bold; /* Default font weight */
}

/* Medium screens (tablets, 768px and below) */
@media screen and (max-width: 768px) {
  h5.subtitle {
    font-weight: 500; /* Lighter font weight for tablets */
  }
}

/* Small screens (mobile devices, 576px and below) */
@media screen and (max-width: 576px) {
  h5.subtitle {
    font-weight: 400; /* Even lighter font weight for mobiles */
  }
}