:root {
    --neon-blue: #00f7ff;
    --neon-purple: #a100ff;
    --neon-pink: #ff00e6;
    --dark-bg: #0a0a15;
    --glow-blue: rgba(0, 247, 255, 0.5);
    --glow-purple: rgba(161, 0, 255, 0.5);
        --neon-cyan: #00f7ff;
    --darker-bg: #050510;
  }


    @keyframes gradient {
      0% {
        background-position: 0% 50%;
      }

      50% {
        background-position: 100% 50%;
      }

      100% {
        background-position: 0% 50%;
      }
    }

    .animate-gradient {
      background-size: 200% 200%;
      animation: gradient 15s ease infinite;
    }





























/* Base Styles */
.social-icons-container {
  transition: all 0.3s ease;
  margin-top: 30px;
}

.glass-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  color: #e5e7eb;
  transition: all 0.3s ease;
}

.glass-icon:hover {
  transform: scale(1.2) translateX(8px);
  color: var(--neon-pink);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 15px var(--glow-purple);
}

.glass-icon i {
  transition: transform 0.3s ease;
}

.glass-icon:hover i {
  transform: rotate(10deg);
}

/* Animation */
@keyframes fadeRight {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-social {
  animation: fadeRight 0.6s ease-out forwards;
}

/* Responsive: Hide on Small Screens */
@media (max-width: 840px) {
  .social-icons-container {
    display: none !important;
  }
}




/* models css */
  .modal-content {
    transform: scale(0.8);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  .modal-content.show {
    transform: scale(1);
    opacity: 1;
  }

  .modal-content::-webkit-scrollbar {
    width: 3px;
  }

  .modal-content::-webkit-scrollbar-track {
    background: var(--darker-bg);
  }

  .modal-content::-webkit-scrollbar-thumb {
    background: var(--neon-cyan);
    border-radius: 4px;
  }