body {
     font-family: 'Inter', sans-serif;
 }

 /* Custom gradient text */
 .gradient-text {
     background: linear-gradient(135deg, #ffffff, #00d4ff);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 /* Custom hero background */
 .hero-bg {
     background: radial-gradient(ellipse at center, rgba(0, 212, 255, 0.1) 0%, transparent 70%);
 }

 /* Custom card hover effects */
 .card-hover {
     transition: all 0.3s ease;
 }

 .card-hover:hover {
     transform: translateY(-8px);
 }

 /* Custom navbar backdrop */
 .navbar-custom {
     background: rgba(10, 10, 10, 0.8);
     backdrop-filter: blur(20px);
 }

 /* Custom form styling */
 .form-control:focus-within .input {
     border-color: #00d4ff;
     box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.2);
 }

 /* Custom pricing card featured */
 .pricing-featured {
     border-color: #00d4ff;
     transform: scale(1.02);
     position: relative;
 }

 .pricing-featured::before {
     content: 'Most Popular';
     position: absolute;
     top: 1rem;
     right: -2rem;
     background: #00d4ff;
     color: #0a0a0a;
     padding: 0.25rem 2rem;
     font-size: 0.75rem;
     font-weight: 600;
     transform: rotate(45deg);
     z-index: 10;
 }

 /* Custom testimonial quote */
 .testimonial-quote::before {
     content: '"';
     position: absolute;
     top: 1rem;
     left: 1rem;
     font-size: 3rem;
     color: #00d4ff;
     opacity: 0.3;
     font-family: serif;
 }

 /* Smooth scroll behavior */
 html {
     scroll-behavior: smooth;
 }

 /* Custom loading animation */
 .loading-spinner {
     border: 3px solid rgba(255, 255, 255, 0.1);
     border-top: 3px solid #00d4ff;
     border-radius: 50%;
     width: 50px;
     height: 50px;
     animation: spin 1s linear infinite;
 }

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

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

 /* Hide loading screen */
 .loading-hidden {
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.5s ease, visibility 0.5s ease;
 }


 
/* ===========  canvas particles  =================== */
#codeParticles {
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 0;
    pointer-events: none;
}

/* Required for icon rendering */
canvas {
    font-family: "Font Awesome 6 Free", Consolas, monospace;
    font-weight: 900;
}