.container_sphere {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4rem;
  flex-wrap: wrap;
  padding: 2rem;
  overflow: hidden; /* Prevents scrolling */
  margin:0px;

  
}

.sphere {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: transform 0.5s ease;
  flex-direction: column; /* Aligns text below the letter */
}

.sphere::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  animation: pulse 2s infinite;
}

.sphere:hover {
  transform: scale(1.1);
}

.sphere-1 {
  background: linear-gradient(45deg, #1e6092, #288edc);
  box-shadow: 0 0 30px rgba(255, 107, 107, 0.3);
}

.sphere-2 {
  background: linear-gradient(45deg, #226da7, #2e9ef5);
  box-shadow: 0 0 30px rgba(78, 205, 196, 0.3);
}

.sphere-3 {
  background: linear-gradient(45deg, #277fc3, #35a8ff);
  box-shadow: 0 0 30px rgba(150, 230, 179, 0.3);
}

.sphere-4 {
  background: linear-gradient(45deg, #2d9ad6, #38b9fe);
  box-shadow: 0 0 30px rgba(176, 106, 179, 0.3);
}

.letter {
  font-size: 4rem;
  font-weight: bold;
  color: white;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 2;
}

.words {
  position: relative;
  text-align: center;
  color: white;
  opacity: 1;  /* Always visible */
  transform: translateY(10px); /* Slight spacing */
  transition: none; /* Remove hover effect */
}

.words p {
  font-size: 1rem;
  margin: 5px 0;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}

/* Logo Sphere */
.logo-container {
  position: relative;
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2rem;
  animation: fadeIn 1s ease-out;
  flex-direction: column;
  
}

.rotating-ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: #4568DC;
  border-bottom-color: #eb3636;
  pointer-events: none;
}

.ring1 {
  width: 100%;
  height: 100%;
  animation: rotate 4s linear infinite;
}

.ring2 {
  width: 80%;
  height: 80%;
  animation: rotate 3s linear infinite reverse;
}

.ring3 {
  width: 60%;
  height: 60%;
  animation: rotate 2s linear infinite;
}

.logo-sphere {
  position: relative;
  width: 250px;
  height: 250px;
  
  display: flex;
  justify-content: center;
  align-items: center;
  
  animation: pulse 2s infinite;
}

.logo {
  width: 80%;
  height: 80%;
  object-fit: contain;
  animation: float 3s ease-in-out infinite;
}

/* Additional text below the logo sphere */
.logo-text {
  color: white;
  font-size: 1rem;
  text-align: center;
  margin-top: 10px;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}


@keyframes rotate {
  0% {
      transform: rotate(0deg);
  }
  100% {
      transform: rotate(360deg);
  }
}

@keyframes float {
  0%, 100% {
      transform: translateY(0);
  }
  50% {
      transform: translateY(-10px);
  }
}

@keyframes fadeIn {
  from {
      opacity: 0;
      transform: scale(0.8);
  }
  to {
      opacity: 1;
      transform: scale(1);
  }
}

@keyframes pulse {
  0% {
      transform: scale(1);
      opacity: 0.6;
  }
  50% {
      transform: scale(1.05);
      opacity: 0.8;
  }
  100% {
      transform: scale(1);
      opacity: 0.6;
  }
}

@media (max-width: 1024px) {
  .container {
      gap: 3rem;
  }
  
  .sphere {
      width: 180px;
      height: 180px;
  }
  
  .letter {
      font-size: 3.5rem;
  }
  
  .logo-container {
      width: 220px;
      height: 220px;
  }
  
  .logo-sphere {
      width: 130px;
      height: 130px;
  }
}

@media (max-width: 768px) {
  .container {
      gap: 2rem;
  }
  
  .sphere {
      width: 150px;
      height: 150px;
  }
  
  .letter {
      font-size: 3rem;
  }
  
  .words {
      bottom: -50px;
  }
  
  .words p {
      font-size: 0.9rem;
  }
  
  .logo-container {
      width: 180px;
      height: 180px;
  }
  
  .logo-sphere {
      width: 110px;
      height: 110px;
  }
}

@media (max-width: 480px) {
  .container {
      gap: 1.5rem;
      flex-direction: column;
  }
  
  .sphere {
      width: 120px;
      height: 120px;
  }
  
  .letter {
      font-size: 2.5rem;
  }
  
  .words {
      bottom: -40px;
  }
  
  .words p {
      font-size: 0.8rem;
  }
  
  .logo-container {
      width: 180px;
      height: 180px;
  }
  
  .logo-sphere {
      width: 170px;
      height: 170px;
      
  }
}


  /* Animations */
  @keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 0.6;
    }
}

/* Media Queries */
@media screen and (max-width: 1024px) {
    .container { gap: 3rem; }
    .sphere {
        width: 180px;
        height: 180px;
    }
    .letter { font-size: 3.5rem; }
    .logo-container {
        width: 220px;
        height: 220px;
    }
    .logo-sphere {
        width: 130px;
        height: 130px;
    }
}

@media screen and (max-width: 768px) {
    .container { gap: 2rem; }
    .sphere {
        width: 150px;
        height: 150px;
    }
    .letter { font-size: 3rem; }
    .words { bottom: -50px; }
    .words p { font-size: 0.9rem; }
    .logo-container {
        width: 180px;
        height: 180px;
    }
    .logo-sphere {
        width: 110px;
        height: 110px;
    }
}

@media screen and (max-width: 480px) {
    .container {
        gap: 1.5rem;
        flex-direction: column;
    }
    .sphere {
        width: 120px;
        height: 120px;
    }
    .letter { font-size: 2.5rem; }
    .words { bottom: -40px; }
    .words p { font-size: 0.8rem; }
    .logo-container {
        width: 150px;
        height: 150px;
    }
    .logo-sphere {
        width: 130px;
        height: 130px;
       
    }
    .grid { display: block; }
    .box_vertical { margin: 10px 0; }
}