.animated-cover-wrapper {
  position: relative;
  overflow: hidden;
  background-color: #00452b;
}

/* Push the cover block on top of the animation */
.animated-cover-wrapper .wp-block-cover {
  position: relative;
  z-index: 0;
  background: transparent !important;
}

/* Animation layer sits behind */
.animated-cover-background {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* ── Animation elements ── */
/* Replace the rules below with your actual animation CSS */
.circle-text-1-container {
  width: 50%;
  aspect-ratio: 1 / 1;

  position: absolute;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}
.circle-text-2-container {
  width: 64%;
  aspect-ratio: 1 / 1;

  position: absolute;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}
.circle-text-3-container {
  width: 80%;
  aspect-ratio: 1 / 1;

  position: absolute;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

.circle-text-1 {
  width: 100%;
  aspect-ratio: 1 / 1;

  background: url("images/banner-text.svg") no-repeat center/contain;

  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  animation: spin 60s linear infinite;
}

.circle-text-2 {
  width: 100%;
  aspect-ratio: 1 / 1;

  background: url("images/banner-text.svg") no-repeat center/contain;

  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  animation: spinRev 80s linear infinite;
}

.circle-text-3 {
  width: 100%;
  aspect-ratio: 1 / 1;

  background: url("images/banner-text.svg") no-repeat center/contain;

  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  animation: spin 110s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes spinRev {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

@media (max-width: 1300px) {
  .circle-text-1-container {
    width: 70%;
    aspect-ratio: 1 / 1;

    position: absolute;
    top: 50%;
    left: 50%;
    /* bring your own prefixes */
    transform: translate(-50%, -50%);
  }
  .circle-text-2-container {
    width: 93%;
    aspect-ratio: 1 / 1;

    position: absolute;
    top: 50%;
    left: 50%;
    /* bring your own prefixes */
    transform: translate(-50%, -50%);
  }
  .circle-text-3-container {
    width: 120%;
    aspect-ratio: 1 / 1;

    position: absolute;
    top: 50%;
    left: 50%;
    /* bring your own prefixes */
    transform: translate(-50%, -50%);
  }
}