.interactive-container{position:relative;width:400px;height:400px;display:flex;justify-content:center;align-items:center;transform-style:preserve-3d;perspective:1000px}.central-orb{width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,#c7a94a,#1a1a1a);display:flex;justify-content:center;align-items:center;color:#fff;font-weight:700;font-size:24px;letter-spacing:2px;box-shadow:0 0 30px #c7a94a,0 0 60px #c7a94a;transition:transform .5s ease}.central-text{text-shadow:0 0 10px white}.interactive-container:hover .central-orb{transform:scale(1.1)}.icons-orbit{position:absolute;width:100%;height:100%;transform-style:preserve-3d;animation:rotate-orbit 30s linear infinite}@keyframes rotate-orbit{0%{transform:rotateY(0) rotateX(10deg)}to{transform:rotateY(360deg) rotateX(10deg)}}.orbiting-icon-container{position:absolute;top:50%;left:50%;width:60px;height:60px;margin-left:-30px;margin-top:-30px;transform-style:preserve-3d}.orbiting-icon{width:100%;height:100%;border-radius:50%;display:flex;justify-content:center;align-items:center;color:var(--icon-color, #c7a94a);transition:all .3s ease-in-out;animation:inherit;animation-direction:reverse;transform:rotateY(-360deg) rotateX(-10deg);background:radial-gradient(circle at 30% 30%,var(--icon-color),#000);box-shadow:0 0 15px var(--icon-color),inset 0 0 10px #00000080;border:1px solid rgba(255,255,255,.2)}.orbiting-icon-container:hover .orbiting-icon{transform:scale(1.2);background-color:var(--icon-color, #c7a94a);color:#1a1a1a}.icon-label{position:absolute;bottom:-25px;font-size:12px;color:#fff;opacity:0;transition:opacity .3s ease,transform .3s ease;transform:translateY(10px)}.orbiting-icon-container:hover .icon-label{opacity:1;transform:translateY(0)}.icon-0{transform:rotateY(0) translateZ(200px)}.icon-1{transform:rotateY(60deg) translateZ(200px)}.icon-2{transform:rotateY(120deg) translateZ(200px)}.icon-3{transform:rotateY(180deg) translateZ(200px)}.icon-4{transform:rotateY(240deg) translateZ(200px)}.icon-5{transform:rotateY(300deg) translateZ(200px)}@media(max-width:768px){.interactive-container{width:300px;height:300px}.icon-0{transform:rotateY(0) translateZ(150px)}.icon-1{transform:rotateY(60deg) translateZ(150px)}.icon-2{transform:rotateY(120deg) translateZ(150px)}.icon-3{transform:rotateY(180deg) translateZ(150px)}.icon-4{transform:rotateY(240deg) translateZ(150px)}.icon-5{transform:rotateY(300deg) translateZ(150px)}}.animate-float{animation:float 3.5s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}