/* Контейнер-обертка */
.pulse-wrapper {
  position: relative;
  display: inline-block; /* Или flex/grid в зависимости от макета */
  width: 700px;         /* Задайте нужные размеры под ваш контент */
  height: 700px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Общие стили для всех пульсирующих кругов */
.pulse-circle {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #ff914d; /* Базовый оранжевый цвет как на картинке */
  opacity: 0;
  z-index: 1;
  /* Запуск анимации: имя, длительность, бесконечно, линейно */
  animation: pulse-wave 4s infinite linear;
}

/* Задержки для каждого круга, чтобы они шли друг за другом */
.c1 { animation-delay: 0s; }
.c2 { animation-delay: 1.33s; }
.c3 { animation-delay: 2.66s; }

/* Контент всегда должен быть выше кругов */
.main-content {
  position: relative;
  z-index: 2;
}

/* Анимация пульсации */
@keyframes pulse-wave {
  0% {
    transform: scale(0.4);
    opacity: 0.8;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}