/* Сброс отступов */
.no-padding {
  padding: 0;
  margin: 0;
}

/* Контейнер для областей */
.sections-container {
  display: flex;
  flex-direction: row; /* Изначально горизонтально */
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
}

/* Стили для областей */
.area {
  position: relative;
  background-size: cover; /* Изображение заполняет область */
  background-position: center center; /* Центрируем по горизонтали и вертикали */
  background-repeat: no-repeat;
  height: 100vh; /* Высота области на десктопе */
  flex: 1 1 calc(100% / 3); /* Разделяем на три равные части */
  overflow: hidden;
  cursor: pointer;
  transition: flex-basis 0.5s ease, filter 0.5s ease;
  text-decoration: none;
  color: inherit;
}

/* Стили для текста */
.area .overlay {
  position: absolute;
  top: 50%; /* Центрируем по высоте */
  right: 0; /* Выровняем по правому краю */
  transform: translateY(-50%) rotate(180deg); /* Смещаем текст на 50% вверх для центрирования */
  writing-mode: vertical-rl; /* Вертикальная ориентация текста */
  text-transform: uppercase; /* Преобразуем текст в верхний регистр */
  color: white; /* Белый цвет текста */
  font-size: 12vh; /* Адаптивный размер текста */
  font-weight: bold; /* Жирный текст */
  text-align: right; /* Выравнивание по правому краю */
  background: linear-gradient(to left, white, #ccc); /* Градиент от белого к серому */
  -webkit-background-clip: text; /* Применяем градиент к тексту */
  -webkit-text-fill-color: transparent; /* Делаем фон текста прозрачным */
}

.area .overlay .overlay-text {
  margin-left: 0;
  margin-right: 0;
}

/* Фоновые изображения */
#vehicles {
  background-image: url('../images/ve.webp');
}

#drones {
  background-image: url('../images/dr.webp');
}

#appliances {
  background-image: url('../images/ap.webp');
}

/* Анимация при наведении */
.area:hover {
  flex-basis: calc((100% / 3) * 1.5); /* Увеличиваем ширину в 1,5 раза */
}

.area:not(:hover) {
  filter: brightness(70%);
}

.sections-container:hover .area:not(:hover) {
  flex-basis: calc((100% - ((100% / 3) * 1.5)) / 2); /* Оставшееся пространство делим на 2 */
}

.area:hover {
  filter: brightness(100%);
}

/* Стили для навигации */
.navbar {
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
  background-color: #000 !important;
}

.navbar-dark .navbar-nav .nav-link {
  color: #ccc;
  font-size: 20px;
  font-weight: bold;
}

.nav-link {
  position: relative;
  overflow: hidden;
}

.navbar-dark .navbar-nav .nav-link:hover {
  color: #fff;
}


/* Заголовок на весь экран */
.full-screen-header {
  position: relative;
  width: 100%;
  height: 100vh; /* Заголовок занимает весь экран */
  overflow: hidden;
}

.full-screen-header h1 {
  margin: 0;
  padding: 2rem;
}

/* Стили для основной части About Us */
main {
  margin-top: 0; /* Убираем внешние отступы */
  color: #fff; /* Белый текст */
}

main .content {
  max-width: 800px; /* Ограничиваем ширину текста */
  margin: 2rem auto; /* Центрируем блок */
  padding: 2rem;
}

main p {
  font-size: 1.2rem;
  line-height: 1.8;
  margin-bottom: 1.5rem;
  text-align: justify;
}

/* Заголовок с градиентом */
.top-naming {
  text-transform: uppercase; /* Преобразуем текст в верхний регистр */
  color: white; /* Белый цвет текста */
  font-size: 14vw; /* Адаптивный размер текста */
  font-weight: bold; /* Жирный текст */
  text-align: right; /* Выравнивание по правому краю */
  background: linear-gradient(to bottom, white, #ccc); /* Градиент от белого к серому */
  -webkit-background-clip: text; /* Применяем градиент к тексту */
  -webkit-text-fill-color: transparent; /* Делаем фон текста прозрачным */
}

/* Фоновая картинка */
.page-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: -2;
}

#about-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/ab.webp'); /* Укажите путь к картинке */
  background-size: cover; /* Заполнение области */
  background-position: bottom;
  z-index: -1; /* За другими элементами */
  opacity: 1; /* Начальная прозрачность */
  transition: opacity 0.3s ease; /* Плавное изменение прозрачности */
}

#contact-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/co.webp'); /* Укажите путь к картинке */
  background-size: cover; /* Заполнение области */
  background-position: bottom;
  z-index: -1; /* За другими элементами */
  opacity: 1; /* Начальная прозрачность */
  transition: opacity 0.3s ease; /* Плавное изменение прозрачности */
}

#vehicles-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/veh.webp'); /* Укажите путь к картинке */
  background-size: cover; /* Заполнение области */
  background-position: bottom;
  z-index: -1; /* За другими элементами */
  opacity: 1; /* Начальная прозрачность */
  transition: opacity 0.3s ease; /* Плавное изменение прозрачности */
}

#drones-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/dro.webp'); /* Укажите путь к картинке */
  background-size: cover; /* Заполнение области */
  background-position: bottom;
  z-index: -1; /* За другими элементами */
  opacity: 1; /* Начальная прозрачность */
  transition: opacity 0.3s ease; /* Плавное изменение прозрачности */
}

#appliances-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/app.webp'); /* Укажите путь к картинке */
  background-size: cover; /* Заполнение области */
  background-position: bottom;
  z-index: -1; /* За другими элементами */
  opacity: 1; /* Начальная прозрачность */
  transition: opacity 0.3s ease; /* Плавное изменение прозрачности */
}

.icon {
  width: 50px;
  height: 50px;
  margin-bottom: 15px;
}

/* Карточка товара */
.product-card {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin-bottom: 2rem;
  padding: 1rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Изображение товара */
.product-image {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 8px;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Центрируем изображение и обрезаем лишнее */
  display: block;
}

/* Информация о товаре */
.product-info h3 {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
  color: #333;
}

.product-info p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  color: #333;
}

/* Таблица характеристик */
.table {
  font-size: 0.9rem;
  margin-top: 1rem;
}

.table th {
  background-color: #f8f9fa;
  font-weight: bold;
}

.table td {
  color: #555;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
  .sections-container {
    flex-direction: column; /* Вертикальное расположение секций */
    height: 100vh; /* Устанавливаем высоту контейнера */
  }
  .area {
    height: calc(100vh / 3); /* Каждая секция занимает 1/3 высоты экрана */
    flex-basis: 100%; /* Каждая секция занимает всю ширину */
  }
  .area:not(:hover) {
    filter: brightness(100%); /* Убираем затемнение на мобильных устройствах */
  }
  .area .overlay {
    top: auto;
    transform: none;
    writing-mode: initial;
    font-size: 15vw;
    bottom: 0; /* Размещаем текст у нижнего края */
    width: 100%; /* Текст занимает всю ширину секции */
    background: linear-gradient(to bottom, white, #ccc); /* Градиент от белого к серому */
    -webkit-background-clip: text; /* Применяем градиент к тексту */
    -webkit-text-fill-color: transparent; /* Делаем фон текста прозрачным */
    text-align: center; /* Выравнивание по правому краю */
  }

  main .content {
    padding: 1.5rem;
  }

  main p {
    font-size: 1rem;
    line-height: 1.5;
  }
}

@media (max-width: 576px) {
  .full-screen-header {
    height: 100vh; /* Заголовок остаётся на весь экран */
    display: flex;
    align-items: center; /* Выравниваем текст вертикально */
    justify-content: center; /* Центрируем текст по горизонтали */
  }

  .top-naming {
    font-size: 14vh; /* Уменьшаем размер текста */
    text-align: center; /* Центрируем текст */
    writing-mode: vertical-rl; /* Делаем текст вертикальным */
    transform: rotate(180deg); /* Если writing-mode не работает, оставляем обычный текст */
    
  }

  main .content {
    padding: 1rem; /* Минимальные отступы для текста */
  }

  main p {
    font-size: 0.9rem; /* Уменьшаем размер текста */
    line-height: 1.4; /* Уменьшаем межстрочный интервал */
  }
}