.banner-circles-carousel {
  position: relative;
  width: 1280px;
  height: 324px;
  max-width: 100%;
  margin: 0 auto;
  background: rgb(255,255,255);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bcc-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.bcc-circle {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  left: 0; top: 0;
  transition: left 0.7s, top 0.7s, opacity 0.9s, transform 1.2s;
  animation: bccFloatY 8s infinite alternate ease-in-out;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
.bcc-circle1 { width: 180px; height: 180px; background: rgba(116,206,205,0.7);}
.bcc-circle2 { width: 120px; height: 120px; background: rgba(37,177,116,0.8);}
.bcc-circle3 { width: 130px; height: 130px; background: rgba(116,206,163,0.6);}
.bcc-circle4 { width: 90px; height: 90px; background: rgba(119,157,210,0.9);}
.bcc-circle5 { width: 200px; height: 200px; background: rgba(24,71,137,0.6);}
@keyframes bccFloatY {from{transform:translateY(0);}to{transform:translateY(-24px);}}
.bcc-circle.active { opacity: 1; z-index: 1; transform: scale(1.06);}
.bcc-circle.inactive { opacity: 0; z-index: 0; transform: scale(0.85);}
.bcc-contents { position: relative; z-index: 2; width: 100%; max-width: 700px; margin: 0 auto; }
.bcc-content {
  position: absolute;
  left: 50%; top: 46%;
  width: 100%;
  max-width: 700px;
  color: #fff;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, -20px) scale(0.97);
  pointer-events: none;
  transition: opacity 0.8s cubic-bezier(.77,0,.175,1), transform 0.8s cubic-bezier(.77,0,.175,1);
}
.bcc-content.active {
  opacity: 1;
  transform: translate(-50%, 0) scale(1.00);
  pointer-events: auto;
  transition-delay: 0.18s;
}
.bcc-content h2 { font-size: 2.2rem; font-weight: 700; margin-bottom: 20px; letter-spacing: 2px;}
.bcc-content p { font-size: 1.18rem; font-weight: 400; line-height: 1.7; margin-bottom: 0; color: #1a6cb3;}
@media (max-width: 1300px) {
  .banner-circles-carousel { width: 100vw; min-width: 320px; }
}
@media (max-width: 700px) {
  .bcc-circle { width: 60px !important; height: 60px !important; }
  .banner-circles-carousel { height: 160px;}
  .bcc-content h2 { font-size: 1.1rem;}
  .bcc-content p { font-size: 0.85rem;}
}