.container-with-header-image {
    background-size: 100%;
    background-position-x: 0;
    background-position-y: 0;
    background-repeat: no-repeat;
}
.container {
  width: 94%;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  padding: 0% 3% 0;
  background: url(/static/images/src/cat_bg.png) 0 0 no-repeat;
    background-size: auto;
  background-size: 100%;
}
.header-container {
    display: flex;
    max-width: 800px;
    padding: 8px 40px 0 40px;
}
.header-container .avatar-wrapper {
    width:23%;
    margin-right: 9%;
}
.header-container .avatar {
    width:100%;
    background-color: #ddd;
    padding-top: 100%; /* Для сохранения соотношения сторон 1:1 */
    border-radius: 50%; /* Круглый аватар */

    background: url(/static/images/src/ava200x200.png) 0 0 no-repeat;
    background-size: 100%;
    border: 3px solid #fff;
}
.header-container .text-content {
    width:68%;
}


.text-content p {
    font-size: 19px;
    line-height: 1.2;
    color: #fff;
    font-family: 'MontserratAlternates';
    margin-top: 0;
    margin-bottom: 0;
}
.text-content p.blue-montserrat {
    font-family: 'Montserrat';
    background-color: #0b447da8;
    font-size: 10px;
    text-align: center;
    border-radius: 10px;
    margin-top: 10px;
    text-transform: uppercase;
    line-height: 20px;
    font-weight: 600;
}

.content.links p {
    width: 50%;
    margin: 0 auto 15px; /* Центрирует блок по горизонтали */
    text-align: left; /* Выравнивание текста по левому краю, чтобы контент выглядел естественнее */
    display: flex;
    align-items: center;
}

.content.location-name {
    text-align: center;
    margin-top: 250px;
  margin-block-end: 0em;
}

.content.location-name div {
    text-align: center;
    text-transform: uppercase;
}
.content.location-name .category-name {
    padding: 5px;
    font-size: 22px;
    line-height: 1.2;
    color: #fff;
    font-family: 'MontserratAlternates';
    text-transform: initial;
}
.content.location-name .yellow-label {
    font-family: 'Montserrat';
    background-color: #f7b643;
    font-size: 10px;
    text-align: center;
    border-radius: 10px;
    margin-top: 5px;
    text-transform: uppercase;
    line-height: 20px;
    font-weight: 600;
    letter-spacing: 0.4px;
    padding: 1px 15px;
    display: inline-block;
}
/* Стили для иконки */
.category_icon {
    width: 20px; /* Фиксированная ширина */
    height: 20px; /* Фиксированная высота */
    border-radius: 50%; /* Делаем иконку круглой */
    background-size: 18px;
    background-position: center; /* Центрируем изображение */
    margin-right: 10px; /* Отступ справа от иконки */
    flex-shrink: 0; /* Запрещаем сжимать иконки при изменении ширины родительского блока */
    background-color: #fff;
    padding: 2px;
    background-repeat: no-repeat;
}

/* Дополнительные стили для ссылок */
.table_of_contents {
    text-decoration: none;
    color: #333; /* Цвет текста */
    text-transform: uppercase;
    font-family: 'Montserrat';
    font-size: 13px;
    font-weight: 600;
}

.table_of_contents:hover {
    color: #007BFF; /* Цвет при наведении */
}

.custom-list {
    list-style: none; /* Убираем стандартные маркеры списка */
    padding-left: 0; /* Убираем отступ слева */
    width: 75%;
  margin: 0 auto;
}

.custom-list li {
    position: relative;
    padding-left: 25px;
  margin-bottom: 18px;
}

.custom-list li::before {
    content: ''; /* Псевдоэлемент для кружочка */
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%); /* Центрируем кружочек по вертикали */
    width: 6px;
    height: 6px;
    background-color: white; /* Белый цвет кружочка */
    border-radius: 50%; /* Делаем его кругом */
    box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.4); /* Добавляем тень снизу */
}