body {
  font-family: Arial, sans-serif;
  margin: 0;
  background: #f5f5f5;
  color: #333;
}

header {
  background: #ffffff;
  color: #004080;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-bottom: 2px solid #004080;
  text-align: center;
}

.title, .subtitle, .info {
  color: #02172c; /* единый цвет текста */
}

.title {
  font-size: 24px;
  font-weight: bold;
  margin: 0 15px;
}

.logo img {
  max-height: 100px; /* уменьшено на 50% */
  margin: 0 20px;
}

.subtitle {
  font-size: 24px;
  font-weight: bold;
  margin: 0 15px;
}

nav {
  background: #004080;
  display: flex;
  justify-content: center;   /* центрируем меню по горизонтали */
  align-items: center;       /* центрируем по вертикали */
  padding: 10px;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;       /* выравнивание пунктов по центру */
  gap: 20px;
}

nav ul li a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  padding: 5px 10px;
  transition: background 0.3s, color 0.3s;
}

nav ul li a.active,
nav ul li a:hover {
  background: #fff;
  color: #004080;
  border-radius: 4px;
}

.lang-switch {
  margin-left: auto;         /* отодвигает флажки вправо */
  display: flex;
  gap: 10px;
  align-items: center;
}

.flag {
  width: 32px;
  height: 24px;
  border: 1px solid #ccc;
  border-radius: 2px;
  transition: transform 0.2s;
}

.flag:hover {
  transform: scale(1.1);
}

/* Подсветка активного пункта */
nav ul li a.active,
nav ul li a:hover {
  background: #fff;
  color: #004080;
  border-radius: 4px;
}

/* Адаптация для мобильных устройств */
@media (max-width: 768px) {
  header {
    flex-direction: column;
  }
  .title, .subtitle, .info {
    margin: 10px 0;
  }
  nav ul {
    flex-wrap: wrap;
  }
  nav ul li {
    margin: 5px;
  }
  nav ul li a {
    font-size: 14px;
    padding: 5px 8px;
  }
}
body {
  font-family: Arial, sans-serif;
  margin: 0;
  background: #f5f5f5;
  color: #333;
}
.lang-switch {
  margin-left: 250px; /* отодвигает блок вправо */
  display: flex;
  gap: 10px;
  align-items: center;
}

.flag {
  width: 32px;   /* размер флажка */
  height: 24px;
  border: 1px solid #ccc;
  border-radius: 2px;
  transition: transform 0.2s;
}

.flag:hover {
  transform: scale(1.1);
}

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 40px;
  }

.card {
  background: #ffffff;
  border: 2px solid #004080;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;
}

.card h3 {
  color: #004080;
  margin-bottom: 10px;
}

.card p {
  font-size: 14px;
  margin-bottom: 15px;
}

.card a {
  display: inline-block;
  padding: 8px 15px;
  background: #004080;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.3s;
}

.card a:hover {
  background: #0066cc;
}

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

/* Адаптация для мобильных устройств */
@media (max-width: 1024px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .container {
    grid-template-columns: 1fr;
  }
}
h1 {
  text-align: center;
  color: #1f0a48;
}

h2 {
  text-align: center;
  color: #1f0a48;
}
@media (max-width: 768px) {
  .article {
    display: block;
  }
  .article-image {
    float: none;
    display: block;
    margin: 0 auto 20px auto; /* фото сверху по центру */
    width: 100%;              /* фото растягивается на всю ширину */
    max-width: 400px;         /* но не больше 400px */
  }
}
  .article-image {
  float: left;
  width: 600px;   /* уменьшить ширину */
  margin: 0 20px 10px 20px;
}

  .article p { flex: 1; /* текст занимает оставшееся пространство */
  }
p {
  margin-left: 20px; /* отступ слева */
  margin-right: 20px; /* отступ справа */
   color: #1f0a48; 
   font-weight: 600 /* полужирный для акцента */
   margin 10px 0; /* отступы сверху и снизу */
}
footer {
  background: #004080;
  color: #fff;
  text-align: center;
  padding: 10px;
  font-size: 14px;
}
body {
  font-family: Arial, sans-serif;
  margin: 0;
  background: #f5f5f5;
  color: #333;
}

.council {
  text-align: center;
  padding: 10px;
}

.council h2 {
  font-size: 24px;
  color: #004080;
  margin-bottom: 30px;
}

.council-container {
  display: grid;
  grid-template-columns: repeat(7, 1fr); /* 7 карточек в ряд */
  gap: 15px;
}

.council-card {
  background: #fff;
  border: 2px solid #004080;
  border-radius: 8px;
  padding: 15px;
  text-align: center;
}

.card-photo {
  width: 100%;
  height: 180px;        /* уменьшенная высота фото */
  object-fit: cover;    /* аккуратное обрезание */
  border-radius: 6px;
  margin-bottom: 10px;
}

/* Адаптация для мобильных устройств */
@media (max-width: 1200px) {
  .council-container {
    grid-template-columns: repeat(3, 1fr); /* по 3 карточки в ряд */
  }
}

@media (max-width: 768px) {
  .council-container {
    grid-template-columns: repeat(2, 1fr); /* по 2 карточки в ряд */
  }
}

@media (max-width: 480px) {
  .council-container {
    grid-template-columns: 1fr; /* по одной карточке */
  }
}
/* Общие стили */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  background: #fff;
  color: #333;
}

/* Шапка */
header {
  text-align: center;
  padding: 20px;
}

/* Меню */
nav ul {
  display: flex;
  justify-content: center;
  list-style: none;
  background: #004080;
  margin: 0;
  padding: 0;
}

nav ul li {
  margin: 0 15px;
}

nav ul li a {
  color: #fff;
  text-decoration: none;
  padding: 10px;
}

nav ul li a.active {
  border-bottom: 2px solid #fff;
}

/* Основной контейнер: две колонки */
.about-container {
  display: grid;
  grid-template-columns: 350px 1fr; /* левая фиксированная, центральная гибкая */
  gap: 20px;
  padding: 20px;
}

/* Левая колонка */
.left-column {
  background: #f0f4f8;
  padding: 15px;
  border-radius: 8px;
}

.left-column h3 {
  color: #004080;
  border-bottom: 2px solid #004080;
  padding-bottom: 5px;
  margin-bottom: 10px;
}

.docs-list {
  list-style: none;
  padding: 0;
}

.docs-list li {
  margin-bottom: 10px;
}

.download-btn {
  display: block;
  margin-top: 5px;
  background: #004080;
  color: #fff;
  padding: 4px 10px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 0.85em;
}

.download-btn:hover {
  background: #0066cc;
}

.partner {
  text-align: center;
  margin-bottom: 15px;
}

.partner img {
  height: 80px;
  width: auto;
  margin-bottom: 5px;
}

/* Центральная колонка */
.about-main {
  background: #fff;
  padding: 15px;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0 10px;
}

.section-header h2 {
  color: #004080;
  margin: 0;
}

.header-icon {
  width: 64px;
  height: 64px;
}

.about-block {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.block-photo img {
  max-width: 200px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.block-text {
  flex: 1;
  text-align: justify;
  line-height: 1.6;
}
/* Таблица для STQ-28 */
.table-container {
  display: flex;
  justify-content: center;
  margin: 30px 0;
}

.stq28-table {
  width: 80%;
  border-collapse: collapse;
  font-size: 15px;
  text-align: left;
}

.stq28-table th, .stq28-table td {
  border: 1px solid #ddd;
  padding: 10px 12px;
}

.stq28-table th {
  background-color: #0099b5;
  color: #fff;
  font-weight: bold;
  text-align: center;
}

.stq28-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

.stq28-table tr:hover {
  background-color: #eef;
}




/* Подвал */
footer {
  text-align: center;
  background: #004080;
  color: #fff;
  padding: 10px;
}

/* 📌 Адаптивность для мобильных */
@media (max-width: 768px) {
  .about-container {
    grid-template-columns: 1fr; /* одна колонка */
  }

  .left-column {
    order: 2; /* левая колонка уходит вниз */
    margin-top: 20px;
  }

  .about-main {
    order: 1; /* центральная колонка остаётся сверху */
  }

  nav ul {
    flex-direction: column; /* меню становится вертикальным */
    align-items: center;
  }

  nav ul li {
    margin: 5px 0;
  }
}