.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/bg-city.png) 0 0 no-repeat;
    background-size: auto;
  background-size: 100%;
}
.header-container {
    display: flex;
    max-width: 800px;
    padding: 8px 35px 0 35px;
}
.header-container .avatar-wrapper {
    width:23%;
    margin-right: 6%;
}
.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:71%;
    text-align: center;
}


.text-content p {
    font-size: 18px;
    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;
    text-align: center;
    display: inline-block;
    padding: 1px 15px;
}

.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: 125px;
}

.content.location-name div {
    text-align: center;
    text-transform: uppercase;
}
.content.location-name .city-name {
    color: white;
    padding: 5px;
    font-size: 32px;
    line-height: 1.2;
    color: #fff;
    font-family: 'MontserratAlternates';
}
.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; /* Цвет при наведении */
}