/* ====== ЗАГОЛОВОК СЕКЦИИ ====== */
.section-title {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 2rem;
    margin-top: 4rem;
    font-weight: 600;
    color: #333;
}

.section-title span {
    color: #f15a29;
    /* «УСЛУГИ» выделяем оранжевым */
}

/* ====== РЯД С КАРТОЧКАМИ ====== */
.services-row {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
    /* Отступ между рядами */
    flex-wrap: wrap;
    /* Чтобы карточки не вылезали за экран на узких устройствах */
}

/* ====== КАРТОЧКА УСЛУГИ ====== */
.service-card {
    background: #fff;
    border: 2px solid #f15a29;
    /* Оранжевая рамка */
    border-radius: 10px;
    /* Скруглённые углы */
    padding: 1.5rem;
    transition: box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.service-card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.service-icon {
    width: 66px;
    /* При необходимости меняйте размер иконки */
    height: 66px;
    margin-bottom: 1rem;
}

.service-card h3 {
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
    margin-top: 20px;
    color: #333;
}

.service-card p {
    font-size: 0.95rem;

    color: #666;
    line-height: 1.4;
}

/* ====== ФИКСИРОВАННЫЕ ШИРИНЫ ====== */
.card-362 {
    width: 322px;
    height: 234px;
    flex: 0 0 auto;
    /* чтобы ширина не растягивалась */
}

.card-572 {
    width: 525px;
    height: 204px;
    flex: 0 0 auto;
    margin-bottom: 3rem;
}

/* ====== АДАПТИВНОСТЬ ====== */
@media (max-width: 992px) {
    /* При желании можно скорректировать отступы, ширины и т.п. */
}

@media (max-width: 1185px) {
  .container {
    padding: 0 5px; /* Минимизируем padding */
  }

  .services-row {
    gap: 0.5rem;
    padding: 0;
    justify-content: center;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .card-362,
  .card-572 {
    width: 100% !important;
    max-width: 400px;
    min-width: 0;
    height: auto;
    
    margin: 0 auto; /* Центрируем карточку */
    box-sizing: border-box; /* Учитываем padding и border */
  }

  .service-card {
    margin-bottom: 1rem;
    padding: 0.75rem; /* Уменьшаем padding для меньших экранов */
    text-align: center; 
    box-sizing: border-box;
  }

  /* Убедимся, что внутренние элементы не выходят за пределы */
  .service-icon,
  .service-card h3,
  .service-card p {
    width: auto;
    max-width: 100%;
    margin-right: 0;
    box-sizing: border-box;
  }
}