.circle-outline {
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 4px solid var(--bs-primary);
    border-radius: 50%;
    margin-right: 12px;
    -ms-flex-negative: 0;
    flex-shrink: 0
}

.custom-gutter {
    --bs-gutter-x: 0rem
}

@media (min-width:992px) {
    .custom-gutter {
        --bs-gutter-x: 5rem
    }
}

@media (min-width:1200px) {
    .custom-gutter {
        --bs-gutter-x: 8rem
    }
}

.section-receiver .receiver-bg {
    min-height: 300px
}

@media (min-width:992px) {
    .section-receiver .receiver-bg {
        min-height: 500px
    }
}

@media (min-width:1400px) {
    .section-receiver .receiver-bg {
        min-height: 600px
    }
}

@media (min-width:1600px) {
    .section-receiver .receiver-bg {
        min-height: 700px
    }
}


.circle-item {
  animation: float-right 3.5s ease-in-out infinite;
}

@keyframes float-right {
  0%, 100% {
      transform: scale(1.25) translateX(-50%) translateY(0px);
  }
  50% {
      transform: scale(1.25) translateX(-50%) translateY(-15px);
  }
}


@media (max-width: 767.98px) {
  .circle-item {
    left: 80px !important;
    right: auto !important;
    margin-top: -20px;
    animation: float-right-mobile 3.5s ease-in-out infinite;
  }
  
  @keyframes float-right-mobile {
    0%, 100% {
        transform: scale(0.8) translateY(0px); 
    }
    50% {
        transform: scale(0.8) translateY(-5px);
    }
  }
}



/* 视觉差滚动效果样式 */
.section-parallax {
  position: relative;
  overflow: hidden;
  height: 200vh; /* 设置足够的高度容纳两个项目 */
}

.parallax-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  transition: transform 0.8s ease-out, opacity 0.8s ease-out;
  display: flex;
  align-items: center;
  justify-content: center;
}

.parallax-active {
  transform: translateY(0);
  opacity: 1;
  z-index: 2;
}

.parallax-inactive {
  transform: translateY(100vh);
  opacity: 0;
  z-index: 1;
}

.parallax-item.parallax-next {
  transform: translateY(0);
  opacity: 1;
  z-index: 2;
}

.parallax-item.parallax-previous {
  transform: translateY(-100vh);
  opacity: 0;
  z-index: 1;
}

.parallax-layer {
  transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}

.parallax-item.parallax-next .parallax-layer {
  animation: slideInUp 0.8s ease-out forwards;
}

@keyframes slideInUp {
  from {
    transform: translateY(50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}




.timeline-item h4 {
  color: #DBDBDB;
  transition: color 0.3s ease;
}

.timeline-item.active h4 {
  color: #222;
}