/* ===========================
   Cartum Studio typography
   =========================== */

/* Базовый шрифт всего сайта */
body {
    font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 300; /* лёгкий по умолчанию */
}

/* Главное меню (сбоку и бургер) + крупные заголовки */
.side-nav-menu .nav-link,
.heading-area .heading,
.work-heading,
.user-name {
    font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 300;              /* ближе к твоему hairline/тонкому виду */
    letter-spacing: 0.03em;        /* немного трекинга, как в макетах */
}

/* Обычный текст, формы, подписи */
.text,
.contact-details li,
.form-control,
.contact-form .btn,
.btn-main,
.btn-sec-inverse {
    font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 300;
}

/* Мелкие подписи контактов — ещё тоньше */
.contact-details li {
    font-weight: 100;   /* Lato Thin / Hairline по ощущениям */
}

/* Заголовок слева в портфолио — фиксируем перенос NATIONA/L */
#portfolio-main-title {
    font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 300;
    font-size: 3.2rem;
    line-height: 1.05;
    word-break: normal !important; /* не рвём слова */
    hyphens: none;
}



/* Cartum Studio: финальный размер логотипа в шапке */
header .navbar-brand img {
    height: 56px !important;     /* меняй 40–56 как нравится */
    width: auto !important;
    max-width: none !important;  /* игнорируем 70% и 120px */
    display: block;
}

.sampler-card .sampler-cap .sampler-tags{
  font-size: 13px !important;
  line-height: 1.25 !important;
  letter-spacing: .10em !important;
  color: rgba(255,255,255,.55) !important;
  text-transform: uppercase !important;

  display:block;
  width:100%;
  text-align:center !important;
  margin-top: 6px;
  white-space: normal;
}
}


/* Фиксируем высоту блока с большим заголовком, чтобы слайды не прыгали */
#portfolio-sec .heading-area.long-area {
  min-height: 80px; /* подстрой под себя: 70–90px обычно хватает на 2 строки */
}

/* на телефонах можно сделать чуть меньше, если нужно */
@media (max-width: 767.98px) {
  #portfolio-sec .heading-area.long-area {
    min-height: 60px;
  }
}

/* фиксируем высоту заголовка портфолио */
#portfolio-main-title {
  display: block;
  min-height: 3.2em;   /* 2 строки текста с запасом */
}

/* можно чуть подстраховаться на больших экранах */
@media (min-width: 992px) {
  #portfolio-main-title {
    min-height: 3.6em;
  }
}

/* Делаем так, чтобы секция всегда была видна целиком и не подтягивала хвосты сверху */
#contact-sec {
    min-height: 100vh; /* Секция будет занимать высоту всего экрана */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Центрируем контент внутри */
    background-color: #23262d; /* Обязательно задаем фон, чтобы он перекрыл кавычки */
    position: relative;
    z-index: 5;
    margin-top: 0;
}

/* Сдвигаем точку приземления якоря, чтобы не было "наползания" */
#contact-sec {
    scroll-margin-top: 50px; 
}

/* Если красный блок внутри прижат к верху, добавим ему отступ */
.contact-inner {
    padding-top: 60px;
}
}



/* CONTACT SECTION – make it behave like other sections */

.contact-sec {
  /* тот же общий фон, что и у страницы/остальных блоков */
  background: #23262d; /* если у тебя в body другой цвет – подставь его сюда */

  /* убираем центрирование по высоте и «экранность» */
  display: block;
  min-height: auto;

  /* делаем нормальные отступы сверху/снизу, как у ABOUT, только чуть жирнее снизу */
  padding-top: 80px;
  padding-bottom: 140px;
}

/* внутренняя красная плашка — просто контент, без влияния на высоту секции */
.contact-sec .contact-inner {
  margin: 0 auto;
}

/* на всякий пожарный гасим возможный flex с контейнеров внутри */
.contact-sec .container-fluid,
.contact-sec .row {
  align-items: flex-start !important;
}

/* Дополнительное «мясо» под контактной секцией */
.contact-spacer {
    height: 120px;    /* регулируешь под себя */
}

/* На мобиле можно сделать поменьше */
@media (max-width: 768px) {
    .contact-spacer {
        height: 80px;
    }
}