@import url(vars.css);
@import url(reset.css);
@import url(fonts.css);
@import url(mix-class.css);
@import url(burger.css);
@import url(header.css);
@import url(nav.css);
@import url(main.css);
@import url(hero.css);
@import url(footer.css);
/* === BREADCRUMBS (универсальный стиль для всех страниц) === */
.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.9rem;
    margin-bottom: 1rem;
    list-style: none;
    padding: 0;
}

.breadcrumb a {
    color: #0f6fb0; /* синий фирменный цвет */
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.breadcrumb a:hover {
    color: var(--subtitle-color); /* делает плавный переход к цвету подзаголовков */
}

.breadcrumb a::after {
    content: "→";
    margin-left: 0.5rem;
    color: #999;
}

.breadcrumb .current {
    color: var(--text-color);
    font-weight: 600; /* немного жирнее для акцента */
}

.breadcrumb .current::after {
    content: "";
}

@media (max-width: 768px) {
    .breadcrumb {
        font-size: 0.8rem;
        gap: 0.4rem;
    }
}

/* ============================
   MOBILE TITLES & SECTIONS FIX
   ============================ */
@media (max-width: 768px) {

  /* Общий отступ секций друг от друга */
  .section,
  .about,
  .services,
  .categories,
  .blog {
    padding-top: 1rem;       /* поменьше воздуха сверху */
    padding-bottom: 1.2rem;  /* чуть больше снизу */
  }

 

  /* Чтобы не было огромного промежутка между hero и первым блоком 
  .hero,
  .universal-hero {
    margin-bottom: 1.5rem;
  }*/

  /* Немного уменьшим размер заголовка на мобилке,
     чтобы не «перекрикивал» фон и не прилипал к краям */
  .universal-hero__title {
    font-size: 1.4rem;
    
  }
}