/* Основная секция: фон в цветах логотипа */
.cta-section {
    background: linear-gradient(to right, #2A344A, #9C3831); /* Темно-синий и бордовый */
    color: white;
}

/* Левый блок с текстом: выделение и тень */
.cta-text-block {
    background-color: rgba(42, 52, 74, 0.7); /* Темно-синий полупрозрачный фон */
    padding: 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.5); /* Сильная тень */
}

/* Форма: выделение и тень */
.cta-form {
    background-color: #FFFFFF; /* Белый фон */
    color: #2A344A; /* Темный цвет текста */
    padding: 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.5); /* Сильная тень */
}

/* Кнопка */
.cta-button {
    width: 100%;
    background-color: #FFC72C; /* Фирменный желтый цвет */
    color: #2A344A; /* Темный цвет текста для контраста */
    font-weight: bold;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    border: none;
    cursor: pointer;
}

.cta-button:hover {
    background-color: #C7573A; /* Цвет при наведении (терракотовый) */
}

/* Кнопка в хедере (верхняя) */
.header-button {
    background-color: #FFC72C; /* Фирменный желтый цвет */
    color: #2A344A; /* Темный цвет текста для контраста */
    font-weight: bold;
    padding: 0.5rem 1rem; /* px-4 py-2 */
    border-radius: 0.25rem; /* rounded */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* shadow-md */
    text-decoration: none; /* Убираем подчеркивание у ссылки */
    display: inline-block;
    transition: background-color 0.3s ease;
}

.header-button:hover {
    background-color: #C7573A; /* Цвет при наведении */
}

/* Базовый стиль ссылок в меню */
.nav-link {
    color: #2A344A; /* Твой основной темный цвет */
    text-decoration: none;
    font-weight: 600;
    position: relative; /* Нужно для анимации линии */
    transition: color 0.3s ease;
    padding: 5px 0;
}

/* Цвет при наведении */
.nav-link:hover {
    color: #983832; /* Тот самый желтый из лого */
}

/* Создаем линию под ссылкой */
.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #983832; /* Цвет линии */
    transition: width 0.3s ease; /* Анимация выезда линии */
}

/* Линия выезжает при наведении */
.nav-link:hover::after {
    width: 100%;
}

.logo-text {
    font-weight: 900; /* Максимальная жирность */
    font-size: 1.5rem; /* Немного увеличил размер (text-2xl) */
    color: #2A344A; /* Твой фирменный темно-синий */
    text-transform: uppercase; /* Можно сделать все буквы заглавными для стиля "мото" */
    letter-spacing: -0.5px; /* Плотное написание */
}
.service-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid #222;
  border-radius: 4px 4px 0 0;

  /* Асфальтовая текстура */
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(40, 40, 40, 0.95),
      rgba(40, 40, 40, 0.95) 3px,
      rgba(30, 30, 30, 0.95) 3px,
      rgba(30, 30, 30, 0.95) 6px
    ),
    linear-gradient(
      0deg,
      rgba(90, 70, 50, 0.15),
      rgba(90, 70, 50, 0.15)
    );

  background-blend-mode: overlay;
}
.logo-text {
  font-size: 1.6rem;              /* Чуть крупнее, чем обычный текст */
  font-weight: 700;               /* Уверенный, но не жирный заголовок */
  font-style: italic;             /* Лёгкий курсив — динамика, “движение” */
  color: #943832;                 /* Твой фирменный цвет */
  letter-spacing: 0.05em;         /* Чуть “расправили плечи” */
  text-shadow: 0 1px 2px #403545; /* Очень мягкая тень, даёт объём */
  transform: translateY(-1px);    /* Едва приподняли визуально */
}

.section-title {
  font-weight: 700;
  font-style: italic;
  color: #943832;                 /* фирменный цвет */
  text-shadow: 0 1px 2px #403545; /* мягкая тень */
  letter-spacing: 0.02em;         /* чуть воздуха */
}