:root {
  /* Высота навигации */
  --navbar-height: 70px;
  --navbar-padding-vertical: 1rem;
  --navbar-total-height: calc(var(--navbar-height) + var(--navbar-padding-vertical) * 2);

  /* Отступы для контента */
  --content-margin-top: var(--navbar-total-height);


  /* Задаем ширину колонки с роботом в одном месте */
  --robot-column-width: clamp(320px, 30vw, 1200px);

  /* Остальные переменные */
  --primary-color: #6289a0;
  --text-light: lightgrey;
  --bg-dark: black;
  --border-light: rgba(255, 255, 255, 0.1);
  --border-footer: rgba(255, 255, 255, 0.4);
  --content-padding: 1rem;
  --footer-height:clamp(60px, 12vw, 100px);
}

body {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  background-color: var(--bg-dark);
  color: white;
}
html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.project-content h1,
.project-content h2,
.project-content h3,
.project-content h4,
.project-content h5,
.project-content h6 {
  margin-top: 1.5rem; /* Добавляем немного воздуха сверху */
  margin-bottom: 1.25rem; /* Главный отступ снизу, чтобы отодвинуть контент */
}

/* 2. Стили для списков: прозрачный фон и фирменные разделители */
.project-content ul,
.project-content ol {
  list-style: none;
  padding-left: 0;
  margin-bottom: 1rem;
  background-color: transparent; /* Убираем фон */
  border: none; /* Убираем общую рамку */
}

.project-content li {
  position: relative;
  display: block;
  padding: 0.75rem 0.25rem; /* Немного уменьшим боковые отступы, т.к. нет фона */
  background-color: transparent;

  border-bottom: 1px solid var(--primary-color);
  color: var(--text-light);
}

.project-content li:last-child {
  border-bottom: none; /* У последнего элемента разделителя нет */
}

/* 3. Сохраняем красивую нумерацию для упорядоченных списков */
.project-content ol {
    counter-reset: list-item;
}

.project-content ol > li {
    counter-increment: list-item;
}

.project-content ol > li::before {
    content: counter(list-item) ". ";
    font-weight: bold;
    color: var(--primary-color);
    margin-right: 0.5em;
}

/* ===== НАВИГАЦИЯ (без изменений) ===== */
.navbar { background-color: black; background-size: cover; font-family: 'Montserrat', sans-serif; font-size: 1.5rem; position: fixed; top: 0; width: 100%; z-index: 1000; min-height: var(--navbar-height); }
.navbar-brand { font-family: 'New Tegomin', serif; font-size: 2rem; color: lightgrey; }
.navbar-toggler { border: 1px solid lightgrey; background-color: transparent; }
.navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='lightgrey' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
.navbar-toggler:focus { box-shadow: none; outline: 0; }
.nav-link { color: lightgrey; }
.navbar-nav .nav-link:hover { text-decoration: underline; color: var(--primary-color) !important; }
.navbar-nav .nav-link.active { color: lightgrey !important; text-decoration: underline !important; }

.navbar-brand:hover,
.navbar-brand:focus {
  color: var(--primary-color) !important;
  opacity: 1;
}

/* ===== ОСНОВНОЙ КОНТЕЙНЕР ===== */
.main-container {
  font-size: clamp(1rem, 0.8rem + 0.5vw, 1.5rem);
  padding-top: var(--content-margin-top);
  /*padding-bottom: var(--footer-height);
  min-height: calc(100vh - var(--content-margin-top)-var(--footer-height));*/
flex: 1 0 auto;
}

/* ===== ЛЕВЫЙ РОБОТ ===== */
.robot-left{
  position: fixed;
  top: var(--navbar-total-height);
  left: 0;
  height: calc(100vh - var(--navbar-total-height));
  background: url('../img/robot.png') no-repeat left center / cover;
  width: var(--robot-column-width);
  z-index: 0;
}

/* ===== КОЛОНКА С КОНТЕНТОМ ===== */
.main-content-area {
  width: 100%;
}

.hero-content-centered {
  min-height: calc(80vh - var(--navbar-total-height));

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* ===== ОБЩИЕ УНИВЕРСАЛЬНЫЕ КЛАССЫ ===== */
.inner-content-box {
  background-color: rgba(0, 0, 0, 0.9);
  padding: 2rem;
  border-radius: 15px;
  box-sizing: border-box;
}
.custom-card {
  background-color: #1a1a1a;
  border: 1px solid var(--border-light);
  color: var(--text-light);
}
#smart-citylab-cyprus{
margin-bottom: 2rem;
}

.hero-content-centered{
    width: 70%;
     margin: 0 auto;

     line-height: 1.6;
}

/* ===== Кнопка "Наверх" ===== */
#scrollTopBtn {
  display: none; /* Скрыта по умолчанию */
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: var(--primary-color);
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 10px;
  font-size: 18px;
  transition: opacity 0.3s;
}

#scrollTopBtn {
  display: none;
  position: fixed;
  bottom: 110px;
  right: 30px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: transparent; /* Убираем фон */
  cursor: pointer;
  padding: 0; /* Убираем внутренние отступы */
  transition: opacity 0.3s, transform 0.3s;

  /* Добавляем анимацию покачивания */
  animation: bobbing 3s infinite ease-in-out;
}

#scrollTopBtn img {
  width: clamp(60px, 10vw, 134px);
  height: auto;
}

#scrollTopBtn:hover {
  opacity: 1;
  transform: scale(1.2);
}

/* Сама анимация покачивания */
@keyframes bobbing {
  0% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}


/* ===== АДАПТИВНОСТЬ ===== */

/* Скрываем робота на экранах меньше lg (992px) */
@media (max-width: 991.98px){
  .robot-left{ display: none; }
}

@media (min-width: 3840px) {


  /* Увеличиваем вертикальные отступы для заголовков */
  h1, .project-content h1, .schools-intro h1 {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  h2, .project-content h2 {
    margin-top: 2.5rem;
    margin-bottom: 1.75rem;
  }

  h3, .project-content h3 {
    margin-top: 2rem;
    margin-bottom: 1.5rem;
  }

  p {
    margin-bottom: 1.2rem;
  }

}
@media (min-width: 992px){
  .main-content-area, .site-footer{
    margin-left: var(--robot-column-width);
    width: calc(100% - var(--robot-column-width));
  }
}


@media (max-width: 790px) {
  .navbar-collapse { background-color: black; padding: 1rem 0; margin-top: 1rem; }
  .navbar-nav { text-align: center; }
  .nav-item { margin: 0.5rem 0; }
  #scrollTopBtn img {
  width: 60px;
  height: auto;
}
}

a {
  color: var(--primary-color);
  transition: all 0.2s ease-in-out;
}

a:hover {
  color: var(--text-light);
}



@media (max-aspect-ratio: 1.6) {
  .robot-left {
    display: none !important;
  }
  .main-content-area {
    margin-left: 0;
    width: 100%;
  }
}

.site-footer {
  border-top: 1px solid var(--border-light);
  display: flex;
  left: 0;
  bottom: 0;
  color: var(--text-light);
  padding: 1rem 0;
  border-top: 1px solid var(--border-footer);
  text-align: center;
  flex-shrink: 0;
}

.site-footer h4 {
  color: white;
  margin-bottom: 1rem;
  font-weight: bold;
}

.site-footer p {
  margin-bottom: 0.5rem;
}

.site-footer a {
  color: var(--primary-color);
  text-decoration: none;
}

.site-footer a:hover {
  color: white;
  text-decoration: underline;
}

.social-icon {
  width: 35px;
  height: auto;
  transition: opacity 0.2s ease-in-out;
}

.social-icon:hover {
  opacity: 0.8;
}

@media (max-width: 767.98px) {
  .site-footer {
    text-align: center;
  }
}
.navbar-brand {
  position: relative; /* <-- Вот эта важная строка, которой не хватало! */
}
.nav-brand-img {
  height: 100px;
  width: auto;
  position: absolute;  /* Позиционируем относительно "якоря" .navbar-brand */

  /* Эти значения размещают его сверху и справа. Можете их поменять, чтобы подвинуть картинку. */
  top: -20px;
  right: -85px;

  pointer-events: none; /* Чтобы картинка не мешала нажимать на ссылку */
  transition: transform 0.3s ease-in-out;
}

.navbar-brand:hover .nav-brand-img {
  transform: rotate(-25deg) translateY(-10px) scale(1.1);
}

@media (max-width: 840px) {
  .nav-brand-img {
    display: none;
  }
}