*, *::before, *::after {
  box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
 
} 
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden;
  }

}


 
body { 
margin: 0;
    padding: 0;
    
  font-family: 'Roboto', sans-serif; /* можно отдельно для заголовков */ 
 font-weight: 300;
 background: url('pic/0.jpg') no-repeat center center fixed;
    background-size: cover;
    height: 100vh; /* Убедитесь, что высота на весь экран */
 overflow-x: hidden; /* Скрывает любую горизонтальную прокрутку */
}

hr {
  width: 700px;
  min-width: 150px;
  height: 2px; 
  background-color:  #94a182; 
  border: none; 
  margin: 10px auto;
}

p {
  font-family: 'Roboto', sans-serif; /* можно отдельно для заголовков */ 
 font-weight: 300; 
 line-height: 1.6; /* относительное значение */
} 

h1  {
  font-weight: 400;
   font-family: 'Roboto', sans-serif;
font-size: 90px; 
letter-spacing: 5px;




word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  white-space: normal;
}
 
h2 {
  font-family: 'Nunito Sans', sans-serif; /* можно отдельно для заголовков */ 
 font-weight: 300; 
 /*line-height: 1.6;  относительное значение */
font-size: 25px; line-height: 1.4;
 word-spacing: 5px; 
} 
h3  {
  font-weight: 100;
   font-family: 'Roboto', sans-serif;
font-size: 40px;
} 
h4  {
  font-weight: 400;
   font-family: 'Montserrat', sans-serif;
font-size: 80px; 
text-align: center; 
letter-spacing: 15px;
} 
h6  {
  font-weight: 400;
   font-family: 'Roboto', sans-serif;
font-size: 50px; 
text-align: center; 
 margin: 0;
}

/* --- Стили Header (Шапки сайта) --- */
header {
    position: relative; /* добавь, если ещё нет */
    display: flex;
    justify-content: flex-start; /* чтобы логотип слева */
    align-items: center;
    padding: 10px;
    background-color: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 10;
}


.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Noto Sans', sans-serif;
  font-weight: 100;
  font-size: 18px;
  color: black;
}

.lang-switch {
  text-decoration: none;
  color: black;
  line-height: 1;
  transition: color 0.3s ease;
}

.lang-switch:hover {
  color: #94a182;
}

.divider {
  user-select: none;
  color: black;
}

.lang-switch.arm {
  transform: translateY(1px);
}

/* Адаптация для мобильных */
@media (max-width: 768px) {
  .logo {
    font-size: 14px;
    gap: 4px;
  }
  .lang-switch,
  .divider {
    font-size: 14px;
  }
  
  header {
    flex-direction: row;
    justify-content: space-between;
  }

  .logo {
    margin-left: 10px;
  }
}



/* --- Десктопное меню --- */
.desktop-menu {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 25px;
    align-items: center;
}

.desktop-menu a {
  display: flex; /* ← чтобы можно было выровнять текст внутри */
  align-items: center; /* ← вертикальное центрирование текста */
  height: 100%; /* ← растягиваем ссылку на всю высоту header */
  padding: 0 10px;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 18px;
  color: black;
  text-decoration: none;
  transition: color 0.3s ease;
}


.desktop-menu a:hover {
    color: #94a182; /* Светло-зеленый/хаки при наведении */
}

/* --- Стили для гамбургер-меню (мобильная версия) --- */

/* Контейнер для гамбургер-меню, скрыт по умолчанию на десктопе */
.hamburger-menu-wrapper {
    display: none;
}

/* Скрываем чекбокс, который переключает меню */
#menu-toggle-checkbox {
    display: none;
}

/* Стили иконки гамбургера */
.hamburger-icon {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 35px;
    height: 30px;
    position: relative;
    cursor: pointer;
    z-index: 1001;
    padding: 5px 0;
    box-sizing: border-box;
}

/* Полоски гамбургера */
.hamburger-icon span {
    display: block;
    width: 100%;
    height: 1px;
    background: black; /* ← Чёрные полоски */
    border-radius: 3px;
    transition: all 0.3s ease-in-out;
}

/* Анимация крестика */
#menu-toggle-checkbox:checked + .hamburger-icon span:nth-child(1) {
    transform: translateY(11px) rotate(45deg);
}
#menu-toggle-checkbox:checked + .hamburger-icon span:nth-child(2) {
    opacity: 0;
}
#menu-toggle-checkbox:checked + .hamburger-icon span:nth-child(3) {
    transform: translateY(-11px) rotate(-45deg);
}

/* Выдвижная панель */


  .mobile-nav-panel {
    position: absolute;
    top: 0;
    right: -100vw; /* Уезжает полностью за экран */
    width: 250px;
    height: 250px;
    background: rgba(255,255,255,0.9);
    transition: right 0.4s ease;
    z-index: 999;
    padding-top: 50px;
    box-sizing: border-box;
    overflow-y: auto;
  }

  #menu-toggle-checkbox:checked ~ .mobile-nav-panel {
    right: 0;
  }



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

.mobile-nav-panel li {
    padding: 10px 20px;
    text-align: left;
}

.mobile-nav-panel li a {
    color: black; /* ← Чёрный текст */
    text-decoration: none;
    font-size: 20px;
    display: block;
    transition: color 0.2s ease;
}

.mobile-nav-panel li a:hover {
    color: #94a182;
}

/* Активация панели */
#menu-toggle-checkbox:checked ~ .mobile-nav-panel {
    right: 0;
}

/* Медиа-запрос */
@media (max-width: 768px) {
    .desktop-menu {
        display: none;
    }
    .hamburger-menu-wrapper {
        display: block;
    }
}



.slider {
  position: relative;
  width: 100%;
  height: 85vh;
  overflow: hidden;
}

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 2s ease-in-out;
}

.slide.active {
  opacity: 1;
  z-index: 1;
}

/* Новое: стили для <img> */
.slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1; /* чтобы текст был поверх картинки */
}

.slide-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 100px);
  font-size: 100px;
  color: white;
  opacity: 0;
  transition: transform 2s ease, opacity 1s ease;
  text-align: center;
  max-width: 90%;
  width: max-content;
  background: rgba(50, 50, 50, 0.3);
  padding: 20px 40px;
  border-radius: 10px;
  border: 2px solid white;
}

.slide-text.show {
  transform: translate(-50%, -50%);
  opacity: 1;
}

@media (max-width: 768px) {
  .slide-text {
    font-size: 40px;
    width: 90%;
    height: 100px;
    padding: 0 5px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .slider {
    height: 50vh;
  }

  .slide {
    height: 100%;
  }
}



.welcome {
    display: flex;
    justify-content: center; /* Центрируем содержимое по горизонтали */
    align-items: center; /* Выравнивание по вертикали */
    height: auto;
    padding: 20px;
}


/* --- СТИЛИ ДЛЯ .welcome-content (КОНТЕЙНЕР) --- */
.welcome-content {
    display: flex;
    flex-direction: column;
    align-items: center; /* Центрирует дочерние элементы по горизонтали */
    /* justify-content: center; */ /* Если не нужен вертикальный центринг */

    gap: 50px;
    width: 100%;
    max-width: 1200px;
    padding: 20px;
    margin: 50px auto; /* Центрирует сам контейнер */
}

/* --- СТИЛИ ДЛЯ ИЗОБРАЖЕНИЯ --- */
.welcome-image img {
    width: 100%;
    max-width: 300px;
    height: auto;
    object-fit: contain;
 padding-bottom: 20px;
    opacity: 0;
    transition: opacity 1.6s ease-out, transform 0.6s ease-out;
    transform: translateY(100px);
}

/* Когда картинка становится видимой */
.welcome-image img.visible {
    opacity: 1;
    transform: translateY(0);
    /* Убираем или синхронизируем задержку, чтобы появлялась одновременно */
    transition-delay: 0s; /* Или 0.1s, если хотите небольшую общую задержку */
}


/* --- СТИЛИ ДЛЯ .welcome-heading (КОНТЕЙНЕР ЗАГОЛОВКА H3) --- */
.welcome-heading {
    opacity: 0;
    transition: opacity 1.6s ease-out, transform 0.8s ease-out;
    transform: translateY(100px);
    font-size: 32px; /* Размер шрифта h3 */
    text-align: center;
    line-height: 1.2;
}

/* Стили для h3 внутри .welcome-heading */
.welcome-heading h3 {
    margin: 0;
    padding: 0;
    margin-bottom: 0px; /* Отступ h3 от параграфа */
    font-size: inherit; 
font-family: 'Roboto', sans-serif; /* можно отдельно для заголовков */ 
 font-weight: 300; 
 line-height: 1.6; /* относительное значение */
 letter-spacing: 5px; 

}


/* Когда welcome-heading становится видимым */
.welcome-heading.visible {
    opacity: 1;
    transform: translateY(0);
    /* Убираем или синхронизируем задержку, чтобы появлялась одновременно */
    transition-delay: 0.2s; /* Или 0.1s, как у других */
}

/* --- СТИЛИ ДЛЯ .welcome-text (КОНТЕЙНЕР ОСНОВНОГО ТЕКСТА) --- */
.welcome-text {
    font-size: 24px;
    max-width: 600px;
    opacity: 0;
    transition: opacity 1.6s ease-out, transform 0.8s ease-out;
    transform: translateY(100px);
    margin: 0.2;
}

/* Когда текст становится видимым */
.welcome-text.visible {
    opacity: 1;
    transform: translateY(0);
    /* Убираем или синхронизируем задержку, чтобы появлялась одновременно */
    transition-delay: 0.4s; /* Или 0.1s, как у других */
}

/* Стили для h2 внутри .welcome-text (если есть) */
.welcome-text h2 {
    margin-bottom: 20px;
    font-size: 32px;
}

/* Стили для p внутри .welcome-text */
.welcome-text p {
    font-size: 16px;
    text-align: center;
	
    hyphens: auto;
    margin: 0;
    padding: 0;
}

.works {
    position: relative; /* Обеспечивает позиционирование для .background-box */
   padding: 0 2% 100px;

    text-align: center;
}
.text-small {
  font-size: 50px;  /* Можно варьировать */
  line-height: 1.2;
 
}

@media (max-width: 768px) {
  .text-small {
    font-size: 30px; /* или 12px */
    color: white;
  }
}



.work-item { 
margin-top: 10px;
    position: relative;
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: center; /* Горизонтальное выравнивание */
    align-items: center; /* Вертикальное выравнивание */
}



.video-left-container { 
 /*box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); */

 width: 80%;
  aspect-ratio: 16 / 9; /* сохраняем правильные пропорции */
  max-width: 1600px;    /* ограничение, если нужно */
  border: 10px solid white;
  border-radius: 0px;
  overflow: hidden;
  margin-left: 100px;     /* прижимаем к левому краю */
  margin-right: auto; /* чтобы не сдвигался вправо */
  position: relative;
}

.video-left {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


.works h1 { padding-bottom: 20px; 
padding-top: 150px; 
 max-width: 800px; 
    margin: 0 auto;
    text-align: justify;
    hyphens: auto;
   
    
text-align: center; 
opacity: 0;
    transition: opacity 1.2s ease-out, transform 1s ease-out;
    transform: translateY(100px);
}

/* Когда картинка становится видимой */
.works h1.visible {
    opacity: 1;
    transform: translateY(0);
    /* Убираем или синхронизируем задержку, чтобы появлялась одновременно */
    transition-delay: 0s; /* Или 0.1s, если хотите небольшую общую задержку */
}
 
.works hr{
opacity: 0;
    transition: opacity 1.2s ease-out, transform 0.8s ease-out;
    transform: translateY(100px);
}

/* Когда картинка становится видимой */
.works hr.visible {
    opacity: 1;
    transform: translateY(0);
    /* Убираем или синхронизируем задержку, чтобы появлялась одновременно */
    transition-delay: 0.2s; /* Или 0.1s, если хотите небольшую общую задержку */
}




.works-h2-container
{padding-top: 10px;
padding-bottom: 30px;
}
/* Начальные стили для заголовка h2 */
.works h2 {
    border: 0px solid gray; /* Рамка */

    /* Отступы, чтобы текст не прилипал к рамке */
    padding-top: 10px; /* Увеличил, чтобы было больше места сверху */
    padding-bottom: 20px; /* Увеличил, чтобы было больше места снизу */
    padding-left: 20px; /* Добавил отступы слева */
    padding-right: 20px; /* Добавил отступы справа */

    max-width: 500px; /* Ограничение ширины */
    text-align: center;
    margin: 0 auto; /* Центрирует сам блок по горизонтали */

    color: black; /* Цвет текста. Вы указали Black, но его не было видно на черном фоне. */
    opacity: 0; /* Изначально невидимый */
    transition: opacity 1.2s ease-out, transform 0.8s ease-out; /* Плавная анимация */
    transform: translateY(50px); /* Начальный сдвиг вниз */
word-spacing: 10px;
    /* ДОБАВЛЕНИЕ: Важно для отображения рамки вокруг текста */
    display: inline-block; /* Или block, но inline-block обычно лучше для облегания текста */
}

/* Когда заголовок становится видимым */
.works h2.visible {
    opacity: 1; /* Делаем заголовок видимым */
    transform: translateY(0); /* Возвращаем его в исходное положение */
    transition-delay: 0.6s;
}

/* Стили для текста в левом overlay */

.overlay-text-left { 
border-radius: 15px; /* Добавляем закругление углов */
  position: absolute;
  top: 50%;
  left: 5%;

  width: 30vw;               /* Квадратная ширина */
  height: 40vh;
     
  display: flex;             /* Центрируем текст внутри */
  justify-content: center;
  align-items: center;
  text-align: center;

  font-size: 2vw;            /* Адаптивный размер шрифта */
  white-space: normal;       /* Разрешаем перенос строк */
  line-height: 1.2;

  color: black;
  border: 2px solid rgba(255, 255, 255, 0.5);
  background-color: rgba(148, 161, 130, 0);

  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);

  box-sizing: border-box;
  transform: translate(-50%, -50%) rotate(90deg) translateY(150px);
  opacity: 0;
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.overlay-text-left.visible {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(90deg) translateY(0);
  
}


/* Стили для текста в правом overlay */
.overlay-text-right { 
border-radius: 15px; /* Добавляем закругление углов */
  position: absolute;
  top: 50%;
  left: 95%;

  width: 30vw;               /* Такая же ширина */
  height: 40vh;     /* Квадрат, как и слева */
  
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;

  font-size: 2vw;            /* Такой же шрифт */
  white-space: normal;
  line-height: 1.2;

  color: black;
  border: 2px solid rgba(255, 255, 255, 0.5);
 background-color: rgba(148, 161, 130, 0); /* Тот же фон */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);

  box-sizing: border-box;
  transform: translate(-50%, -50%) rotate(-90deg) translateY(150px);
  opacity: 0;
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.overlay-text-right.visible {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(-90deg) translateY(0);

}


/* ... (Ваши существующие общие стили для .btn) ... */

.btn {
    /* Базовые стили */
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.8); /* Белый фон с прозрачностью 0.8 */
    border: 2px solid rgba(255, 255, 255, 0.8); /* Обводка тоже прозрачная */
    color: black;
    font-size: 25px;
    padding: 10px 30px;
    cursor: pointer;
    transition: all 0.3s ease, opacity 1.2s ease-out, transform 0.8s ease-out;
    text-decoration: none;
    z-index: 2;

    opacity: 0;
    transform: translateY(50px);
    display: inline-block;

    /* Добавляем тень */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* легкая тень */
}

/* Когда кнопка становится видимой */
.btn.visible {
    opacity: 1;
    transform: translateY(0);
}

.btn:hover {
    background-color: #fff;
    color: #000;
}


/* --- НОВЫЕ СТИЛИ ДЛЯ КНОПОК В ДЕСКТОПНОЙ ВЕРСИИ --- */

.btn-carousel {
    position: absolute;
    bottom: 30px; /* Отступ от нижнего края */
    right: 130px; /* Отступ справа */
    /* Убираем transform: translateX(-50%); потому что мы позиционируем относительно right */
}

.btn-video {
    position: absolute;
    bottom: 30px; /* Отступ от нижнего края */
    left: 130px; /* Отступ слева */
    /* Убираем transform: translateX(-50%); */
}

/* ... (Остальные ваши десктопные стили) ... */



/* carusel */
.carousel-container { /*box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); */
  position: relative;
  width: 80%;
  max-width: 1600px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin-left: auto; /* как у video-left */
  margin-right: 100px;
  border: 10px solid white;
  border-radius: 0px;
}

.carousel-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Анимация */
.carousel-item:nth-child(1) {
  animation: fade-in-out 9s infinite;
}
.carousel-item:nth-child(2) {
  animation: fade-in-out 9s infinite;
  animation-delay: 3s;
}
.carousel-item:nth-child(3) {
  animation: fade-in-out 9s infinite;
  animation-delay: 6s;
}

@keyframes fade-in-out {
  0% {opacity: 0;}
  11% {opacity: 1;}
  33% {opacity: 1;}
  44% {opacity: 0;}
  100% {opacity: 0;}
}


.drone {
    
    
    background-position: top center;
    text-align: center;
    width: 100%; 
    position: relative;
}

.drone h1{ padding-bottom: 10px; 
margin: 1px;
padding-top: 150px; 
  opacity: 0; /* Изначально невидимый */
    transition: opacity 1.2s ease-out, transform 0.8s ease-out; /* Плавная анимация */
    transform: translateY(50px); /* Начальный сдвиг вниз */

    /* ДОБАВЛЕНИЕ: Важно для отображения рамки вокруг текста */
    display: inline-block; /* Или block, но inline-block обычно лучше для облегания текста */
}

/* Когда заголовок становится видимым */
.drone h1.visible {
    opacity: 1; /* Делаем заголовок видимым */
    transform: translateY(0); /* Возвращаем его в исходное положение */
    transition-delay: 0s;
}

.drone-h2 h2 {
   padding-top: 10px; 
padding-bottom: 10px; 
 max-width: 400px;
 
text-align: center;
 margin: 0 auto; /* Центрирует сам блок по горизонтали */
 
 opacity: 0; /* Изначально невидимый */
    transition: opacity 1.2s ease-out, transform 0.8s ease-out; /* Плавная анимация */
    transform: translateY(50px); /* Начальный сдвиг вниз */

    /* ДОБАВЛЕНИЕ: Важно для отображения рамки вокруг текста */
    display: inline-block; /* Или block, но inline-block обычно лучше для облегания текста */
	
}

/* Когда заголовок становится видимым */
.drone h2.visible {
    opacity: 1; /* Делаем заголовок видимым */
    transform: translateY(0); /* Возвращаем его в исходное положение */
    transition-delay: 0.6s;
} 

.drone-hr hr{
 opacity: 0; /* Изначально невидимый */
    transition: opacity 1.2s ease-out, transform 0.8s ease-out; /* Плавная анимация */
    transform: translateY(50px); /* Начальный сдвиг вниз */

    /* ДОБАВЛЕНИЕ: Важно для отображения рамки вокруг текста */
    display: inline-block; /* Или block, но inline-block обычно лучше для облегания текста */
}

/* Когда заголовок становится видимым */
.drone hr.visible {
    opacity: 1; /* Делаем заголовок видимым */
    transform: translateY(0); /* Возвращаем его в исходное положение */
    transition-delay: 0.3s;
}



.drone-text h6 { 

    
   padding-top: 35px; 
padding-bottom: 20px; 
opacity: 0; /* Изначально невидимый */
    transition: opacity 1.2s ease-out, transform 0.8s ease-out; /* Плавная анимация */
    transform: translateY(50px); /* Начальный сдвиг вниз */

    /* ДОБАВЛЕНИЕ: Важно для отображения рамки вокруг текста */
   
}

/* Когда заголовок становится видимым */
.drone-text h6.visible {
    opacity: 1; /* Делаем заголовок видимым */
    transform: translateY(0); /* Возвращаем его в исходное положение */
    transition-delay: 0.6s;

 
}

.drone-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  max-width: 1000px;
  margin: 50px auto;
  flex-wrap: wrap;
}

.text-side {
  flex: 1;
  min-width: 280px;
}



.image-side {
  flex: 1;
  min-width: 280px;
}

.image-side img {
  width: 100%;
  height: auto;
  display: block;
}


.drone-item {
  width: 100vw;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
}

.frame-wrapper {
  display: flex;
  justify-content: center; /* Центрируем содержимое по горизонтали */
  width: 100vw;            /* Растягиваем по всей ширине экрана */
  box-sizing: border-box;
}

.frame-border {
  position: relative;
  width: 100vw; /* Рамка занимает всю ширину экрана */
 
   background: rgba(255, 255, 255, 0.5); /* зелёный с 30% прозрачности */
  box-sizing: border-box;
  display: flex;
  justify-content: center; /* Центрируем видео по ширине */
   margin-bottom: 100px; /* Внешний отступ снизу */ 
   backdrop-filter: blur(6px); /* размытие фона за рамкой */
  -webkit-backdrop-filter: blur(6px); /* для поддержки в Safari */ 
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
  .frame-border {
                 
    margin-bottom: 60px;           /* Уменьшаем отступ снизу */


  }
}

.video-container {
   max-width: 1600px; /* увеличиваем ширину видео */
  width: 100%;
}

.video-container video {
  width: 100%; /* Видео занимает всю ширину контейнера */
  height: auto;
  display: block;
  border: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  border-radius: 0;
}



.drone-text .container { 

  max-width: 900px; 
  margin: 30px auto 50px;
  padding: 0 30px;
  box-sizing: border-box;
}






.drone-text p {
  font-size: 16px;
  text-align: justify;
  
 
opacity: 0; /* Изначально невидимый */
    transition: opacity 1.2s ease-out, transform 0.8s ease-out; /* Плавная анимация */
    transform: translateY(50px); /* Начальный сдвиг вниз */

    /* ДОБАВЛЕНИЕ: Важно для отображения рамки вокруг текста */
    display: inline-block; /* Или block, но inline-block обычно лучше для облегания текста */
}

/* Когда заголовок становится видимым */
.drone-text p.visible {
    opacity: 1; /* Делаем заголовок видимым */
    transform: translateY(0); /* Возвращаем его в исходное положение */
    transition-delay: 0.6s;


}

.drone-bottom .container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 30px; 

  box-sizing: border-box;
}

.bottom-row {
  display: flex;
  align-items: stretch;
  gap: 0px;
  flex-wrap: wrap;
}

.image-side img {
  max-width: 300px;
  width: 100%;
  height: auto;
  display: block;
  flex-shrink: 0;
}

.text-side {
  flex: 1;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.text-side hr {
 
  margin: 1px;

  background-color: black;
  margin: 0;
}

.text-side p {
  font-size: 16px;
  text-align: justify;
  margin: 0;
 
}


.image-side.right-align {
  display: flex;
  justify-content: flex-end;
}



.containr {
  padding-bottom: 100px;
  display: flex;
  justify-content: center;
  gap: 20px;
  max-width: 1200px;
  margin: 10px auto;
}

.box-wrapper {
  width: 270px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.box-image {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
  display: block;
}

.cut-border-box {
  position: relative;
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  margin: 0;
  height: 100%;
}

.cut-border-box::before,
.cut-border-box::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  margin: 0 auto;
  height: 20px;
  box-sizing: border-box;
}

.cut-border-box::before {
  top: 0;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

.cut-border-box::after {
  bottom: 0;
  border-bottom: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

.content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  z-index: 1;
  height: 100%;
}

.text h5 {
  margin: 0;
  font-size: 18px;
  text-align: center;
}

.text p {
  margin: 5px 0 0;
  font-size: 14px;
  color: #444;
}


/* Начальное состояние для каждого box-wrapper (уже есть у вас) */
.box-wrapper {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1.2s ease-out, transform 1s ease-out;
}

/* Конечное состояние для box-wrapper, когда класс .visible добавлен (уже есть у вас) */
.box-wrapper.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- ДОБАВЬТЕ ЭТИ ПРАВИЛА ДЛЯ ПОСЛЕДОВАТЕЛЬНОЙ АНИМАЦИИ --- */

/* Задержка для первого box-wrapper */
.box-wrapper:nth-child(1).visible {
    transition-delay: 0.3s; /* Появится первым, через 0.1 секунды */
}

/* Задержка для второго box-wrapper */
.box-wrapper:nth-child(2).visible {
    transition-delay: 0.5s; /* Появится вторым, через 0.3 секунды */
}

/* Задержка для третьего box-wrapper */
.box-wrapper:nth-child(3).visible {
    transition-delay: 0.5s; /* Появится третьим, через 0.5 секунды */
}

.sphere {
  text-align: center;
 
  width: 100%;
  position: relative;
}






.sphere-item {
   max-width: 900px; 
  margin: 30px auto 50px;
  padding: 0 30px;
  box-sizing: border-box;
}

.sphere h1{ padding-bottom: 10px; 
margin: 1px;
padding-top: 150px; 
  opacity: 0; /* Изначально невидимый */
    transition: opacity 1.2s ease-out, transform 0.8s ease-out; /* Плавная анимация */
    transform: translateY(50px); /* Начальный сдвиг вниз */

    /* ДОБАВЛЕНИЕ: Важно для отображения рамки вокруг текста */
    display: inline-block; /* Или block, но inline-block обычно лучше для облегания текста */
}

/* Когда заголовок становится видимым */
.sphere h1.visible {
    opacity: 1; /* Делаем заголовок видимым */
    transform: translateY(0); /* Возвращаем его в исходное положение */
    transition-delay: 0s;
}


.sphere-hr hr{
 opacity: 0; /* Изначально невидимый */
    transition: opacity 1.2s ease-out, transform 0.8s ease-out; /* Плавная анимация */
    transform: translateY(50px); /* Начальный сдвиг вниз */

    /* ДОБАВЛЕНИЕ: Важно для отображения рамки вокруг текста */
    display: inline-block; /* Или block, но inline-block обычно лучше для облегания текста */
}

/* Когда заголовок становится видимым */
.sphere hr.visible {
    opacity: 1; /* Делаем заголовок видимым */
    transform: translateY(0); /* Возвращаем его в исходное положение */
    transition-delay: 0.2;
}



.sphere-h2 h2 {
   padding-top: 10px; 
padding-bottom: 50px; 
 max-width: 400px;
text-align: center;
 margin: 0 auto; /* Центрирует сам блок по горизонтали */
 
 opacity: 0; /* Изначально невидимый */
    transition: opacity 1.2s ease-out, transform 0.8s ease-out; /* Плавная анимация */
    transform: translateY(50px); /* Начальный сдвиг вниз */

    /* ДОБАВЛЕНИЕ: Важно для отображения рамки вокруг текста */
    display: inline-block; /* Или block, но inline-block обычно лучше для облегания текста */
}

/* Когда заголовок становится видимым */
.sphere h2.visible {
    opacity: 1; /* Делаем заголовок видимым */
    transform: translateY(0); /* Возвращаем его в исходное положение */
    transition-delay: 0.3s;
} 




.sphere-item p {
   font-size: 16px;
  text-align: justify;
opacity: 0; /* Изначально невидимый */
    transition: opacity 1.2s ease-out, transform 0.8s ease-out; /* Плавная анимация */
    transform: translateY(50px); /* Начальный сдвиг вниз */

    /* ДОБАВЛЕНИЕ: Важно для отображения рамки вокруг текста */
    display: inline-block; /* Или block, но inline-block обычно лучше для облегания текста */
}

/* Когда заголовок становится видимым */
.sphere-item p.visible {
    opacity: 1; /* Делаем заголовок видимым */
    transform: translateY(0); /* Возвращаем его в исходное положение */
    transition-delay: 0.4s;


}



/* В вашем CSS */

#footer {
   background: #333;
   color: white;
   padding: 30px 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 20px;
   text-align: left;
   margin-top: 0px; /* Добавьте эту строку для отступа сверху */
}


.footer-icons {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.footer-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
}

.footer-brand {
  font-size: 14px;
  color: #ccc;
  text-align: center;
  margin-top: 10px;
  min-height: 1em; /* 👈 не даст блоку "сжиматься" */
  opacity: 1;
  transition: none; /* отключаем возможные скрытые анимации */
}

.footer-item a {
  color: #fff;
  text-decoration: none;
  transition: color 0.3s ease;
  display: inline-block;
  padding: 4px 0;
}

.footer-item a:hover {
  color: #aaa;
}


/* Мобильная адаптация */
@media (max-width: 768px) {
  .footer-icons {
    flex-direction: column;
    gap: 12px;
  }

  .footer-item {
    justify-content: center;
    font-size: 14px;
  }

  .footer-item a {
    font-size: 14px;
   
  }

  .footer-brand {
    font-size: 12px;
  }
}









 .parallax-wrapper {
  position: relative;
  height: 60vh; /* или фиксированная высота в px, чтобы не менялась */
  overflow: hidden;
}

.content {
  position: relative;
  z-index: 1;
  height: 100%; /* чтобы занимать всю высоту родителя */
  display: flex;
  justify-content: center;
  align-items: center;
}


    .parallax-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 120%;
      object-fit: cover;
      will-change: transform;
      z-index: -1;
    }

 

    .text-box { 
	 border: 2px solid rgba(255, 255, 255, 0.5);
 background-color: rgba(148, 161, 130, 0.); /* Semi-transparent black background */
      
      padding: 20px;
      width: 450px;
      height: 250px;
      border-radius: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      color: white;
      text-shadow: 0 0 0px black;
    }

    .text-box h1 {
       font-size: 2.5rem;
    font-family: 'Lato', sans-serif;
    margin: 0; /* Remove default margin from h1 */
    line-height: 1.2; /* Adjust line height for better appearance */
    
    }

    /* 📱 Адаптивность для мобильных устройств */
    @media (max-width: 768px) {
      .text-box {
        width: 300px;
        height: 200px;
        padding: 15px;
      }

      .text-box h1 {
        font-size: 1.5rem;
      } 
    } 
@media (max-width: 768px) {
  .parallax-image {
    transform: none !important;
    height: 100% !important;
  }
}



@media (max-width: 768px) {
  .welcome {
    padding: 0 15px;
    flex-direction: column; 

  }

  .welcome-content {
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 0;
    margin: 20px auto;
    width: 100%;
  }

  .welcome-image img {
    max-width: 200px; 
padding-top: 30px;
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
  }

  .welcome-heading {
    font-size: 24px;
    text-align: center;
    transform: translateY(50px);
  }

  .welcome-heading.visible {
    transform: translateY(0);
  }

  .welcome-heading h3 {
    font-size: 26px;
    margin: 0;
    padding: 0;
    text-align: center; 
	 max-width: 300px; /* или другое подходящее значение */
    white-space: normal;
  
  }

  .welcome-text {
    font-size: 16px;
   padding-right: 15px;
    padding-left: 15px;
    max-width: 100%;
    text-align: center;
    transform: translateY(50px);
  }

  .welcome-text.visible {
    transform: translateY(0);
  }

  .welcome-text p {
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
    margin: 0;
    

padding-bottom: 40px;
  }

  .welcome-text h2 {
    font-size: 24px;
  }
}


@media (max-width: 768px) {

.works {
    position: relative; /* Обеспечивает позиционирование для .background-box */
   padding: 0 2% 50px;

    text-align: center;
}

.works hr {
        opacity: 0;
        transition: opacity 1.2s ease-out, transform 0.8s ease-out;
        transform: translateY(100px);
        /* НОВЫЕ СТИЛИ ДЛЯ ЦЕНТРИРОВАНИЯ HR */
        width: 80%; /* Задайте конкретную ширину, например, 80% */
        margin: 0 auto; /* Центрируем по горизонтали */
        border: 1px solid #fff; /* Убедитесь, что рамка видна, если это необходимо */
        box-sizing: content-box; /* Важно для правильного расчёта ширины */
    }

    /* Когда hr становится видимым */
    .works hr.visible {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.2s;
    }


.work-item { 
margin-top: 10px;
    position: relative;
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: center; /* Горизонтальное выравнивание */
    align-items: center; /* Вертикальное выравнивание */
}


.video-left-container { 
 /*box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); */

 width: 100%;      /* фиксированная ширина, как у карусели, например */
  height: 400px;      /* фиксированная высота */
  border: 10px solid white;
  border-radius: 0px;
  overflow: hidden;
  margin-left: 0;     /* прижимаем к левому краю */
  margin-right: auto; /* чтобы не сдвигался вправо */
  position: relative;
}

.video-left {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


.works h1 { padding-bottom: 20px; 
padding-top: 50px; 
 max-width: 800px; 
    margin: 0 auto;
    text-align: justify;
    hyphens: auto;
   
   font-size: 55px; 
text-align: center; 
opacity: 0;
    transition: opacity 1.2s ease-out, transform 1s ease-out;
    transform: translateY(100px);
}

/* Когда картинка становится видимой */
.works h1.visible {
    opacity: 1;
    transform: translateY(0);
    /* Убираем или синхронизируем задержку, чтобы появлялась одновременно */
    transition-delay: 0s; /* Или 0.1s, если хотите небольшую общую задержку */
}
 

.works-h2-container
{padding-top: 10px;
padding-bottom: 30px;
}
/* Начальные стили для заголовка h2 */
.works h2 { 
font-size: 18px; 
    border: 0px solid gray; /* Рамка */

    /* Отступы, чтобы текст не прилипал к рамке */
    padding-top: 10px; /* Увеличил, чтобы было больше места сверху */
    padding-bottom: 20px; /* Увеличил, чтобы было больше места снизу */
    padding-left: 20px; /* Добавил отступы слева */
    padding-right: 20px; /* Добавил отступы справа */

    max-width: 500px; /* Ограничение ширины */
    text-align: center;
    margin: 0 auto; /* Центрирует сам блок по горизонтали */

    color: black; /* Цвет текста. Вы указали Black, но его не было видно на черном фоне. */
    opacity: 0; /* Изначально невидимый */
    transition: opacity 1.2s ease-out, transform 0.8s ease-out; /* Плавная анимация */
    transform: translateY(50px); /* Начальный сдвиг вниз */

    /* ДОБАВЛЕНИЕ: Важно для отображения рамки вокруг текста */
    display: inline-block; /* Или block, но inline-block обычно лучше для облегания текста */
}

/* Когда заголовок становится видимым */
.works h2.visible {
    opacity: 1; /* Делаем заголовок видимым */
    transform: translateY(0); /* Возвращаем его в исходное положение */
    transition-delay: 0.6s;
}

/* Стили для текста в левом overlay */
  .works h4 { font-size: 50px;  color: white; } 

   .overlay-text-left,
  .overlay-text-right {
    width: 80vw;
    height: 10vh;
    border-radius: 10px;
    top: 50%;
    opacity: 0; 
	background-color: rgba(0, 0, 0, 0.1);
    transition: opacity 1s ease-out, transform 1s ease-out;
  }

  .overlay-text-left {
    left: 10%;
    /* для левого сохраняем сдвиг влево по горизонтали */
    transform: translate(-50%, -50%) rotate(90deg) translateY(50px);
  }

  .overlay-text-left.visible {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(90deg) translateY(0);
  }

  .overlay-text-right {
    right: 10%;
    left: auto;
    /* вот здесь меняем translate X с -50% на +50% чтобы сместить элемент вправо */
    transform: translate(50%, -50%) rotate(-90deg) translateY(50px);
  }

  .overlay-text-right.visible {
    opacity: 1;
    transform: translate(50%, -50%) rotate(-90deg) translateY(0);
  }



 /* ... (Ваши существующие мобильные стили) ... */

    /* Общее правило для кнопки на мобильном */
    .btn { 
        position: static; /* Возвращаем в обычный поток, чтобы не мешала */
        margin: 20px auto; /* Центрируем и даём отступ */
        font-size: 40px;
        padding: 12px 30px;
        transform: translateY(50px); /* Для анимации */
 border-radius: 5px; /* Изначальное значение */
border: 2px solid rgba(255, 255, 255, 0.5);
    }

    .btn.visible {
        transform: translateY(0);
    }

    /* --- Стили для конкретных кнопок на мобильном --- */
    /* Здесь вы можете выбрать:
       1. Делать их обычными блоками по центру (как в предыдущей версии)
       2. Или пытаться позиционировать их абсолютно, как на десктопе, но с адаптацией */

    /* Вариант 1: По центру (как мы делали ранее, если `position: static` у `.btn`) */
    /* Если вы хотите, чтобы они обе были по центру на мобильном, то просто оставьте .btn со static */
    /* .btn-carousel, .btn-video будут наследовать стили от .btn */

    /* Вариант 2: Если вы хотите сохранить "разные стороны" и на мобильном (сложнее) */
    /* ЭТО МОЖЕТ ВЫГЛЯДЕТЬ ПЛОХО НА УЗКИХ ЭКРАНАХ, БУДЬТЕ ОСТОРОЖНЫ! */
    .btn-carousel {
        position: absolute;
        bottom: 5px; /* Меньший отступ */
        right: 15px; /* Меньший отступ */
        font-size: 15px; /* Уменьшаем размер */
        padding: 5px 15px;
        transform: translateY(30px); /* Анимация */
    }

    .btn-carousel.visible {
        transform: translateY(0);
    }

    .btn-video {
        position: absolute;
        bottom: 5px; /* Меньший отступ */
        left: 15px; /* Меньший отступ */
        font-size: 15px; /* Уменьшаем размер */
        padding: 5px 15px;
        transform: translateY(30px); /* Анимация */
    }

    .btn-video.visible {
        transform: translateY(0);
    }

    /* ... (Остальные ваши мобильные стили) ... */

/* carusel */
.carousel-container { /*box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); */
  position: relative;
  width: 100%;   /* Чтобы занимать 90% ширины как у .video-left */
  height: 400px; /* Можно зафиксировать или сделать адаптивным */
  overflow: hidden;
  margin-left: auto; /* как у video-left */
  margin-right: 0;
  border: 10px solid white;
  border-radius: 0px;
}

.carousel-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Анимация */
.carousel-item:nth-child(1) {
  animation: fade-in-out 9s infinite;
}
.carousel-item:nth-child(2) {
  animation: fade-in-out 9s infinite;
  animation-delay: 3s;
}
.carousel-item:nth-child(3) {
  animation: fade-in-out 9s infinite;
  animation-delay: 6s;
}

@keyframes fade-in-out {
  0% {opacity: 0;}
  11% {opacity: 1;}
  33% {opacity: 1;}
  44% {opacity: 0;}
  100% {opacity: 0;}
}


}


/* Mobile Styles - Apply Centering Here */
@media (max-width: 768px) {
  .drone {
    background-position: center top;
    text-align: center; /* Center inline/inline-block children */
  }

  .drone h1 {
    padding-top: 80px;
    font-size: 55px;
    display: inline-block; /* Ensure it behaves for text-align: center */
    margin: 0 auto; /* Redundant if parent text-align: center but good for consistency */
  }

  .drone-h2 h2 {
    max-width: 90%;
    font-size: 18px;
    display: inline-block; /* Ensure it behaves for text-align: center */
    margin: 0 auto; /* Redundant if parent text-align: center but good for consistency */
  }

  .drone-hr hr {
    width: 80%; /* Example width for the hr */
    margin: 0 auto; /* Center the hr horizontally */
  }

  .drone-text h6 { 
 font-size: 25px; 
padding-top: 10px;
    text-align: center; /* Center the text inside h6 */
    margin: 0 auto; /* Center the block if it has a max-width */
  }

  .video-wrapper {
    /* Эти свойства определяют размер контейнера видео */
    width: 100vw; /* Ширина контейнера: 80% от ширины видимой области */
    height: 300px; /* Фиксированная высота контейнера: 450 пикселей */
    padding-left: 0; /* <-- Убираем левый отступ */
    padding-right: 0; /* <-- Убираем правый отступ */
    /* Центрирование контейнера по горизонтали */
    margin: 20px auto; 
    
    /* Скрывает любую часть видео, которая выходит за пределы заданных размеров */
    overflow: hidden; 
    
    /* Убедитесь, что padding и border учитываются в width/height */
    box-sizing: border-box; 
    
    /* Вы можете убрать или изменить эти flex-свойства, если они не нужны для других целей,
       так как object-fit и overflow: hidden сами по себе обрезают видео.
       Однако, они помогут центрировать видео, если его пропорции не идеально совпадают. */
    display: flex; 
    justify-content: center; 
    align-items: center; 

    /* Удалено padding: 0% и padding-bottom: 50px, так как они конфликтуют с фиксированной высотой */
}

.video-wrapper video {
    /* Эти свойства заставляют видео полностью заполнить контейнер */
    width: 100%; /* Видео занимает 100% ширины родительского контейнера */
    height: 100%; /* Видео занимает 100% высоты родительского контейнера */
    
    /* Ключевое свойство для обрезки: масштабирует видео, чтобы оно покрывало весь контейнер, обрезая лишнее */
    object-fit: cover; 
    
    /* Остальные ваши стили для видео */
    border: 2px solid white;
    display: block; /* Убедитесь, что видео является блочным элементом */
    /* margin: 0 auto; - не нужно, если родитель flex-контейнер и центрирует */
    opacity: 1; /* Если это для анимации */
    transition: opacity 3.6s ease-out; /* Если это для анимации */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* Если это для тени */
    border-radius: 0px; /* Если это для скругления углов */
}

  .drone-text .container {
    padding: 0 20px;
    margin: 30px auto 50px; /* Center the container block */
  }

  .drone-text p {
    font-size: 15px; 
 text-align: left;
    margin: 0 auto; /* Center the paragraph block if it has a max-width */
    /* text-align: justify; will still apply for text flow */
  }

  .drone-content {
    flex-direction: column; /* Stack content vertically */
    gap: 20px;
    margin: 30px auto; /* Center the entire content block */
    justify-content: center; /* Center items if they become smaller than full width */
  }

  .image-side {
    display: flex; /* Make image side a flex container */
    justify-content: center; /* Center image horizontally within its flex container */
    width: 100%; /* Ensure it takes full width when stacked */
    min-width: unset;
  }

  .image-side img {
    max-width: 100%; /* Ensure images don't overflow */
    height: auto;
  }

  .text-side {
    width: 100%; /* Ensure it takes full width when stacked */
    min-width: unset;
    text-align: center; /* Center text within the text-side */
  }

  .drone-bottom .container {
    padding: 0 20px;
    margin: 0 auto; /* Center the container block */
  }

  .bottom-row {
    flex-direction: column; /* Stack bottom row vertically */
    align-items: center; /* Center items (like images and text-side) vertically when stacked */
    justify-content: center; /* Center items horizontally when stacked */
  }

  .containr { 
 padding-top: 5px; /* Reduced padding */
    padding-bottom: 50px; /* Reduced padding */
    flex-direction: column; /* Stack boxes vertically */
    gap: 30px;
    margin: 0 auto; /* **Crucial for centering the .containr block itself** */
  }

  .box-wrapper {
    width: 90%; /* Make boxes take more width */
    max-width: 350px; /* Limit max width for readability */
    margin: 0 auto; /* **Crucial for centering individual box-wrappers when stacked** */
  }
}

/* Mobile Styles for .sphere and related elements */
@media (max-width: 768px) {
  .sphere {
    /* Наследование text-align: center и width: 100% уже подходит */
  }

 .sphere-item {
  width: 100%;
  max-width: 100%;
  padding-left: 15px;
  padding-right: 15px;
    padding-bottom: 30px;
	 margin-bottom: 0; /* <-- это убирает лишний зазор снизу */
  box-sizing: border-box;
}




  .sphere h1 {
    padding-top: 80px; /* Уменьшаем верхний отступ для заголовка */
    font-size: 55px; /* Корректируем размер шрифта для лучшей читаемости */
    /* display: inline-block и margin: 1px уже хорошо работают с text-align: center родителя */
  }

  .sphere-hr hr {
    width: 80%; /* Уменьшаем ширину линии для мобильных устройств */
    margin: 0 auto; /* Центрируем линию */
  }

  .sphere-h2 h2 {
    padding-top: 10px;
    padding-bottom: 30px; /* Уменьшаем нижний отступ */
    max-width: 90%; /* Позволяем заголовку занимать больше ширины на мобильных */
    font-size: 18px; /* Корректируем размер шрифта */
    /* margin: 0 auto уже хорошо центрирует блок h2 */
  }

  .sphere-item p {
    font-size: 15px;
    margin: 0 auto; /* Center the paragraph block if it has a max-width */
     text-align: left;
  }
}


.modal {
      display: none;
      position: fixed;
      top: 0; left: 0;
      width: 100vw;
      height: 100vh;
      background-color: rgba(0,0,0,0.95);
      z-index: 1000;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      padding: 20px;
      box-sizing: border-box;
    }

    @keyframes pulse {
      0%   { opacity: 1; }
      50%  { opacity: 0.5; }
      100% { opacity: 1; }
    }

    .modal-text {
      color: white;
      font-size: 20px;
      margin-bottom: 20px;
      text-align: center;
      animation: pulse 1.5s infinite;
      transition: opacity 0.3s ease;
      position: relative;
      z-index: 5;
    }

    .modal-text.hidden {
      opacity: 0;
      pointer-events: none;
      height: 0;
      margin: 0;
      padding: 0;
      overflow: hidden;
      animation: none;
    }

    .modal-content {
      width: 100vw;
      max-width: 1280px;
      max-height: 90vh;
      aspect-ratio: 16 / 9;
      background: black;
      box-shadow: 0 0 20px rgba(0,0,0,0.5);
    }

    .close {
      position: absolute;
      top: 10px;
      right: 20px;
      font-size: 28px;
      color: white;
      cursor: pointer;
      z-index: 6;
      user-select: none;
    }






.top-bar,
.bottom-bar {
  height: 80px;
  background-color: rgba(159, 171, 145, 0.9); /* Цвет #9fab91 с прозрачностью 0.7 */
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin: 0;
  padding: 0 10px;
  width: 100%;
}



    /* Десктоп: по умолчанию */
    #panorama {
      width: 1600px;
      height: 900px;
      margin: 5px auto;
      border: 2px solid #aaa;
      border-radius: 12px;
      box-shadow: 0 0 20px rgba(0,0,0,0.2);
      background-color: #000; 
    }

 /* Стили кастомной иконки хотспота */
    .custom-hotspot {
      width: 40px;
      height: 40px;
      background-image: url('icon/icon.png');
      background-size: cover;
     
    }
 /* Скрываем иконку загрузки Pannellum */
        .pnlm-load-box {
            display: none !important; /* Используем !important, чтобы переопределить стили Pannellum */
        }
 

    /* Мобильные устройства */
    @media (max-width: 768px) {
      #panorama {
        width: 100vw;
        height: 500px;
        margin: 0;
        border: none;
		 border-radius: 0px;
      }
    }
	
	@media (max-width: 768px) {
  .top-bar,
  .bottom-bar {
    font-size: 14px;       /* Меньший размер шрифта */
    text-align: center;    /* Выровнять текст по центру */
  }
}


#mobile-panorama-fallback {
  display: none;
  text-align: center;
  padding: 20px;
}

#mobile-panorama-fallback .mobile-btn {
  display: inline-block;
  background: #9fab91;  /* светло-зелёный */
  color: #fff;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  margin-bottom: 15px;
  font-size: 16px;
  transition: background 0.3s ease;
}

#mobile-panorama-fallback .mobile-btn:hover {
  background: #7a8b6f;  /* более тёмный оттенок */
}


#mobile-panorama-fallback img {
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

/* Только на мобильных */
@media (max-width: 768px) {
  #panorama {
    display: none !important;
  }

  #mobile-panorama-fallback {
    display: block;
  }
}



/* Скрываем панораму и бары на мобильных */
@media (max-width: 768px) {
  #panorama,
  .top-bar,
  .bottom-bar {
    display: none !important;
  }

  #mobile-panorama-fallback {
    display: block;
  }
}
@media (max-width: 768px) {
  html[lang="hy"] h1.page-title {
    font-size: 45px;
  }
}