.page-container {
  width: 100%;
  min-height: 100vh;
  /*background-image: url("page-back.jpg");*/
  /*background-size: 100% 100%;*/
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: start;
  box-sizing: border-box;
  padding: 2%;
  padding-top: 1%;
  padding-bottom: 1%;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
ol,
li,
button,
fieldset,
header,
footer
 {
  
  font-family: Monotype Corsiva;
  color: black;
  text-decoration: none;
  text-shadow: 1px 1px 2px rgb(199, 142, 153);
}

h2 {
  text-align: center;
  padding-top: 10px;
}

h3 {
  font-size: 1.6rem;
  padding-bottom: 5px;
}
 


.contacts {
  align-self: center;
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  font-size: 1.6rem;
  margin-top: 3px;
  margin-bottom: 15px;
}

.contacts a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.menu {
  align-self: center;
  display: flex;
  flex-direction: row;
  margin-bottom: 3px;
}

.menu .menu-btn {
  transform: skew(-30deg);
  min-width: 150px;
  margin-right: 5px;
}

.menu .menu-btn a {
  transform: skew(30deg);
  padding: 5px;
  display: block;
  width: 100%;
  text-align: center;
  font-size: 1.5rem;
}

.btn {
  background-color: rgba(22, 20, 21, 0.3);
  border: black 2px solid;
  border-radius: 4px;
}

.btn:hover {
  background-color: rgba(22, 20, 21, 0.5);
}

#btn_form {
  position: relative;
}

h1 {
  align-self: center;
  font-size: 2rem;
  margin-bottom: 20px;
}

p,
li {
  font-size: 1.5rem;
}

h2 {
  font-size: 1.7rem;
  font-weight: 400;
}

.categories {
  display: grid;
  grid-template-rows: repeat(1, 1fr);
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.categories .categories-item {
  border: none;
  border-radius: 0;
  min-height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.categories .categories-item a {
  display: block;
  padding: 12px 10px;
  width: 100%;
  font-size: 1.5rem;
  text-align: center;
}

.consult {
  padding: 12px 10px;
}

.consult p {
  text-indent: 50px;
}



.subcategories {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.subcategories .subcategories-item {
  border: none;
  border-radius: 0;
  min-height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.subcategories .subcategories-item a {
  display: block;
  padding: 12px 10px;
  width: 100%;
  font-size: 1.5rem;
  text-align: center;
}

footer {
  position: absolute;
  bottom: 1%;
}

footer p {
  font-size: 1rem;
}

.breadcrumb {
    margin: 0; padding: 0; /* Обнуляем отступы и поля */
    list-style: none; /* Убираем маркеры и нумерацию */
     
  font-family: Monotype Corsiva;
   color: black;
  text-decoration: none;
  text-shadow: 1px 1px 2px rgb(199, 142, 153);
    padding: 1rem; /* Расстояние от текста до края */
    border-radius: 5px; /* Радиус скругления */
    display: flex; /* Выстраиваем список по горизонтали */
    flex-wrap: wrap; /* Текст переносится на другую строку */
    margin-top: 0.5rem; /* Расстояние сверху */
   }

   .breadcrumb > li {
    font-size: 20px;
   }

   .breadcrumb > li > a,
   .breadcrumb > li > a:visited {
    font-size: 20px;
    color: #2c2c2c; /* Серый цвет ссылок */
    text-decoration: none; /* Убираем подчёркивание */
   }

   .breadcrumb > li > a:hover {
    color: #1335c5; /* Цвет ссылок при наведении */
   }

   .breadcrumb > li::after {
    font-size: 20px;
    content: '\00a0  /  \00a0';  /*Символ разделителя*/
    color: black; /* Цвет символа */
    padding: 1 1rem; /* Расстояние слева и справа */
   } 

   .breadcrumb > li:last-child::after {
    content: none; /* Убираем разделитель */
   }
 
   .breadcrumb > span {
    color: #0e0e0e; /* Цвет текста */
    font-weight: bold; /* Жирный шрифт */
   }
 
 .documents {
  padding: 12px 10px;
  text-indent: 50px;
  float: right;
}

legend {
  text-align: center;
  font-size: 1.3rem;
}

form {
  padding: 12px 10px;
 
}
  
/* Контейнер, который объединяет элементы в строку */
.container {
    display: flex;          /* Включаем флекс-модель */
    gap: 15px;              /* Отступ между элементами (современная альтернатива margin) */
    padding: 15px;
    padding-top: 0px;
    border-radius: 8px;
    /* box-shadow: 0 2px 5px rgba(0,0,0,0.1);*/
}

/* Стили для формы */
.inline-form {
    display: flex;  
    flex-direction: column;        /* Делаем саму форму флекс-контейнером для внутренних элементов */
 
}


 /* Адаптация для планшетов и небольших ноутбуков (до 1024px) */
@media (max-width: 1024px) {
    .container {
        width: 90%;
    }
}

/* Адаптация для мобильных устройств (до 768px) */
@media (max-width: 768px) {
    /* Уменьшаем размер шрифта для лучшей читаемости на маленьком экране */
    body {
        font-size: 16px;
    }

    /* Если у вас есть горизонтальное меню, его нужно переделать */
    .nav-menu {
        display: flex;
        flex-direction: column; /* Меняем направление на вертикальное */
        align-items: flex-start; /* Выравниваем пункты по левому краю */
    }

    .nav-menu a {
        padding: 10px;
        width: 100%; /* Ссылки занимают всю ширину, чтобы их было удобно нажимать */
        text-align: left;
        border-bottom: 1px solid #eee;
    }
}