/* Общие стили для секций */
.section {
  margin-bottom: 40px; /* Отступ снизу для основных секций */
}

/* Шапка и герой-секция */
.header + .hero-section {
  margin-top: 40px; /* Отступ между шапкой и герой-секцией */
}

/* Герой-секция и контент */
.hero-section + .main-content {
  margin-top: 50px; /* Больший отступ для визуального разделения */
}

/* Блоки с карточками (например, курсы) */
.cards-section .card {
  margin-bottom: 20px; /* Отступ между карточками */
}
.cards-section + .section {
  margin-top: 50px; /* Отступ после секции с CASCADEкарточками */
}

/* Форма и контент */
.form-section {
  margin-top: 50px; /* Отступ перед формой */
  margin-bottom: 50px; /* Отступ после формы */
}

/* Контент и футер */
.main-content + .footer {
  margin-top: 60px; /* Больший отступ перед футером */
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
  .section {
    margin-bottom: 30px;
  }
  .header + .hero-section {
    margin-top: 20px;
  }
  .hero-section + .main-content {
    margin-top: 30px;
  }
  .cards-section + .section {
    margin-top: 30px;
  }
  .form-section {
    margin-top: 30px;
    margin-bottom: 30px;
  }
  .main-content + .footer {
    margin-top: 40px;
  }
}