/* Start custom CSS for image, class: .elementor-element-98e6144 */.circle-hover {
  position: relative;
  display: inline-block;

  /* 圈圈參數 */
  --circle-top: 50%;
  --circle-left: 50%;
  --circle-width: 70%;
  --circle-height: 111%;
}

.circle-hover img,
.circle-hover i {
  transition: transform 0.3s ease;
}

/* 建立動畫層：這是圓圈 */
.circle-hover::after {
  content: "";
  position: absolute;
  top: var(--circle-top);
  left: var(--circle-left);
  width: var(--circle-width);
  height: var(--circle-height);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px dashed #00D8E6;

  pointer-events: none;
  opacity: 1;

  /* 使用 scale animation 不會被 hover 蓋掉 */
  animation: circle-breath 2.5s ease-in-out infinite;
}

/* hover 效果只套在本體，不影響 ::after */
.circle-hover:hover img,
.circle-hover:hover i {
  transform: scale(1.1);
}

/* 呼吸動畫：縮放圓圈本身 */
@keyframes circle-breath {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0.7;
  }
}

/* 手機和平板：關閉動畫 */
@media (max-width: 1024px) {
  .circle-hover::after {
    display: none !important;
  }

  .circle-hover:hover img,
  .circle-hover:hover i {
    transform: none !important;
  }
}/* End custom CSS */