#intro .overlay {
    background: rgba(0, 0, 0, 0.5) !important;
}
.navbar-fixed-top, .navbar-fixed-bottom
{
 z-index: 990;
}

.service-box-content .content ul {
    padding: 20px;
}

.service-box-content .content li {
    list-style: disc;
}

.service-box .content a {
    color: white;
}
.social_share:hover {
    cursor: pointer;
}

.social_share_icons {
    display: flex;
}

.social_share_icon {
    padding: 5px;
img {
    width: 100%;
    display: block;
}
}

@for $i from 1 through 10 {
    .social_share_icon:nth-last-child($i):first-child,
    .social_share_icon:nth-last-child($i):first-child ~ .social_share_icon {
        width: percentage(1/$i);
    }
}

#footer .copyright {
  padding: 8px 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}
#footer .copyright p {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

.fa-max:before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask: url("/local/templates/startup/assets/img/max.svg") no-repeat center / contain;
    mask: url("/local/templates/startup/assets/img/max.svg") no-repeat center / contain;
}

.fa-telegram:before,
.fa-tg:before,
.fa-TG:before {
    content: "" !important;
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.2,4.4L2.9,10.7c-1.1,0.4-1.1,1.1-0.2,1.3l4.1,1.3l1.6,4.8c0.2,0.5,0.1,0.7,0.6,0.7c0.4,0,0.6-0.2,0.8-0.4c0.1-0.1,1-1,2-2l4.2,3.1c0.8,0.4,1.3,0.2,1.5-0.7l2.8-13.1C20.6,4.6,19.9,4,19.2,4.4z M17.1,7.4l-7.8,7.1L9,17.8L7.4,13l9.2-5.8C17,6.9,17.4,7.1,17.1,7.4z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.2,4.4L2.9,10.7c-1.1,0.4-1.1,1.1-0.2,1.3l4.1,1.3l1.6,4.8c0.2,0.5,0.1,0.7,0.6,0.7c0.4,0,0.6-0.2,0.8-0.4c0.1-0.1,1-1,2-2l4.2,3.1c0.8,0.4,1.3,0.2,1.5-0.7l2.8-13.1C20.6,4.6,19.9,4,19.2,4.4z M17.1,7.4l-7.8,7.1L9,17.8L7.4,13l9.2-5.8C17,6.9,17.4,7.1,17.1,7.4z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ОБЩИЙ ФИКС ДЛЯ ВСЕГО САЙТА: закреплённое (fixed) верхнее меню перекрывает
   контент вверху каждой внутренней страницы (about, portfolio, contacts и т.д.).
   Добавляем отступ сверху под высоту меню, а на главной странице (там, где есть
   секция #intro с фоновой картинкой на весь экран) этот отступ компенсируем
   отрицательным margin, чтобы шапка героя осталась во всю ширину под меню.
   ВАЖНО: 84px — примерная высота меню по скриншоту, проверьте фактическую
   высоту #header в инструментах разработчика браузера (F12 → навести на шапку)
   и поправьте это число в обоих местах, если не совпадёт день в день. */
body {
    padding-top: 84px;
}
#intro {
    margin-top: -84px;
}

/* Страница «Обо мне» (/about/) — добавить в конец template_styles.css */
#vz-about img.rounded {
    object-fit: cover;
    aspect-ratio: 4 / 5;
    width: 100%;
}

/* Страница «Медиа» (/media/). Добавить в конец template_styles.css.
   Все селекторы начинаются с #vz-media, чтобы не задеть другие сайты на шаблоне startup. */

#vz-media { padding: 70px 0 60px; }
#vz-media .vz-media__h1 { margin: 0 0 10px; }
#vz-media .vz-media__intro { margin: 0 0 40px; max-width: 720px; color: #6c757d; }

#vz-media .vz-block { margin: 0 0 50px; }
#vz-media .vz-block__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 6px; }
#vz-media .vz-block__title { margin: 0; font-size: 26px; }
#vz-media .vz-block__all { white-space: nowrap; font-size: 15px; }
#vz-media .vz-block__lead { margin: 0 0 20px; color: #6c757d; }

#vz-media .vz-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}

#vz-media .vz-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e3e6ea;
    border-radius: 6px;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: box-shadow .2s, transform .2s;
}
#vz-media .vz-card:hover,
#vz-media .vz-card:focus {
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    transform: translateY(-2px);
    text-decoration: none;
    color: inherit;
}

#vz-media .vz-card__img {
    display: block;
    aspect-ratio: 16 / 9;
    background: #f1f3f5;
    overflow: hidden;
}
#vz-media .vz-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
#vz-media .vz-card__ph {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 12px;
    text-align: center;
    font-size: 18px;
    color: #868e96;
}

#vz-media .vz-card__body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; flex: 1; }
#vz-media .vz-card__meta { font-size: 12px; color: #868e96; }
#vz-media .vz-card__title { font-size: 17px; line-height: 1.3; font-weight: 600; color: #212529; }
#vz-media .vz-card__text { font-size: 14px; line-height: 1.5; color: #6c757d; }

@media (max-width: 575px) {
    #vz-media { padding-top: 40px; }
    #vz-media .vz-block__head { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* Страница «Медиа» (/media/). Добавить в конец template_styles.css.
   Все селекторы начинаются с #vz-media, чтобы не задеть другие сайты на шаблоне startup. */

#vz-media { padding: 70px 0 60px; }
#vz-media .vz-media__h1 { margin: 0 0 10px; }
#vz-media .vz-media__intro { margin: 0 0 40px; max-width: 720px; color: #6c757d; }

#vz-media .vz-block { margin: 0 0 50px; }
#vz-media .vz-block__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 6px; flex-wrap: wrap; }
#vz-media .vz-block__title { margin: 0; font-size: 26px; }
#vz-media .vz-block__all { white-space: nowrap; font-size: 15px; }
#vz-media .vz-block__all--muted { color: #868e96; }
#vz-media .vz-block__lead { margin: 0 0 20px; color: #6c757d; }

#vz-media .vz-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}

#vz-media .vz-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e3e6ea;
    border-radius: 6px;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: box-shadow .2s, transform .2s;
}
#vz-media .vz-card:hover,
#vz-media .vz-card:focus {
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    transform: translateY(-2px);
    text-decoration: none;
    color: inherit;
}

#vz-media .vz-card__img {
    display: block;
    aspect-ratio: 16 / 9;
    background: #f1f3f5;
    overflow: hidden;
}
#vz-media .vz-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Заглушка без реальной обложки: иконка + подпись площадки на цветном фоне.
   Цвета — только чтобы отличать типы материалов друг от друга, ничего не грузится извне. */
#vz-media .vz-card__ph {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 100%;
    padding: 0 12px;
    text-align: center;
}
#vz-media .vz-card__ph-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .01em;
    opacity: .85;
}
#vz-media .vz-card__ph svg { display: block; }

#vz-media .ph--podcast   { background: #eef2ff; color: #4c51bf; }
#vz-media .ph--interview { background: #fff4e6; color: #c2410c; }
#vz-media .ph--video     { background: #e6fcf5; color: #0f766e; }
#vz-media .ph--article   { background: #f1f3f5; color: #495057; }

#vz-media .vz-card__body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; flex: 1; }
#vz-media .vz-card__meta { font-size: 12px; color: #868e96; }
#vz-media .vz-card__title { font-size: 17px; line-height: 1.3; font-weight: 600; color: #212529; }
#vz-media .vz-card__text { font-size: 14px; line-height: 1.5; color: #6c757d; }

/* Страница отдельного раздела (/media/guest/ и т.д.) */
#vz-media .vz-back { margin: 0 0 14px; }
#vz-media .vz-back a { font-size: 14px; color: #6c757d; }

#vz-media .vz-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }
#vz-media .vz-chip {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid #dee2e6;
    border-radius: 999px;
    font-size: 14px;
    color: #495057;
    text-decoration: none;
    transition: border-color .15s, background .15s, color .15s;
}
#vz-media .vz-chip:hover { border-color: #adb5bd; text-decoration: none; color: #212529; }
#vz-media .vz-chip.is-active { background: #212529; border-color: #212529; color: #fff; }

#vz-media .vz-empty { color: #868e96; padding: 20px 0; }

#vz-media .vz-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 40px 0 0;
    font-size: 14px;
}
#vz-media .vz-pager__pos { color: #868e96; }
#vz-media .vz-pager__link { color: #212529; font-weight: 600; }

@media (max-width: 575px) {
    #vz-media { padding-top: 40px; }
    #vz-media .vz-block__head { flex-direction: column; align-items: flex-start; gap: 4px; }
}

.vz-card-wrap { position: relative; }
.vz-card-link { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 5; cursor: pointer; }