.circle-container {
  display: none;
}

@media (max-width: 640px) {

.circle-container {
  display: block;
  width: 100%;       /* match your circle width */
  height: 170px;      /* half of circle height */
  overflow: hidden;   /* hide the bottom half */
  position: relative;
  margin: 30px auto;
  position: relative;
  text-align: center;
}

.circle-container img {
  position: absolute;
  top: 0;
  left: -20%;
  right: -20%;
  width: 140%;
  animation: rotateCircle 20s linear infinite;
  transform-origin: center center; 
}

.content-bottom {
    position: absolute;
    bottom: 8%;
    left: 22%;
    right: 22%;
    text-align: center;
}

.content-bottom p {
    font-size: 12px;
    color: #333;
    line-height: 1.4;
    font-family: Arial, sans-serif;
}

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