:root {
   --bg-base-color: #f1f1f1;
   --white: #ffffff;
   --black: #000000;
   --icon-size: 8rem;
   --circle-gap: 2rem;
   --bgColor: #ff3368;
   --shadow-color: rgba(255, 0, 0, 0.5);
 }
 
 ul { list-style: none; }
 
 .main-wrapper {
   width: 100%;
   height: 100vh;
   display: grid;
   place-items: center;
   position: relative;
 }
 
 .orbit-container {
   position: relative;
   width: 80%;
   aspect-ratio: 1 / 1;
   display: grid;
   place-items: center;
 }

 @media (min-width: 768px) {
   .orbit-container {
      height: 100vh;
    }
 }
 
 
 .orbit-icon-container {
   position: absolute;
   width: calc(var(--icon-size) + 28vw);
   aspect-ratio: 1 / 1;
   display: grid;
   place-items: center;
   border-radius: 50%;
   height: 58vh;
 }

 .orbit-icon-container div{
  animation: textFadeIn 1.2s ease-out forwards; 
 }


 .orbit-icon {
   background-color: var(--cclec_green);
   color: #fff;
   border-radius: var(--icon-size);
   text-align: center;
   width: clamp(5vw, 10vw, 150px);
   aspect-ratio: 1 / 1;
   position: absolute;
   display: grid;
   place-items: center;
   box-shadow: 0 0 100px var(--cclec_green);
   font-size: clamp(0.5vw, 1.1vw, 18px);
   font-weight: 450;
 }
 
 .orbit-icon i{
    font-size: 2vw;
    padding-bottom: 5px;
 }
 
 
 /* UP DOWN ANIMATION */
    .up_down_1_4_6{
       animation-name: up_down_1_4_6_animation;
       animation-duration: 4s;
       animation-iteration-count: infinite;
       animation-timing-function: ease;
       transition: all .3s;
    }
 
    @keyframes up_down_1_4_6_animation{
       0%{
          transform: translateY(9px);
       }
 
       50%{
          transform: translateY(-15px);
       }
 
       100% {
          transform: translateY(10px);
       }
    }
 
    .up_down_2_5_7{
       animation-name: up_down_2_5_7_animation;
       animation-duration: 5s;
       animation-iteration-count: infinite;
       animation-timing-function: ease;
       transition: all .3s;
    }
 
    @keyframes up_down_2_5_7_animation{
       0%{
          transform: translateY(-9px);
       }
 
       50%{
          transform: translateY(15px);
       }
 
       100% {
          transform: translateY(-10px);
       }
    }
 
    .up_down_3_8{
       animation-name: up_down_3_8_animation;
       animation-duration: 3s;
       animation-iteration-count: infinite;
       animation-timing-function: ease;
       transition: all .3s;
    }
 
    @keyframes up_down_3_8_animation{
       0%{
          transform: translateY(-9px);
       }
 
       50%{
          transform: translateY(15px);
       }
 
       100% {
          transform: translateY(-10px);
       }
    }
    
 
 
 
 
 .orbit-icon:nth-child(1) { right: -17vw; }
 .orbit-icon:nth-child(2) { right: -5vw; bottom: -3vw; }
 .orbit-icon:nth-child(3) { bottom: -3vw; }
 .orbit-icon:nth-child(4) { left:-5vw; bottom: -3vw;}
 .orbit-icon:nth-child(5) { left: -17vw; }
 .orbit-icon:nth-child(6) { left: -5vw; top:-3vw; }
 .orbit-icon:nth-child(7) { top: -3vw; }
 .orbit-icon:nth-child(8) { right: -5vw; top: -3vw; }
 
 
 
 .orbit-icon > div {
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
 }