/* -------------------------------------- */
/* 🌟 FLOATING HEX      Footer                  */
/* -------------------------------------- */
.floating-hex {
  position: absolute;
  bottom: 230px;
  left: -50px;
  transform: translateX(-50%);
  z-index: -10;
  pointer-events: none;
  user-select: none;
}

.hex-img {
  width: 16rem;
  height: 16rem;
  filter: grayscale(100%);
  animation: spin-grow 6s linear infinite;
}


/* -------------------------------------- */
/* 🌟 SPHERE WRAP   Hero Section                      */
/* -------------------------------------- */
.sphere-wrap {
  position: absolute;
  bottom: 400px;
  left: -60px;
  transform: translateX(-50%);
  z-index: -10;
  pointer-events: none;
  user-select: none;
}

.sphere-img {
  width: 20rem;
  height: 20rem;
  filter: grayscale(100%);
  animation: spin-grow 6s linear infinite;
}

/* Mobile */
@media (max-width: 400px) {
  .sphere-wrap {
    bottom: 300px;
    left: 10px;
    transform: translateX(-50%);
  }

  .sphere-img {
    width: 14rem;
    height: 14rem;
  }
}

/* -------------------------------------- */
/* 🌟 ORB WRAP Hero Section                 */
/* -------------------------------------- */
.orb-wrap {
  position: absolute;
  bottom: 100px;
  left: 30px;
  transform: translateX(-50%);
  z-index: -10;
  pointer-events: none;
  user-select: none;
}

.orb-img {
  width: 20rem;
  height: 20rem;
  filter: grayscale(100%);
  animation: spin-grow 6s linear infinite;
}

/* Mobile */
@media (max-width: 400px) {
  .orb-wrap {
    bottom: 300px;
    left: 10px;
    transform: translateX(-50%);
  }

  .orb-img {
    width: 14rem;
    height: 14rem;
  }
}

/* -------------------------------------- */
/* 🌟 BG SPHERE our service               */
/* -------------------------------------- */
.sphere-bg-wrap {
  position: absolute;
  bottom: 15px;
  right: -230px;
  z-index: -1;
  pointer-events: none;
}

.sphere-bg-img {
  width: 20rem;
  height: 20rem;
  opacity: 0.7;
  animation: spin-slow 18s linear infinite;
}

@media (max-width: 480px) {
  .sphere-bg-wrap {
    bottom: 20px;
    right: -300px;
    transform: translateX(-50%);
    z-index: -10;
  }

  .sphere-bg-img {
    width: 14rem;
    height: 14rem;
  }
}




/* -------------------------------------- */
/* 🌟 SPHERE OUR WORK      */
/* -------------------------------------- */

.sphere-our-work-wrap {
  position: absolute;
  bottom: -40px;
  left: 10px;
  transform: translateX(-50%);
  z-index: -10;
  pointer-events: none;
  user-select: none;
}

.sphere-our-work-img {
  width: 20rem;
  height: 20rem;
  filter: grayscale(100%);
  animation: spin-grow 6s linear infinite;
}

/* Mobile */
@media (max-width: 400px) {
  .sphere-our-work-wrap {
    bottom: 120px;
    left: 30px;
    transform: translateX(-50%);
  }

  .sphere-our-work-img {
    width: 14rem;
    height: 14rem;
  }
}


/* -------------------------------------- */
/* 🌟 BG SPHERE                           */
/* -------------------------------------- */
.bg-sphere-wrap {
  position: absolute;
  bottom: 350px;
  left: -240px;
  z-index: -5;
  pointer-events: none;
}

.bg-sphere-img {
  width: 20rem;
  height: 20rem;
  opacity: 0.7;
  animation: spin-slow 18s linear infinite;
}

/* Mobile */
@media (max-width: 768px) {
  .bg-sphere-wrap {
    bottom: 350px;
    left: 10px;
    transform: translateX(-50%);
  }

  .bg-sphere-img {
    width: 14rem;
    height: 14rem;
  }
}

/* -------------------------------------- */
/* 🌟 TESTIM BG SPHERE                    */
/* -------------------------------------- */
.testim-bg-sphere-wrap {
  position: absolute;
  bottom: 600px;
  left: -100px;
  z-index: -5;
  pointer-events: none;
}

.testim-bg-sphere-img {
  width: 20rem;
  height: 20rem;
  opacity: 0.7;
  animation: spin-slow 18s linear infinite;
}

/* Mobile */
@media (max-width: 768px) {
  .testim-bg-sphere-wrap {
    bottom: 1100px;
    left: 150px;
    transform: translateX(-50%);
  }

  .testim-bg-sphere-img {
    width: 14rem;
    height: 14rem;
  }
}


/* -------------------------------------- */
/* 🌟 CTA SPHERE                          */
/* -------------------------------------- */
.cta-sphere-wrapper {
  position: absolute;
  bottom: -250px;
  right: -240px;
  z-index: -10;
  pointer-events: none;
}

.cta-sphere-image {
  width: 20rem;
  height: 20rem;
  opacity: 0.85;
  animation: cta-spin 18s linear infinite;
}

/* Mobile */
@media (max-width: 768px) {
  .cta-sphere-wrapper {
    right: -10px;
    bottom: -70px;
    transform: translateX(50%);
  }

  .cta-sphere-image {
    width: 14rem;
    height: 14rem;
  }
}

/* -------------------------------------- */
/* 🌟 AWARD CTA SPHERE                    */
/* -------------------------------------- */
.award-cta-sphere-wrapper {
  position: absolute;
  bottom: -50px;
  right: -240px;
  z-index: -10;
  pointer-events: none;
}

.award-cta-sphere-image {
  width: 20rem;
  height: 20rem;
  opacity: 0.85;
  animation: cta-spin 18s linear infinite;
}

/* Mobile */
@media (max-width: 768px) {
  .award-cta-sphere-wrapper {
    right: -10px;
    bottom: 250px;
    transform: translateX(50%);
  }

  .award-cta-sphere-image {
    width: 14rem;
    height: 14rem;
  }
}


/* -------------------------------------- */
/* 🌟 RIGHT SPHERE                        */
/* -------------------------------------- */
.right-sphere-wrap {
  position: absolute;
  bottom: -700px;
  right: -250px;
  z-index: -10;
  pointer-events: none;
}

.right-sphere-img {
  width: 20rem;
  height: 20rem;
  opacity: 0.85;
  animation: rightSphereSpin 18s linear infinite;
}

/* Mobile */
@media (max-width: 768px) {
  .right-sphere-wrap {
    right: -10px;
    bottom: -200px;
    transform: translateX(50%);
  }

  .right-sphere-img {
    width: 14rem;
    height: 14rem;
  }
}


/* -------------------------------------- */
/* 🔁 ANIMATIONS                          */
/* -------------------------------------- */
@keyframes spin-grow {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}

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

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

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


/* -------------------------------------- */
/* ⭐ STAR + TEXT (Fixed + Safe)          */
/* -------------------------------------- */
.star-with-text {
  position: relative;
  display: flex;
  align-items: center;
}

.star-rotate {
  width: 20px;
  height: 20px;
  animation: spin360 12s linear infinite;
  margin-right: 3px; /* replaces broken gap:-20px */
  margin-top: -25px;
}



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






/* Footer */