* {
      font-family: 'Vazirmatn', sans-serif;
    }

    html {
      scroll-behavior: smooth;
    }

    /*.gradient-bg {*/
    /*    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);*/
    /*}*/

    .gradient-bg {
      background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    }


    .card-glow {
      box-shadow: 0 0 20px rgba(59, 130, 246, 0.1);
      backdrop-filter: blur(10px);
    }

    .card-glow:hover {
      box-shadow: 0 0 30px rgba(59, 130, 246, 0.2);
      transform: translateY(-5px);
      transition: all 0.3s ease;
    }

    .progress-bar {
      background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    }

    .floating-animation {
      animation: float 6s ease-in-out infinite;
    }

    @keyframes float {

      0%,
      100% {
        transform: translateY(0px);
      }

      50% {
        transform: translateY(-20px);
      }
    }

    .pulse-glow {
      animation: pulse-glow 2s infinite;
    }

    @keyframes pulse-glow {

      0%,
      100% {
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
      }

      50% {
        box-shadow: 0 0 40px rgba(59, 130, 246, 0.6);
      }
    }






    .card-glow {
      box-shadow: 0 0 20px rgba(59, 130, 246, 0.1);
      transition: all 0.3s ease;
    }

    .card-glow:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 40px rgba(59, 130, 246, 0.2);
    }

    .progress-bar {
      background: linear-gradient(90deg, #3b82f6, #8b5cf6);
      animation: progressAnimation 2s ease-in-out;
    }

    @keyframes progressAnimation {
      from {
        width: 0%;
      }

      to {
        width: var(--progress-width);
      }
    }






      .card-glow {
      transition: all 0.3s ease;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .card-glow:hover {
      transform: translateY(-10px);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
      border-color: rgba(255, 255, 255, 0.2);
    }

    .card-glow:hover .bg-gradient-to-r {
      transform: scale(1.05);
    }

    .bg-gradient-to-r {
      transition: transform 0.3s ease;
    }








      .card-glow {
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
      transition: all 0.3s ease;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .card-glow:hover {
      box-shadow:
        0 10px 40px rgba(59, 130, 246, 0.3),
        0 0 20px rgba(147, 51, 234, 0.2);
      border-color: rgba(59, 130, 246, 0.4);
    }

    @keyframes pulse {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: 0.8;
      }
    }

    .animate-pulse {
      animation: pulse 2s infinite;
    }

    /* Glassmorphism effect */
    .bg-opacity-50 {
      backdrop-filter: blur(10px);
    }

    /* Smooth transitions for all interactive elements */
    * {
      transition: all 0.3s ease;
    }

    /* Custom hover effects for technology tags */
    .card-glow span:hover {
      transform: scale(1.05);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    /* Enhanced gradient animations */
    @keyframes gradient-shift {
      0% {
        background-position: 0% 50%;
      }

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

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

    .bg-gradient-to-r {
      background-size: 200% 200%;
      animation: gradient-shift 8s ease infinite;
    }

    /* Mobile responsiveness improvements */
    @media (max-width: 768px) {
      .grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
      }

      .text-4xl {
        font-size: 2.5rem;
      }

      .card-glow {
        margin: 0 1rem;
      }
    }