.star-bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
  }
  
  /* .floating-star {
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 80%;
    margin: 0 auto;
    opacity: 0.7;
    animation: floatUp 50s linear infinite;
  }
  
  @keyframes floatUp {
    0% {
      transform: translate(-50%, 100%);
      opacity: 1;
    }
    100% {
      transform: translate(-50%, -10%);
      opacity: 1;
    }
  } */

  .contact_widget {
    position: relative;
    overflow: hidden;
  }
  
  .floating-star {
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    margin: 0 auto;
    opacity: 0.7;
    animation: floatAndFall 50s linear infinite;
  }
  
  @keyframes floatAndFall {
    0% {
      transform: translate(-50%, 50%);
      opacity: 1;
    }
    80% {
      transform: translate(-50%, -80%);
      opacity: 1;
    }
    90% {
      transform: translate(-50%, 50%);
      opacity: 0.5;
    }
    100% {
      transform: translate(-50%, 50%);
      opacity: 0.5;
    }
  }
  
  
/* bg animation */

.bg_black{
  position: relative;
  overflow-x: hidden;
}
/* .bg_black::before{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%;
  max-width: 100%;
  border-radius: 50%;  
  background: url(../images/common/ellipse1.svg) 0 0 no-repeat;
  background-size: contain;  
  background-position: center;
  animation: rotate-orbit 10s linear infinite;  
}

@keyframes rotate-orbit {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
} */

.orbit-container {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  z-index: -1;
}

.ellipse {
  position: absolute;
  width: 200px;
  height: 200px; 
  border-radius: 50%;
  filter: blur(180px);
  top: 50%;
  left: 70%;
  transform-origin: -240px center;  
}

.orbit1 {
  background-color: #F16137;
  transform: rotate(120deg) translateX(190px); /* Left side */
  animation: rotateReverse 20s linear infinite;
}

.orbit2 {
  background-color: #5584E7;
  transform: rotate(0deg) translateX(190px); /* Right side */
  animation: rotateReverse 20s linear infinite;
  animation-delay: 6s;
}

.orbit3 {
  background-color: #0BBFB7;
  transform: rotate(90deg) translateX(190px); /* Bottom side */
  animation: rotateReverse 20s linear infinite;
  animation-delay: 12s;
}

@keyframes rotateReverse {
  0% {
    transform: rotate(360deg) translateX(190px);
  }
  100% {
    transform: rotate(0deg) translateX(190px);
  }
}


/* text animation */

.animated-gradient-text {
  font-weight: bold;
  background:  linear-gradient(88deg, #FFFFFF 50.81%, #CCFFFB 76.83%, #F5BFAF 89.06%);
  /* background: linear-gradient(93.08deg, #FFFFFF 50.81%, #CCFFFB 86.83%, #F5BFAF 97.06%); */
  background-size: 100% auto;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent; 
  /* animation: shine 12s linear infinite; */
}

@keyframes shine {
  0% {
    background-position: 200% center;
  }
  100% {
    background-position: 0% center;
  }
}


/* diagram animation */
.diagram{ position: relative;}
.ballSqr{
  /* width: 100%;
  height: 100%;
  top: 32%;
  left: 15%; */
  position: absolute;
  top: 263px;
  left: 220px;
}
.ball {
  width: 10px;
  height: 10px;
  border-radius: 30px;
  background-color: green;
  position: relative;
  animation-name: diagram;
  animation-duration: 40s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes diagram {
  0%   { left: 0; top: 0; }
  3%  { left: 100px; top: 0; }
  6%  { left: 150px; top: 21px; }
  9%  { left: 240px; top: 04px; }
  12%  { left: 320px; top: 21px; }
  15%  { left: 400px; top: 04px; }
  18%  { left: 460px; top: 21px; }
  21%  { left: 540px; top: 04px; }
  24%  { left: 620px; top: 21px; }    /* project summary down  */
  27%  { left: 690px; top: 04px; }
  30%  { left: 750px; top: 21px; }
  33%  { left: 850px; top: 04px; }
  36%  { left: 900px; top: 10px; }
  39%  { left: 910px; top: 10px; }
  42%  { left: 930px; top: 14px; }
  45%  { left: 940px; top: 20px; } 
  48%  { left: 950px; top: 50px; }
  51% { left: 950px; top: 424px; } 
  54% { left: 940px; top: 439px; } 
  57% { left: 930px; top: 445px; } 
  60% { left: 910px; top: 452px; } 
  63% { left: 900px; top: 452px; } 
  66% { left: 850px; top: 435px; } 
  68% { left: 820px; top: 430px; } 
  70% { left: 750px; top: 450px; } 
   73% { left: 690px; top: 430px; } 
   76% { left: 620px; top: 450px; } 
   79% { left: 540px; top: 430px; } 
   81% { left: 460px; top: 450px; } 
   84% { left: 400px; top: 430px; } 
   87% { left: 320px; top: 450px; } 
   90% { left: 240px; top: 430px; } 
   92% { left: 150px; top: 448px; } 
   94% { left: 100px; top: 422px; } 
   100% { left: 0px; top: 422px; } 
 
}