/* Общие настройки */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOAAAACACAMAAAAlB5WJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAnUExURejo6Onp6ezs7O7u7urq6vDw8Pb29vT09PPz8/Hx8fLy8u/v7+fn5/QNF64AAADOSURBVHhe7dPBFYIwAECxUhGLuP+8zvH7csoEGeM4xnzNfTnnPN/XZ1vGuq51f+9tGc9az/Gb2+JgHQfrOFjHwToO1nGwjoN1HKzjYB0H6zhYx8E6DtZxsI6DdRys42AdB+s4WMfBOg7WcbCOg3UcrONgHQfrOFjHwToO1nGwjoN1HKzjYB0H6zhYx8E6DtZxsI6DdRys42AdB+s4WMfBOg7WcbCOg3UcrONgHQfrOFjHwToO1nGwjoN1HKzjYB0H6zhYx8E6DtZxsM1v/gH3y1AfsSC0AAAAAABJRU5ErkJggg==);
  font-family: "Roboto", sans-serif;
  background-color: #f9f9f9;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.container h1, h2, h3 {
  text-align: center;
  margin-bottom: 16px;
}


/* Пустая полоска */
.top-bar {
  height: 20px; /* Высота полоски */
  width: 100%;
  display: block;
}

/* Опционально: добавляем тень для лучшего визуального разделения */
.top-bar::after {
  content: "";
  display: block;
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
  margin-top: -1px; /* Прижимаем тень к нижней части полоски */
}

.site-header {
  /* background-color: rgba(170, 0, 255, 0.7); */
  background-color: #98b8dd; /* word */
  /* background-color: #0015ff; */
  /* background-color: #00ffaa; */
  color: #ffffff;
  padding: 20px 0;
}

.header-content h1 {
  font-size: 2.5em;
  margin-bottom: 10px;
  color: #000000;
}

.header-content h2 {
  font-size: 1.7em;
  margin-bottom: 10px;
  color: #000000;
}

.subtitle {
  font-size: 1.7em;
  margin-bottom: 20px;
}

.primary-btn {
  background-color: #87a96b;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 1em;
  text-decoration: none;
  transition: all 0.3s ease;
}

.primary-btn:hover {
  background-color: #6c8b51;
}

.certificate-list {
  column-gap: 2em;
  list-style: none;
  padding: 0;
  display: grid;
  gap: 10px; /* Пространство между элементами */
}

.certificate-list li {
  background: #fff;
  border: 1px solid #ddd;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Список услуг */
.services {
  background-color: #f9f9f9;
  padding: 20px 0;
}

.service-list {
  column-gap: 2em;
  list-style: none;
  padding: 0;
  display: grid;
  gap: 10px; /* Пространство между элементами */
}

.service-list li {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.service-list li strong {
  display: block;
  font-size: 1.2em;
  margin-bottom: 5px;
  color: #00529b;
}

.service-list li:hover,
.certificate-list li:hover {
  background-color: #f0f8ff;
  transform: scale(1.02);
}

/* Стили для поля поиска */
.search-bar {
  margin-bottom: 20px;
}

#search {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1em;
  transition: border-color 0.3s ease;
}

#search:focus {
  border-color: #87a96b;
  outline: none;
  box-shadow: 0 0 5px rgba(135, 169, 107, 0.5);
}

/* Адаптивность */
/* Маленькие экраны: одна колонка для обоих списков */
@media (max-width: 600px) {
  .service-list,
  .certificate-list {
    grid-template-columns: 1fr;
  }
}

/* Средние экраны: service-list — 2 колонки, certificate-list — 3 колонки */
@media (min-width: 601px) and (max-width: 1024px) {
  .service-list {
    grid-template-columns: repeat(2, 1fr);
  }
  .certificate-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Большие экраны: service-list — 3 колонки, certificate-list — 4 колонки */
@media (min-width: 1025px) {
  .service-list {
    grid-template-columns: repeat(3, 1fr);
  }
  .certificate-list {
    grid-template-columns: repeat(4, 1fr);
  }
}