/* Visual Integration Globe */
.globe-container {
    position: relative;
    width: 100%;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
}

/* Layer 1: Rotating Base */
.rotating-base {
    position: absolute;
    width: 350px;
    height: 350px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: rotateBase 60s linear infinite;
}

.base-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.8;
    filter: drop-shadow(0 0 30px rgba(0, 255, 157, 0.15));
}

/* Layer 2: Floating Logos */
.floating-logos {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.float-item {
    position: absolute;
    width: 50px;
    height: 50px;
    background: rgba(15, 15, 15, 0.8);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    transition: all 0.3s ease;
}

.float-item img,
.float-item svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 4px;
}

/* Positioning & Animation for each logo */
/* We create a "cloud" distribution */

.f1 { top: 15%; left: 20%; animation: float1 8s ease-in-out infinite; }
.f2 { top: 25%; right: 15%; animation: float2 9s ease-in-out infinite; }
.f3 { bottom: 20%; left: 15%; animation: float3 7s ease-in-out infinite; }
.f4 { bottom: 30%; right: 25%; animation: float1 10s ease-in-out infinite reverse; }
.f5 { top: 10%; right: 35%; animation: float2 11s ease-in-out infinite; }
.f6 { bottom: 15%; left: 40%; animation: float3 8s ease-in-out infinite reverse; }
.f7 { top: 45%; left: 5%; animation: float1 9s ease-in-out infinite; }
.f8 { top: 50%; right: 5%; animation: float2 12s ease-in-out infinite; }
.f9 { top: 5%; left: 50%; animation: float3 10s ease-in-out infinite; }
.f10 { top: 35%; left: 28%; animation: float1 9s ease-in-out infinite reverse; }
.f11 { top: 62%; right: 28%; animation: float2 8s ease-in-out infinite reverse; }
.f12 { bottom: 5%; left: 25%; animation: float3 11s ease-in-out infinite; }
.f13 { bottom: 8%; right: 10%; animation: float1 10s ease-in-out infinite; }
.f14 { top: 72%; left: 22%; animation: float2 9s ease-in-out infinite; }
.f15 { top: 18%; right: 48%; animation: float3 12s ease-in-out infinite reverse; }
.f16 { bottom: 42%; left: 48%; animation: float1 7s ease-in-out infinite reverse; }

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

@keyframes float1 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(15px, -15px); }
}

@keyframes float2 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-10px, 20px); }
}

@keyframes float3 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(10px, 10px); }
}