@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
         html {
         scroll-behavior: smooth;
         }
         body {
         background-color: #0e1625;
         color: #e8e8fc;
         }
         .gradient-text {
         background: linear-gradient(90deg, #45edf2, #49299a);
         -webkit-background-clip: text;
         background-clip: text;
         color: transparent;
         }
         .card {
         background: rgba(14, 22, 37, 0.8);
         border: 1px solid rgba(73, 41, 154, 0.3);
         backdrop-filter: blur(10px);
         transition: all 0.3s ease;
         }
         .card:hover {
         border-color: #45edf2;
         transform: translateY(-5px);
         box-shadow: 0 10px 20px rgba(69, 237, 242, 0.2);
         }
         .skill-pill {
         background: rgba(73, 41, 154, 0.3);
         border: 1px solid rgba(73, 41, 154, 0.6);
         transition: all 0.3s ease;
         }
         .skill-pill:hover {
         background: rgba(73, 41, 154, 0.6);
         border-color: #45edf2;
         }
         .timeline-item::before {
         content: '';
         position: absolute;
         left: 0;
         top: 0;
         height: 100%;
         width: 2px;
         background: linear-gradient(to bottom, #49299a, #45edf2);
         }
         .timeline-dot {
         position: absolute;
         left: -9px;
         top: 0;
         width: 20px;
         height: 20px;
         border-radius: 50%;
         background: #0e1625;
         border: 2px solid #45edf2;
         }
         .nav-link {
         position: relative;
         }
         .nav-link::after {
         content: '';
         position: absolute;
         width: 0;
         height: 2px;
         bottom: -2px;
         left: 0;
         background: linear-gradient(90deg, #45edf2, #49299a);
         transition: width 0.3s ease;
         }
         .nav-link:hover::after {
         width: 100%;
         }
         .active::after {
         width: 100%;
         }
         .typing-effect {
         border-right: 2px solid #45edf2;
         white-space: nowrap;
         overflow: hidden;
         animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
         }
         @keyframes typing {
         from { width: 0 }
         to { width: 100% }
         }
         @keyframes blink-caret {
         from, to { border-color: transparent }
         50% { border-color: #45edf2 }
         }
         .animate-float {
         animation: float 6s ease-in-out infinite;
         }
         @keyframes float {
         0% { transform: translateY(0px); }
         50% { transform: translateY(-20px); }
         100% { transform: translateY(0px); }
         }
         .progress-bar {
         height: 8px;
         background: rgba(73, 41, 154, 0.3);
         border-radius: 4px;
         overflow: hidden;
         }
         .progress-fill {
         height: 100%;
         background: linear-gradient(90deg, #45edf2, #49299a);
         border-radius: 4px;
         }
         .cert-badge {
         position: relative;
         background: linear-gradient(145deg, #0e1625, #1a2a4a);
         border: 1px solid rgba(73, 41, 154, 0.6);
         }
         .cert-badge::before {
         content: '';
         position: absolute;
         top: -2px;
         left: -2px;
         right: -2px;
         bottom: -2px;
         background: linear-gradient(45deg, #45edf2, #49299a, #45edf2);
         z-index: -1;
         border-radius: 0.5rem;
         opacity: 0;
         transition: opacity 0.3s ease;
         }
         .cert-badge:hover::before {
         opacity: 1;
         }
         .project-card {
         overflow: hidden;
         cursor: pointer;
         transition: all 0.3s ease;
         }
         .project-card img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         display: block;
         transition: transform 0.3s ease;
         }
         .project-card:hover img {
         transform: scale(1.05);
         }
         .project-card::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: linear-gradient(to bottom, transparent 50%, rgba(14, 22, 37, 0.95) 100%);
         z-index: 1;
         }
         .project-content {
         position: relative;
         z-index: 2;
         }
         .project-details {
         max-height: 0;
         overflow: hidden;
         transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
         opacity: 0;
         }
         .project-card.expanded .project-details {
         max-height: 300px;
         opacity: 1;
         }
         .project-toggle-icon {
         transition: transform 0.3s ease;
         }
         .project-card.expanded .project-toggle-icon {
         transform: rotate(180deg);
         }
         /* Mobile menu */
         .mobile-menu {
         transform: translateX(-100%);
         transition: transform 0.3s ease-in-out;
         }
         .mobile-menu.open {
         transform: translateX(0);
         }
         /* Remove conflicting CSS rules */
         .project-content ul {
         margin-left: 0;
         list-style-type: none;
         }
         .tool-box {
         display: flex;
         flex-direction: column;
         align-items: center;
         padding: 1rem;
         background-color: rgba(15, 23, 42, 0.5); /* darkblue/50 */
         border-radius: 0.75rem;
         border: 1px solid rgba(168, 85, 247, 0.2); /* purple/20 */
         color: rgba(203, 213, 225, 0.9); /* lightgray/90 */
         text-align: center;
         transition: transform 0.2s ease, box-shadow 0.2s ease;
         }
         .tool-box i {
         color: #14b8a6; /* teal */
         font-size: 1.875rem; /* 3xl */
         margin-bottom: 0.5rem;
         }
         .tool-box:hover {
         transform: translateY(-4px);
         box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
         }
.nav-link.active {
  color: #45edf2; /* Teal highlight */
  font-weight: bold;
}