.orbit-wrapper {
      height: 300vh;
      position: relative;
    }
    
    .orbit-sticky {
      position: sticky;
      top: 0;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: space-between;
      direction: rtl;
      padding: 0 8%;
    }
    
    .orbit-content {
      width: 40%;
    }
    
    .orbit-content h2 {
      font-size: 32px;
      color: #817900;
      margin-bottom: 20px;
      transition: 0.4s ease;
    }
    
    .orbit-content p {
      font-size: 16px;
      color: #1f2d2d;
      line-height: 1.8;
      transition: 0.4s ease;
    }
    
    .orbit-container {
      width: 420px;
      height: 420px;
      position: relative;
    }
    
    .center-core {
      width: 150px;
      height: 150px;
      background: radial-gradient(circle, #32D1C3, #368F8B);
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      box-shadow: 0 0 40px rgba(50,209,195,0.5);
    }
    
    .orbit-ring {
      width: 100%;
      height: 100%;
      border: 2px dashed #368F8B;
      border-radius: 50%;
      position: absolute;
    }
    
    .orbit-item {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
  
    color: #2b7a77;
  
    background:
      linear-gradient(
        160deg,
        rgba(255,255,255,0.75) 0%,
        rgba(255,255,255,0.25) 60%,
        rgba(255,255,255,0.15) 100%
      );
  
    backdrop-filter: blur(28px) saturate(200%);
    -webkit-backdrop-filter: blur(28px) saturate(200%);
  
    border: 1px solid rgba(255,255,255,0.8);
  
    box-shadow:
      0 25px 60px rgba(0,0,0,0.15),
      inset 0 2px 3px rgba(255,255,255,0.95),
      inset 0 -8px 20px rgba(255,255,255,0.25);
  
    transition: all .45s cubic-bezier(.22,1,.36,1);
    overflow: hidden;
  }
  
  .orbit-item::before {
    content:"";
    position:absolute;
    top:-40%;
    left:-30%;
    width:160%;
    height:140%;
    border-radius:50%;
  
    background: linear-gradient(
      120deg,
      rgba(255,255,255,0.9) 0%,
      rgba(255,255,255,0.2) 40%,
      transparent 60%
    );
  
    transform: rotate(25deg);
    opacity:.7;
    transition: all .6s ease;
  }
  .orbit-item {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
  
    color: #2a7f7c;
  
    background:
      linear-gradient(
        160deg,
        rgba(255,255,255,0.85) 0%,
        rgba(255,255,255,0.35) 40%,
        rgba(255,255,255,0.15) 100%
      );
  
    backdrop-filter: blur(35px) saturate(220%);
    -webkit-backdrop-filter: blur(35px) saturate(220%);
  
    border: 1px solid rgba(255,255,255,0.9);
  
    box-shadow:
      0 35px 80px rgba(0,0,0,0.18),
      inset 0 3px 4px rgba(255,255,255,1),
      inset 0 -10px 25px rgba(255,255,255,0.3);
  
    transition: all .5s cubic-bezier(.16,1,.3,1);
    overflow: hidden;
  }
  
  .orbit-item.active {
    transform: scale(1.28);
    color:white;
  
    background:
      linear-gradient(
        135deg,
        #32D1C3,
        #368F8B
      );
  
    backdrop-filter: blur(30px) saturate(220%);
    -webkit-backdrop-filter: blur(30px) saturate(220%);
  
    border:1px solid rgba(255,255,255,0.9);
  
    box-shadow:
      0 0 60px rgba(50,209,195,0.7),
      0 40px 90px rgba(50,209,195,0.5);
  }
  .orbit-item:hover {
    transform: scale(1.18) translateY(-6px);
  
    box-shadow:
      0 35px 80px rgba(0,0,0,0.25),
      0 0 35px rgba(50,209,195,0.4),
      inset 0 2px 3px rgba(255,255,255,1);
  }
  
  .orbit-item::before {
    content:"";
    position:absolute;
    top:-60%;
    left:-40%;
    width:180%;
    height:180%;
    border-radius:50%;
  
    background: linear-gradient(
      120deg,
      rgba(255,255,255,0.95) 0%,
      rgba(255,255,255,0.2) 40%,
      transparent 60%
    );
  
    transform: rotate(25deg);
    opacity:.8;
    transition: all .8s ease;
  }
  
  .orbit-item:hover::after {
    opacity:1;
  }
  /* =========================
   RESPONSIVE MOBILE
========================= */

@media (max-width: 980px) {

.orbit-wrapper{
  height: auto;
  min-height: 180vh;
}

.orbit-sticky{
  position: relative;
  height: auto;
  flex-direction: column-reverse;
  justify-content: center;
  gap: 70px;
  padding: 80px 25px;
  overflow: hidden;
}

.orbit-content{
  width: 100%;
  text-align: center;
}

.orbit-content h2{
  font-size: 30px;
  line-height: 1.5;
  margin-bottom: 18px;
}

.orbit-content p{
  font-size: 15px;
  line-height: 2;
  max-width: 95%;
  margin: auto;
}

.orbit-container{
  width: 320px;
  height: 320px;
  transform: scale(.92);
}

.center-core{
  width: 110px;
  height: 110px;
}

.orbit-item{
  width: 58px !important;
  height: 58px !important;
  font-size: 20px !important;
}

.orbit-item.active{
  transform: scale(1.15);
}

}


/* =========================
 SMALL MOBILE
========================= */

@media (max-width: 520px){

.orbit-wrapper{
  min-height: 150vh;
}

.orbit-sticky{
  padding: 60px 18px;
  gap: 50px;
}

.orbit-container{
  width: 260px;
  height: 260px;
  transform: scale(.95);
}

.orbit-content h2{
  font-size: 24px;
}

.orbit-content p{
  font-size: 14px;
  line-height: 2.1;
}

.center-core{
  width: 85px;
  height: 85px;
}

.orbit-item{
  width: 48px !important;
  height: 48px !important;
  font-size: 16px !important;
}

.orbit-item.active{
  transform: scale(1.08);
}

}


/* =========================
 ULTRA SMALL DEVICES
========================= */

@media (max-width: 380px){

.orbit-container{
  width: 220px;
  height: 220px;
}

.orbit-item{
  width: 42px !important;
  height: 42px !important;
  font-size: 14px !important;
}

.orbit-content h2{
  font-size: 20px;
}

}