@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

 :root {
     scroll-behavior: smooth;
 }

 body {
     font-family: 'Plus Jakarta Sans', sans-serif;
     transition: background-color 0.5s ease;
     cursor: none;
 }

 #cursor {
     width: 20px;
     height: 20px;
     background: rgba(0, 0, 0, 0.5);
     border-radius: 50%;
     position: fixed;
     pointer-events: none;
     z-index: 9999;
     transition: transform 0.1s ease, background 0.3s ease;
 }

 .glass {
     background: rgba(255, 255, 255, 0.03);
     backdrop-filter: blur(12px);
     border: 1px solid rgba(255, 255, 255, 0.08);
 }

 .project-card {
     position: relative;
     border-radius: 20px;
     overflow: hidden;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }

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

 .mesh-gradient {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: radial-gradient(at 0% 0%, rgba(14, 165, 233, 0.15) 0px, transparent 50%),
         radial-gradient(at 100% 100%, rgba(79, 70, 229, 0.1) 0px, transparent 50%);
     z-index: -1;
 }

 @keyframes float {

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

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

 .nav-blur {
     backdrop-filter: blur(20px) saturate(180%);
     background-color: rgba(255, 255, 255, 0.7);
 }

 input:focus~label,
 input:not(:placeholder-shown)~label,
 textarea:focus~label,
 textarea:not(:placeholder-shown)~label {
     transform: translateY(-1.5rem) scale(0.85);
     color: #0ea5e9;
 }

 @media (max-width: 768px) {
     #cursor {
         display: none;
     }

     body {
         cursor: auto;
     }
 }


 .typing-text {
     width: 0;
     overflow: hidden;
     white-space: nowrap;
     border-right: 3px solid white;
     animation:
         typing 3s steps(12) infinite alternate,
         blink 0.8s infinite;
 }

 @keyframes typing {
     from {
         width: 0;
     }

     to {
         width: 7ch;
     }
 }

 @keyframes blink {
     50% {
         border-color: transparent;
     }
 }

 .mesh-gradient {
     display: none !important;
 }