:root {
     --bg-color: #050505;
     --text-color: #ffffff;
     --accent-color: #00E5FF;
     --accent-purple: #9C27B0;
     --accent-blue: #2979FF;
     --card-bg: rgba(15, 15, 20, 0.7);
     --card-border: rgba(80, 80, 100, 0.2);
     --section-spacing: 120px;
     --transition-slow: 0.5s cubic-bezier(0.19, 1, 0.22, 1);
     --transition-fast: 0.3s cubic-bezier(0.19, 1, 0.22, 1);
     --font-main: 'Space Grotesk', sans-serif;
 }
 
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }
 
 html {
     scroll-behavior: smooth;
 }
 
 body {
     font-family: var(--font-main);
     background-color: var(--bg-color);
     color: var(--text-color);
     line-height: 1.6;
     overflow-x: hidden;
     min-height: 100vh;
 }
 
 /* Canvas Setup */
 #particle-universe {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 0;
 }
 
 /* Main Content Container */
 .content {
     position: relative;
     z-index: 1;
     padding: 40px 5%;
     max-width: 1400px;
     margin: 0 auto;
 }
 
 /* Typography */
 h1, h2, h3, h4, h5, h6 {
     font-weight: 700;
     line-height: 1.2;
 }
 
 p {
     margin-bottom: 1rem;
 }
 
 a {
     color: var(--accent-color);
     text-decoration: none;
     transition: all var(--transition-fast);
 }
 
 a:hover {
     color: #fff;
 }
 
 /* Header Styles */
 .header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 20px 0;
     margin-bottom: 80px;
 }
 
 .logo {
     font-size: 3rem;
     color: var(--accent-color);
     letter-spacing: 2px;
     margin: 0;
 }
 
 .tagline {
     margin-top: 5px;
     font-size: 1rem;
     opacity: 0.8;
 }
 
 .navigation ul {
     display: flex;
     list-style: none;
     gap: 30px;
 }
 
 .nav-link {
     font-size: 1.1rem;
     font-weight: 500;
     padding: 8px 0;
     position: relative;
 }
 
 .nav-link::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 2px;
     background-color: var(--accent-color);
     transform: scaleX(0);
     transform-origin: right;
     transition: transform var(--transition-fast);
 }
 
 .nav-link:hover::after {
     transform: scaleX(1);
     transform-origin: left;
 }
 
 /* Section Styles */
 .section {
     margin-bottom: var(--section-spacing);
     min-height: 50vh;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }
 
 .section-title {
     font-size: 2.5rem;
     margin-bottom: 20px;
     color: var(--accent-color);
     position: relative;
 }
 
 .section-title::after {
     content: '';
     position: absolute;
     bottom: -10px;
     left: 0;
     width: 60px;
     height: 3px;
     background-color: var(--accent-color);
 }
 
 .section-subtitle {
     font-size: 1.2rem;
     margin-bottom: 40px;
     opacity: 0.8;
 }
 
 /* About Section */
 .about-content {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 40px;
 }
 
 .about-text {
     font-size: 1.1rem;
 }
 
 .skills-container h3 {
     margin-bottom: 20px;
     font-size: 1.5rem;
 }
 
 .skills-clusters {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 30px;
 }
 
 .skill-cluster h4 {
     color: var(--accent-color);
     margin-bottom: 15px;
     font-size: 1.2rem;
 }
 
 .skills-list {
     list-style: none;
 }
 
 .skills-list li {
     margin-bottom: 10px;
     position: relative;
     padding-left: 20px;
 }
 
 .skills-list li::before {
     content: '>';
     position: absolute;
     left: 0;
     color: var(--accent-color);
 }
 
 /* Contact Section */
 .contact-methods {
     display: flex;
     gap: 30px;
     margin-top: 30px;
 }
 
 .contact-link {
     display: flex;
     align-items: center;
     padding: 15px 25px;
     background-color: var(--card-bg);
     border-radius: 8px;
     border: 1px solid var(--card-border);
     transition: all var(--transition-fast);
 }
 
 .contact-link:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
     border-color: var(--accent-color);
 }
 
 .contact-icon {
     margin-right: 15px;
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
 .contact-icon svg {
     width: 24px;
     height: 24px;
     fill: var(--accent-color);
 }
 
 .contact-text {
     font-weight: 500;
 }
 
 /* Footer */
 .footer {
     text-align: center;
     padding: 40px 0;
     opacity: 0.7;
     font-size: 0.9rem;
 }
 
 .footer-note {
     margin-top: 10px;
     font-size: 0.8rem;
 }
 
 /* Modal Styles */
 .project-modal {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.9);
     z-index: 100;
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
     visibility: hidden;
     transition: all var(--transition-slow);
 }
 
 .project-modal.active {
     opacity: 1;
     visibility: visible;
 }
 
 .modal-content {
     width: 90%;
     max-width: 1000px;
     max-height: 90vh;
     background-color: var(--card-bg);
     border-radius: 12px;
     overflow: hidden;
     position: relative;
     transform: scale(0.9);
     transition: transform var(--transition-slow);
     border: 1px solid var(--card-border);
     backdrop-filter: blur(10px);
 }
 
 .project-modal.active .modal-content {
     transform: scale(1);
 }
 
 .modal-close {
     position: absolute;
     top: 20px;
     right: 20px;
     background: none;
     border: none;
     color: white;
     font-size: 2rem;
     cursor: pointer;
     z-index: 10;
     transition: color var(--transition-fast);
 }
 
 .modal-close:hover {
     color: var(--accent-color);
 }
 
 .modal-body {
     padding: 40px;
     overflow-y: auto;
     max-height: 90vh;
 }
 
 /* Utility Classes */
 .hidden {
     display: none;
 }
 
 .blur-in {
     animation: blurIn 1s forwards;
 }
 
 .fade-in {
     animation: fadeIn 1s forwards;
 }
 
 .slide-up {
     animation: slideUp 1s forwards;
 }
 
/* Add this to css/main.css in the Utility Classes section */
.hide-cursor {
    cursor: none !important;
}

 @keyframes blurIn {
     0% {
         opacity: 0;
         filter: blur(10px);
     }
     100% {
         opacity: 1;
         filter: blur(0);
     }
 }
 
 @keyframes fadeIn {
     0% {
         opacity: 0;
     }
     100% {
         opacity: 1;
     }
 }
 
 @keyframes slideUp {
     0% {
         opacity: 0;
         transform: translateY(30px);
     }
     100% {
         opacity: 1;
         transform: translateY(0);
     }
 }