/* ========================================  
   CSS Variables & Root Styles  
======================================== */  
:root {  
    /* Colors - Modern Light Grey Theme */  
    --bg-primary: #f5f5f7;  
    --bg-secondary: #eeeef0;  
    --bg-tertiary: #e2e2e7;  
    --bg-card: #ffffff;  
  
    --text-primary: #1d1d1f;  
    --text-secondary: #515154;  
    --text-muted: #86868b;  
  
    /* Healthcare-inspired accent colors */  
    --accent-primary: #0071e3;  
    --accent-secondary: #00a67d;  
    --accent-tertiary: #6c3aed;  
    --accent-gradient: linear-gradient(135deg, #0071e3 0%, #00a67d 100%);  
    --accent-gradient-alt: linear-gradient(135deg, #6c3aed 0%, #0071e3 100%);  
  
    --success: #00a854;  
    --warning: #f5a623;  
    --error: #e5384f;  
  
    /* Typography */  
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;  
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;  
  
    /* Spacing */  
    --section-padding: 100px 0;  
    --container-width: 1200px;  
  
    /* Transitions */  
    --transition-fast: 0.2s ease;  
    --transition-medium: 0.3s ease;  
    --transition-slow: 0.5s ease;  
  
    /* Shadows */  
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);  
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);  
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.05);  
    --shadow-glow: 0 4px 20px rgba(0, 113, 227, 0.15);  
    --shadow-glow-green: 0 4px 20px rgba(0, 166, 125, 0.15);  
  
    /* Border Radius */  
    --radius-sm: 6px;  
    --radius-md: 12px;  
    --radius-lg: 20px;  
    --radius-xl: 30px;  
    --radius-full: 50%;  
  
    /* Nav background for theme transitions */  
    --nav-bg: rgba(245, 245, 247, 0.85);  
    --nav-border: rgba(0, 0, 0, 0.06);  
}  
  
/* ========================================  
   Dark Theme  
======================================== */  
[data-theme="dark"] {  
    --bg-primary: #0a0a0f;  
    --bg-secondary: #0f0f16;  
    --bg-tertiary: #1a1a2e;  
    --bg-card: #12121e;  
  
    --text-primary: #f5f5f7;  
    --text-secondary: #b8b8c8;  
    --text-muted: #6b6b80;  
  
    --accent-primary: #00b4d8;  
    --accent-secondary: #00d4aa;  
    --accent-tertiary: #7c3aed;  
    --accent-gradient: linear-gradient(135deg, #00b4d8 0%, #00d4aa 100%);  
    --accent-gradient-alt: linear-gradient(135deg, #7c3aed 0%, #00b4d8 100%);  
  
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.3);  
    --shadow-md: 0 5px 20px rgba(0, 0, 0, 0.4);  
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);  
    --shadow-glow: 0 4px 30px rgba(0, 180, 216, 0.25);  
    --shadow-glow-green: 0 4px 30px rgba(0, 212, 170, 0.25);  
  
    --nav-bg: rgba(10, 10, 15, 0.9);  
    --nav-border: rgba(255, 255, 255, 0.06);  
}  
  
/* ========================================  
   Reset & Base Styles  
======================================== */  
*,  
*::before,  
*::after {  
    margin: 0;  
    padding: 0;  
    box-sizing: border-box;  
}  
  
html {  
    scroll-behavior: smooth;  
    scroll-padding-top: 80px;  
}  
  
body {  
    font-family: var(--font-primary);  
    background-color: var(--bg-primary);  
    color: var(--text-primary);  
    line-height: 1.6;  
    overflow-x: hidden;  
    -webkit-font-smoothing: antialiased;  
    -moz-osx-font-smoothing: grayscale;  
    font-optical-sizing: auto;  
    letter-spacing: -0.011em;  
}  
  
a {  
    text-decoration: none;  
    color: inherit;  
    transition: var(--transition-fast);  
}  
  
ul {  
    list-style: none;  
}  
  
img {  
    max-width: 100%;  
    height: auto;  
    display: block;  
}  
  
button {  
    font-family: inherit;  
    cursor: pointer;  
    border: none;  
    outline: none;  
}  
  
/* ========================================  
   Utility Classes  
======================================== */  
.container {  
    max-width: var(--container-width);  
    margin: 0 auto;  
    padding: 0 20px;  
}  
  
.section {  
    padding: var(--section-padding);  
    min-height: 100vh;  
    display: flex;  
    flex-direction: column;  
    justify-content: center;  
}  
  
.section > .container {  
    position: relative;  
    z-index: 1;  
}  
  
.section-title {  
    font-size: 2.5rem;  
    font-weight: 700;  
    margin-bottom: 20px;  
    position: relative;  
    display: inline-block;  
    letter-spacing: -0.02em;  
}  
  
.section-title .section-number {  
    color: var(--accent-primary);  
    font-family: var(--font-mono);  
    font-size: 1.2rem;  
    margin-right: 10px;  
}  
  
.section-title::after {  
    content: '';  
    position: absolute;  
    bottom: -15px;  
    left: 50%;  
    transform: translateX(-50%);  
    width: 80px;  
    height: 4px;  
    background: var(--accent-gradient);  
    border-radius: var(--radius-sm);  
}  
  
.section-subtitle {  
    color: var(--text-secondary);  
    font-size: 1.1rem;  
    margin-top: 30px;  
}  
  
.highlight {  
    color: var(--accent-primary);  
}  
  
.highlight-metric {  
    color: var(--accent-secondary);  
    font-weight: 600;  
}  
  
/* ========================================  
   Buttons  
======================================== */  
.btn {  
    display: inline-flex;  
    align-items: center;  
    gap: 10px;  
    padding: 14px 32px;  
    font-size: 1rem;  
    font-weight: 500;  
    border-radius: var(--radius-md);  
    transition: var(--transition-medium);  
    position: relative;  
    overflow: hidden;  
}  
  
.btn-primary {  
    background: var(--accent-gradient);  
    color: #ffffff;  
    box-shadow: var(--shadow-glow);  
}  
  
.btn-primary:hover {  
    transform: translateY(-3px);  
    box-shadow: 0 8px 30px rgba(0, 113, 227, 0.3);  
}  
  
.btn-secondary {  
    background: transparent;  
    color: var(--accent-primary);  
    border: 2px solid var(--accent-primary);  
}  
  
.btn-secondary:hover {  
    background: var(--accent-primary);  
    color: #ffffff;  
    transform: translateY(-3px);  
}  
  
/* ========================================  
   Navigation  
======================================== */  
nav {  
    position: fixed;  
    top: 0;  
    left: 0;  
    right: 0;  
    z-index: 1000;  
    padding: 15px 0;  
    transition: var(--transition-medium);  
    background: var(--nav-bg);  
    backdrop-filter: saturate(180%) blur(20px);  
    -webkit-backdrop-filter: saturate(180%) blur(20px);  
    border-bottom: 1px solid var(--nav-border);  
}  
  
.nav-container {  
    display: flex;  
    align-items: center;  
    justify-content: space-between;  
}  
  
nav .brand {  
    font-size: 2rem;  
    font-weight: 700;  
    background: var(--accent-gradient);  
    -webkit-background-clip: text;  
    -webkit-text-fill-color: transparent;  
    background-clip: text;  
}  
  
nav .tablist {  
    display: flex;  
    gap: 5px;  
    flex-wrap: wrap;  
}  
  
nav .tablist button[role="tab"] {  
    display: flex;  
    align-items: center;  
    gap: 8px;  
    padding: 10px 16px;  
    font-size: 0.9rem;  
    font-weight: 500;  
    color: var(--text-secondary);  
    border-radius: var(--radius-md);  
    transition: var(--transition-fast);  
    background: transparent;  
    border: 1px solid transparent;  
}  
  
nav .tablist button[role="tab"]:hover,  
nav .tablist button[role="tab"][aria-selected="true"] {  
    color: var(--accent-primary);  
    background: var(--bg-tertiary);  
    border-color: var(--bg-tertiary);  
}  
  
.mobile-menu-btn {  
    display: none;  
    background: transparent;  
    color: var(--text-primary);  
    font-size: 1.5rem;  
    padding: 10px;  
}  
  
/* Theme Toggle Button */  
.theme-toggle {  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    width: 42px;  
    height: 42px;  
    border-radius: var(--radius-md);  
    background: var(--bg-tertiary);  
    border: 1px solid transparent;  
    cursor: pointer;  
    transition: var(--transition-medium);  
    position: relative;  
    overflow: hidden;  
    margin-left: 10px;  
}  
  
.theme-toggle:hover {  
    background: var(--accent-primary);  
    transform: scale(1.05);  
}  
  
.theme-toggle:hover i {  
    color: #ffffff;  
}  
  
.theme-toggle i {  
    font-size: 1.1rem;  
    color: var(--text-secondary);  
    transition: var(--transition-medium);  
    position: absolute;  
}  
  
/* Light mode: show moon, hide sun */  
.theme-toggle .fa-moon {  
    opacity: 1;  
    transform: rotate(0deg);  
}  
  
.theme-toggle .fa-sun {  
    opacity: 0;  
    transform: rotate(-90deg);  
}  
  
/* Dark mode: show sun, hide moon */  
[data-theme="dark"] .theme-toggle .fa-moon {  
    opacity: 0;  
    transform: rotate(90deg);  
}  
  
[data-theme="dark"] .theme-toggle .fa-sun {  
    opacity: 1;  
    transform: rotate(0deg);  
    color: var(--warning);  
}  
  
[data-theme="dark"] .theme-toggle:hover .fa-sun {  
    color: #ffffff;  
}  
  
/* Tab Panels */  
.tab-panels {  
    padding-top: 80px;  
}  
  
.tabpanel {  
    display: none;  
}  
  
.tabpanel.active {  
    display: block;  
}  
  
/* ========================================  
   Home Section  
======================================== */  
#home {  
    min-height: 100vh;  
    position: relative;  
    background: var(--bg-primary);  
    overflow: hidden;  
}  
  
#home::before {  
    content: '';  
    position: absolute;  
    top: -10%;  
    right: -5%;  
    width: 600px;  
    height: 600px;  
    background: radial-gradient(circle, rgba(0, 113, 227, 0.15) 0%, rgba(0, 113, 227, 0.05) 40%, transparent 70%);  
    border-radius: var(--radius-full);  
    animation: floatBlob1 20s ease-in-out infinite;  
}  
  
#home::after {  
    content: '';  
    position: absolute;  
    bottom: -10%;  
    left: -5%;  
    width: 500px;  
    height: 500px;  
    background: radial-gradient(circle, rgba(0, 166, 125, 0.13) 0%, rgba(0, 166, 125, 0.04) 40%, transparent 70%);  
    border-radius: var(--radius-full);  
    animation: floatBlob2 25s ease-in-out infinite;  
}  
  
.home-container {  
    display: flex;  
    align-items: center;  
    justify-content: space-between;  
    gap: 60px;  
    min-height: 100vh;  
    position: relative;  
    z-index: 1;  
}  
  
.home-content {  
    flex: 1;  
    max-width: 650px;  
}  
  
.greeting {  
    font-size: 1rem;  
    color: var(--accent-primary);  
    font-weight: 600;  
    margin-bottom: 10px;  
    letter-spacing: 2px;  
    text-transform: uppercase;  
    font-family: var(--font-mono);  
}  
  
.name {  
    font-size: 3.5rem;  
    font-weight: 800;  
    line-height: 1.1;  
    margin-bottom: 15px;  
    color: var(--text-primary);  
    letter-spacing: -0.03em;  
}  
  
.title-wrapper {  
    font-size: 1.8rem;  
    font-weight: 600;  
    color: var(--text-secondary);  
    margin-bottom: 20px;  
    display: flex;  
    align-items: center;  
    min-height: 50px;  
}  
  
.title {  
    color: var(--accent-primary);  
}  
  
.cursor {  
    animation: blink 1s infinite;  
    color: var(--accent-secondary);  
    margin-left: 5px;  
}  
  
@keyframes blink {  
    0%, 50% { opacity: 1; }  
    51%, 100% { opacity: 0; }  
}  
  
.tagline {  
    font-size: 1.1rem;  
    color: var(--text-muted);  
    margin-bottom: 30px;  
    line-height: 1.7;  
}  
  
/* Stats Container */  
.stats-container {  
  display: grid;  
  grid-template-columns: repeat(4, minmax(260px, 1fr));  /* 4 cards in one horizontal row */
  gap: 35px;             /* Increased gap between cards */  
  margin-bottom: 48px;  
  padding: 50px 0;       /* More vertical padding for breathing room */  
}  
  
.stat-card {  
  background: var(--bg-secondary);  
  border-radius: var(--radius-lg);  
  padding: 30px 24px;    /* Larger internal padding */  
  border: 1px solid var(--bg-tertiary);  
  transition: var(--transition-medium);  
  position: relative;  
  overflow: hidden;  
  min-height: 170px;     /* Taller cards */  
}  
  
.stat-card::before {  
  content: '';  
  position: absolute;  
  top: 0;  
  left: 0;  
  right: 0;  
  height: 4px;  
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));  
  opacity: 0;  
  transition: var(--transition-medium);  
}  
  
.stat-card:hover {  
  transform: translateY(-6px);  
  box-shadow: var(--shadow-lg);  
  border-color: var(--accent-primary);  
}  
  
.stat-card:hover::before {  
  opacity: 1;  
}  
  
.stat-card-inner {  
  display: flex;  
  align-items: center;  
  gap: 16px;             /* Slightly more spacing between icon/text */  
  height: 100%;  
}  
  
.stat-card-icon {  
  width: 56px;  
  height: 56px;  
  min-width: 56px;       /* Bigger icon area */  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  background: linear-gradient(135deg, rgba(0, 113, 227, 0.15), rgba(0, 180, 216, 0.1));  
  border-radius: var(--radius-md);  
  color: var(--accent-primary);  
  font-size: 1.4rem;     /* Larger icon size */  
  transition: var(--transition-medium);  
}  
  
.stat-card:hover .stat-card-icon {  
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));  
  color: #fff;  
  transform: scale(1.1);  
}  
  
.stat-card-content {  
  display: flex;  
  flex-direction: column;  
  gap: 4px;  
  flex: 1;  
  min-width: 0;  
}  
  
.stat-number {  
  display: block;  
  font-size: 1.8rem;     /* Bigger number text */  
  font-weight: 700;  
  color: var(--text-primary);  
  line-height: 1.15;  
}  
  
.stat-label {  
  display: block;  
  font-size: 0.7rem;     /* Slightly larger label */  
  color: var(--text-muted);  
  font-weight: 600;  
  text-transform: uppercase;  
  letter-spacing: 0.3px;  
  line-height: 1.35;  
  white-space: nowrap;  
  overflow: hidden;  
  text-overflow: ellipsis;  
}  

/* Stats responsive */
@media (max-width: 1024px) {
  .stats-container {
    grid-template-columns: repeat(2, 1fr);  /* 2 columns on tablets */
    gap: 25px;
  }
}

@media (max-width: 600px) {
  .stats-container {
    grid-template-columns: 1fr;  /* 1 column on mobile */
    gap: 20px;
    padding: 30px 0;
  }
  
  .stat-card {
    padding: 24px 20px;
  }
}
  
/* CTA Buttons */  
.cta-buttons {  
    display: flex;  
    gap: 20px;  
    margin-bottom: 40px;  
}  
  
.social-links {  
    display: flex;  
    gap: 15px;  
}  
  
.social-link {  
    width: 45px;  
    height: 45px;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    background: var(--bg-tertiary);  
    border-radius: var(--radius-md);  
    color: var(--text-secondary);  
    font-size: 1.2rem;  
    transition: var(--transition-fast);  
}  
  
.social-link:hover {  
    background: var(--accent-primary);  
    color: #ffffff;  
    transform: translateY(-5px);  
}  
  
/* Home Visual */  
.home-visual {  
    position: fixed;  
    top: 80px;  
    right: 40px;  
    display: flex;  
    justify-content: center;  
    align-items: center;  
    z-index: 10;
}  
  
.visual-container {  
    width: 350px;  
    height: 350px;  
    position: relative;  
    display: flex;  
    justify-content: center;  
    align-items: center;  
}  
  
.visual-circle {  
    position: absolute;  
    width: 100%;  
    height: 100%;  
    border-radius: var(--radius-full);  
    background: var(--accent-gradient);  
    opacity: 0.1;  
    animation: pulse 3s ease-in-out infinite;  
}  
  
@keyframes pulse {  
    0%, 100% { transform: scale(1); opacity: 0.15; }  
    50% { transform: scale(1.05); opacity: 0.25; }  
}  
  
.visual-icon {  
    width: 140px;  
    height: 140px;  
    background: var(--bg-card);  
    border-radius: var(--radius-full);  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    border: 2px solid var(--bg-tertiary);  
    box-shadow: var(--shadow-lg);  
    z-index: 1;  
    margin-top: 40px;  
}  
  
.visual-icon i {  
    font-size: 3.2rem;  
    color: var(--accent-primary);  
}  
  
/* ========================================  
   About Section  
======================================== */  
#about {  
    background: var(--bg-secondary);  
    position: relative;  
    overflow: hidden;  
}  
  
#about::before {  
    content: '';  
    position: absolute;  
    top: 10%;  
    left: -8%;  
    width: 500px;  
    height: 500px;  
    background: radial-gradient(circle, rgba(108, 58, 237, 0.12) 0%, rgba(108, 58, 237, 0.04) 40%, transparent 70%);  
    border-radius: var(--radius-full);  
    animation: floatBlob2 22s ease-in-out infinite;  
    pointer-events: none;  
}  
  
#about::after {  
    content: '';  
    position: absolute;  
    bottom: 5%;  
    right: -5%;  
    width: 450px;  
    height: 450px;  
    background: radial-gradient(circle, rgba(0, 113, 227, 0.11) 0%, rgba(0, 113, 227, 0.03) 40%, transparent 70%);  
    border-radius: var(--radius-full);  
    animation: floatBlob3 18s ease-in-out infinite;  
    pointer-events: none;  
}  
  
.about-content {  
    display: grid;  
    grid-template-columns: 1fr 1.5fr;  
    gap: 60px;  
    align-items: start;  
}  
 /* ========================================  
   About Image & Experience Badge  
======================================== */  
  
/* About image container */  
.about-image {  
  position: relative;  
  display: flex;  
  justify-content: center;  
}  
  
/* Wrapper for profile image + badge */  
.image-wrapper {  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
}  
  
/* Profile image container */  
.image-placeholder.profile-wrapper {  
  width: 320px;  
  height: 320px;  
  border-radius: 20px;  
  overflow: hidden;  
  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  
  background: linear-gradient(  
    135deg,  
    var(--accent-primary),  
    var(--accent-secondary)  
  );  
  
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);  
  transition: transform 0.3s ease, box-shadow 0.3s ease;  
}  
  
/* Hover animation */  
.image-placeholder.profile-wrapper:hover {  
  transform: translateY(-4px);  
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);  
}  
  
/* Profile image */  
.profile-image {  
  width: 100%;  
  height: 100%;  
  object-fit: cover;  
  border-radius: 10px;  
  z-index: 2;  
}  
  
/* Fallback icon */  
.fallback-icon {  
  font-size: 4rem;  
  color: #ffffff;  
  opacity: 0.85;  
  display: none;  
  z-index: 1;  
}  
  
/* ✅ Experience badge (UNDER image) */  
.experience-badge {  
  margin-top: 1rem;  
  
  display: flex;  
  align-items: center;  
  gap: 0.5rem;  
  
  padding: 0.5rem 1rem;  
  border-radius: var(--radius-lg);  
  
  background: var(--bg-card);  
  border: 1px solid var(--bg-tertiary);  
  
  font-weight: 600;  
}  
  
/* Badge number */  
.badge-number {  
  font-size: 1.25rem;  
  color: var(--accent-primary);  
}  
  
/* About experience subtitle under image */  
.about-experience-subtitle {  
  margin-top: 1.25rem;  
  padding: 10px 24px;  
  background: var(--bg-card);  
  border: 1px solid var(--bg-tertiary);  
  border-radius: var(--radius-xl);  
  box-shadow: var(--shadow-sm);  
  font-size: 0.95rem;  
  font-weight: 600;  
  color: var(--text-secondary);  
  display: inline-flex;  
  align-items: center;  
  gap: 8px;  
  letter-spacing: -0.01em;  
}  
  
.about-experience-subtitle i {  
  color: var(--accent-primary);  
  font-size: 1rem;  
}  
  
.about-experience-subtitle .exp-highlight {  
  color: var(--accent-primary);  
  font-weight: 700;  
}  
  
/* About text */  
.about-text p {  
  color: var(--text-secondary);  
  margin-bottom: 20px;  
  font-size: 1.05rem;  
  line-height: 1.8;  
}  
  
/* About details */  
.about-details {  
  display: grid;  
  grid-template-columns: repeat(2, 1fr);  
  gap: 20px;  
  margin: 30px 0;  
  padding: 25px;  
  background: var(--bg-card);  
  border-radius: var(--radius-lg);  
  border: 1px solid var(--bg-tertiary);  
}  
  
.detail-item {  
  display: flex;  
  align-items: center;  
  gap: 12px;  
  color: var(--text-secondary);  
}  
  
.detail-item i {  
  color: var(--accent-primary);  
  font-size: 1.1rem;  
  width: 20px;  
}  
  
/* Certifications in About */  
.certifications {  
    margin: 30px 0;  
    padding: 25px;  
    background: var(--bg-card);  
    border-radius: var(--radius-lg);  
    border: 1px solid var(--bg-tertiary);  
}  
  
.certifications h3 {  
    color: var(--text-primary);  
    font-size: 1.1rem;  
    margin-bottom: 15px;  
    display: flex;  
    align-items: center;  
    gap: 10px;  
}  
  
.certifications h3 i {  
    color: var(--accent-secondary);  
}  
  
.cert-list {  
    display: flex;  
    flex-direction: column;  
    gap: 12px;  
}  
  
.cert-list li {  
    display: flex;  
    align-items: center;  
    gap: 12px;  
    color: var(--text-secondary);  
    font-size: 0.95rem;  
}  
  
.cert-list li i {  
    color: var(--accent-secondary);  
}  
  
/* ========================================  
   Skills Section  
======================================== */  
#skills {  
    background: var(--bg-primary);  
    position: relative;  
    overflow: hidden;  
}  
  
#skills::before {  
    content: '';  
    position: absolute;  
    top: 15%;  
    right: -6%;  
    width: 550px;  
    height: 550px;  
    background: radial-gradient(circle, rgba(0, 166, 125, 0.13) 0%, rgba(0, 166, 125, 0.04) 40%, transparent 70%);  
    border-radius: var(--radius-full);  
    animation: floatBlob1 24s ease-in-out infinite;  
    pointer-events: none;  
}  
  
#skills::after {  
    content: '';  
    position: absolute;  
    bottom: 10%;  
    left: -8%;  
    width: 400px;  
    height: 400px;  
    background: radial-gradient(circle, rgba(0, 113, 227, 0.1) 0%, rgba(0, 113, 227, 0.03) 40%, transparent 70%);  
    border-radius: var(--radius-full);  
    animation: floatBlob3 20s ease-in-out infinite;  
    pointer-events: none;  
}  
  
.skills-grid {  
    display: grid;  
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));  
    gap: 30px;  
}  
  
.skill-category {  
    background: var(--bg-card);  
    padding: 30px;  
    border-radius: var(--radius-lg);  
    border: 1px solid var(--bg-tertiary);  
    transition: var(--transition-medium);  
}  
  
.skill-category:hover {  
    border-color: var(--accent-primary);  
    transform: translateY(-5px);  
}  
  
.category-title {  
    font-size: 1.2rem;  
    color: var(--text-primary);  
    margin-bottom: 25px;  
    display: flex;  
    align-items: center;  
    gap: 12px;  
    padding-bottom: 15px;  
    border-bottom: 1px solid var(--bg-tertiary);  
}  
  
.category-title i {  
    color: var(--accent-primary);  
    font-size: 1.1rem;  
}  
  
.skills-list {  
    display: flex;  
    flex-direction: column;  
    gap: 15px;  
}  
  
.skill-item {  
    display: flex;  
    align-items: center;  
    gap: 15px;  
    padding: 12px 15px;  
    background: var(--bg-tertiary);  
    border-radius: var(--radius-md);  
    transition: var(--transition-fast);  
}  
  
.skill-item:hover {  
    transform: translateX(5px);  
    border-left: 3px solid var(--accent-primary);  
}  
  
.skill-item i {  
    color: var(--accent-primary);  
    font-size: 1.2rem;  
    width: 25px;  
}  
  
.skill-name {  
    flex: 1;  
    color: var(--text-primary);  
    font-weight: 500;  
}  
  
.skill-level {  
    font-size: 0.75rem;  
    padding: 4px 10px;  
    border-radius: var(--radius-sm);  
    font-weight: 600;  
    text-transform: uppercase;  
}  
  
.skill-level.expert {  
    background: rgba(0, 166, 125, 0.1);  
    color: var(--accent-secondary);  
}  
  
.skill-level.advanced {  
    background: rgba(0, 113, 227, 0.1);  
    color: var(--accent-primary);  
}  
  
.skill-level.proficient {  
    background: rgba(108, 58, 237, 0.1);  
    color: var(--accent-tertiary);  
}  
  
/* Domain Tags */  
.domain-tags {  
    display: flex;  
    flex-wrap: wrap;  
    gap: 8px;  
    align-items: center;  
    justify-content: flex-start;  
}  
  
.domain-tag {  
    background: var(--bg-tertiary);  
    color: var(--text-secondary);  
    padding: 10px 18px;  
    border-radius: var(--radius-md);  
    font-size: 0.9rem;  
    transition: var(--transition-fast);  
    border: 1px solid transparent;  
    flex: 0 1 calc(50% - 4px);  
}  
  
.domain-tag:hover {  
    border-color: var(--accent-primary);  
    color: var(--accent-primary);  
    transform: translateY(-2px);  
}  
  
/* ========================================  
   Experience Section  
======================================== */  
#experience {  
    background: var(--bg-secondary);  
    position: relative;  
    overflow: hidden;  
}  
  
#experience::before {  
    content: '';  
    position: absolute;  
    top: 5%;  
    left: -6%;  
    width: 500px;  
    height: 500px;  
    background: radial-gradient(circle, rgba(0, 113, 227, 0.11) 0%, rgba(0, 113, 227, 0.03) 40%, transparent 70%);  
    border-radius: var(--radius-full);  
    animation: floatBlob2 26s ease-in-out infinite;  
    pointer-events: none;  
}  
  
#experience::after {  
    content: '';  
    position: absolute;  
    bottom: 5%;  
    right: -8%;  
    width: 480px;  
    height: 480px;  
    background: radial-gradient(circle, rgba(108, 58, 237, 0.1) 0%, rgba(108, 58, 237, 0.03) 40%, transparent 70%);  
    border-radius: var(--radius-full);  
    animation: floatBlob1 22s ease-in-out infinite;  
    pointer-events: none;  
}  
  
.timeline {  
    position: relative;  
    max-width: 900px;  
    margin: 0 auto;  
}  
  
.timeline::before {  
    content: '';  
    position: absolute;  
    left: 19px;  
    top: 0;  
    bottom: 0;  
    width: 2px;  
    background: var(--bg-tertiary);  
}  
  
.timeline-item {  
    display: flex;  
    gap: 30px;  
    margin-bottom: 40px;  
    position: relative;  
}  
  
.timeline-item:last-child {  
    margin-bottom: 0;  
}  
  
.timeline-marker {  
    display: flex;  
    flex-direction: column;  
    align-items: center;  
    flex-shrink: 0;  
    z-index: 1;  
}  
  
.timeline-marker i {  
    width: 40px;  
    height: 40px;  
    background: var(--accent-gradient);  
    border-radius: var(--radius-full);  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    color: #ffffff;  
    box-shadow: var(--shadow-glow);  
}  
  
.timeline-content {  
    flex: 1;  
    background: var(--bg-card);  
    padding: 30px;  
    border-radius: var(--radius-lg);  
    border: 1px solid var(--bg-tertiary);  
    transition: var(--transition-medium);  
}  
  
.timeline-content:hover {  
    border-color: var(--accent-primary);  
    transform: translateX(5px);  
}  
  
.job-header {  
    display: flex;  
    justify-content: space-between;  
    align-items: flex-start;  
    margin-bottom: 20px;  
    flex-wrap: wrap;  
    gap: 15px;  
}  
  
.job-info .job-title {  
    font-size: 1.4rem;  
    color: var(--text-primary);  
    margin-bottom: 8px;  
}  
  
.job-info .company {  
    font-size: 1.1rem;  
    color: var(--accent-primary);  
    font-weight: 500;  
    margin-bottom: 5px;  
    display: flex;  
    align-items: center;  
    gap: 8px;  
}  
  
.job-info .location {  
    font-size: 0.95rem;  
    color: var(--text-muted);  
    display: flex;  
    align-items: center;  
    gap: 6px;  
}  
  
.job-date {  
    background: var(--bg-tertiary);  
    padding: 8px 16px;  
    border-radius: var(--radius-md);  
    color: var(--text-secondary);  
    font-size: 0.9rem;  
    display: flex;  
    align-items: center;  
    gap: 8px;  
    white-space: nowrap;  
}  
  
.job-responsibilities {  
    margin-bottom: 20px;  
}  
  
.job-responsibilities li {  
    display: flex;  
    gap: 15px;  
    align-items: flex-start;  
    margin-bottom: 12px;  
    color: var(--text-secondary);  
    line-height: 1.6;  
}  
  
.job-responsibilities li i {  
    color: var(--accent-secondary);  
    margin-top: 5px;  
    flex-shrink: 0;  
}  
  
.job-tags {  
    display: flex;  
    flex-wrap: wrap;  
    gap: 10px;  
}  
  
.job-tags .tag {  
    background: var(--bg-tertiary);  
    color: var(--accent-primary);  
    padding: 5px 15px;  
    border-radius: var(--radius-sm);  
    font-size: 0.85rem;  
    font-family: var(--font-mono);  
}  
  
/* ========================================  
   Projects Section  
======================================== */  
#projects {  
    background: var(--bg-primary);  
    position: relative;  
    overflow: hidden;  
}  
  
#projects::before {  
    content: '';  
    position: absolute;  
    top: 10%;  
    right: -5%;  
    width: 520px;  
    height: 520px;  
    background: radial-gradient(circle, rgba(0, 166, 125, 0.13) 0%, rgba(0, 166, 125, 0.04) 40%, transparent 70%);  
    border-radius: var(--radius-full);  
    animation: floatBlob3 21s ease-in-out infinite;  
    pointer-events: none;  
}  
  
#projects::after {  
    content: '';  
    position: absolute;  
    bottom: 8%;  
    left: -6%;  
    width: 460px;  
    height: 460px;  
    background: radial-gradient(circle, rgba(108, 58, 237, 0.09) 0%, rgba(108, 58, 237, 0.03) 40%, transparent 70%);  
    border-radius: var(--radius-full);  
    animation: floatBlob2 19s ease-in-out infinite;  
    pointer-events: none;  
}  
  
.project-filters {  
    display: flex;  
    justify-content: center;  
    gap: 15px;  
    margin-bottom: 50px;  
    flex-wrap: wrap;  
}  
  
.filter-btn {  
    background: var(--bg-tertiary);  
    color: var(--text-secondary);  
    padding: 10px 25px;  
    border-radius: var(--radius-md);  
    font-size: 0.95rem;  
    transition: var(--transition-fast);  
}  
  
.filter-btn:hover,  
.filter-btn.active {  
    background: var(--accent-gradient);  
    color: #ffffff;  
}  
  
.projects-grid {  
    display: grid;  
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));  
    gap: 30px;  
}  
  
.project-card {  
    background: var(--bg-card);  
    border-radius: var(--radius-lg);  
    padding: 30px;  
    border: 1px solid var(--bg-tertiary);  
    transition: var(--transition-medium);  
    position: relative;  
    overflow: hidden;  
}  
  
.project-card:hover {  
    transform: translateY(-10px);  
    border-color: var(--accent-primary);  
    box-shadow: var(--shadow-lg);  
}  
  
.project-badge {  
    position: absolute;  
    top: 20px;  
    left: 20px;  
    background: var(--accent-gradient);  
    color: #ffffff;  
    padding: 5px 12px;  
    border-radius: var(--radius-sm);  
    font-size: 0.75rem;  
    font-weight: 600;  
    text-transform: uppercase;  
}  
  
.project-badge.featured {  
    background: var(--accent-gradient-alt);  
}  
  
.project-links {  
    position: absolute;  
    top: 20px;  
    right: 20px;  
    display: flex;  
    gap: 10px;  
}  
  
.project-link {  
    width: 40px;  
    height: 40px;  
    background: var(--bg-tertiary);  
    border-radius: var(--radius-sm);  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    color: var(--text-secondary);  
    transition: var(--transition-fast);  
}  
  
.project-link:hover {  
    background: var(--accent-primary);  
    color: #ffffff;  
}  
  
.project-content {  
    padding-top: 50px;  
}  
  
.project-title {  
    font-size: 1.3rem;  
    color: var(--text-primary);  
    margin-bottom: 12px;  
}  
  
.project-description {  
    color: var(--text-secondary);  
    font-size: 0.95rem;  
    margin-bottom: 20px;  
    line-height: 1.7;  
}  
  
.project-metrics {  
    display: flex;  
    gap: 25px;  
    margin-bottom: 20px;  
    padding: 20px;  
    background: var(--bg-tertiary);  
    border-radius: var(--radius-md);  
    flex-wrap: wrap;  
}  
  
.metric {  
    text-align: center;  
}  
  
.metric-value {  
    display: block;  
    font-size: 1.5rem;  
    font-weight: 700;  
    color: var(--accent-secondary);  
}  
  
.metric-label {  
    font-size: 0.8rem;  
    color: var(--text-muted);  
}  
  
.project-tags {  
    display: flex;  
    flex-wrap: wrap;  
    gap: 8px;  
}  
  
.project-tags .tag {  
    background: var(--bg-tertiary);  
    color: var(--accent-primary);  
    padding: 5px 12px;  
    border-radius: var(--radius-sm);  
    font-size: 0.8rem;  
    font-family: var(--font-mono);  
}  
  
/* ========================================  
   Education Section  
======================================== */  
#education {  
    background: var(--bg-secondary);  
    position: relative;  
    overflow: hidden;  
}  
  
#education::before {  
    content: '';  
    position: absolute;  
    top: 8%;  
    left: -5%;  
    width: 480px;  
    height: 480px;  
    background: radial-gradient(circle, rgba(0, 113, 227, 0.11) 0%, rgba(0, 113, 227, 0.03) 40%, transparent 70%);  
    border-radius: var(--radius-full);  
    animation: floatBlob1 23s ease-in-out infinite;  
    pointer-events: none;  
}  
  
#education::after {  
    content: '';  
    position: absolute;  
    bottom: 10%;  
    right: -6%;  
    width: 420px;  
    height: 420px;  
    background: radial-gradient(circle, rgba(0, 166, 125, 0.1) 0%, rgba(0, 166, 125, 0.03) 40%, transparent 70%);  
    border-radius: var(--radius-full);  
    animation: floatBlob3 17s ease-in-out infinite;  
    pointer-events: none;  
}  
  
.education-grid {  
    display: grid;  
    grid-template-columns: 1fr 1fr;  
    gap: 40px;  
}  
  
.education-degrees {  
    display: flex;  
    flex-direction: column;  
    gap: 25px;  
}  
  
.degree-card {  
    background: var(--bg-card);  
    padding: 30px;  
    border-radius: var(--radius-lg);  
    border: 1px solid var(--bg-tertiary);  
    display: flex;  
    gap: 20px;  
    transition: var(--transition-medium);  
}  
  
.degree-card:hover {  
    border-color: var(--accent-primary);  
    transform: translateY(-5px);  
}  
  
.degree-icon {  
    width: 60px;  
    height: 60px;  
    background: rgba(0, 113, 227, 0.08);  
    border-radius: var(--radius-lg);  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    flex-shrink: 0;  
}  
  
.degree-icon i {  
    font-size: 1.8rem;  
    color: var(--accent-primary);  
}  
  
.degree-info .degree-title {  
    font-size: 1.2rem;  
    color: var(--text-primary);  
    margin-bottom: 5px;  
}  
  
.degree-info .degree-field {  
    font-size: 1rem;  
    color: var(--accent-secondary);  
    font-weight: 500;  
    margin-bottom: 15px;  
}  
  
.degree-info .degree-school,  
.degree-info .degree-location,  
.degree-info .degree-date {  
    display: flex;  
    align-items: center;  
    gap: 8px;  
    color: var(--text-secondary);  
    font-size: 0.9rem;  
    margin-bottom: 5px;  
}  
  
.degree-info i {  
    color: var(--text-muted);  
    width: 16px;  
}  
  
/* Certifications Section */  
.certifications-section {  
    background: var(--bg-card);  
    padding: 35px;  
    border-radius: var(--radius-lg);  
    border: 1px solid var(--bg-tertiary);  
}  
  
.certs-title {  
    font-size: 1.3rem;  
    color: var(--text-primary);  
    margin-bottom: 25px;  
    display: flex;  
    align-items: center;  
    gap: 12px;  
}  
  
.certs-title i {  
    color: var(--accent-secondary);  
}  
  
.cert-cards {  
    display: flex;  
    flex-direction: column;  
    gap: 20px;  
}  
  
.cert-card {  
    background: var(--bg-tertiary);  
    padding: 25px;  
    border-radius: var(--radius-md);  
    display: flex;  
    gap: 20px;  
    transition: var(--transition-fast);  
}  
  
.cert-card:hover {  
    transform: translateX(5px);  
}  
  
.cert-icon {  
    width: 50px;  
    height: 50px;  
    background: var(--accent-gradient);  
    border-radius: var(--radius-md);  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    flex-shrink: 0;  
}  
  
.cert-icon i {  
    font-size: 1.5rem;  
    color: #ffffff;  
}  
  
.cert-info .cert-name {  
    font-size: 1.05rem;  
    color: var(--text-primary);  
    margin-bottom: 5px;  
}  
  
.cert-info .cert-details {  
    color: var(--text-muted);  
    font-size: 0.9rem;  
    margin-bottom: 12px;  
}  
  
.cert-skills {  
    display: flex;  
    flex-wrap: wrap;  
    gap: 8px;  
}  
  
.cert-skills span {  
    background: var(--bg-primary);  
    color: var(--accent-primary);  
    padding: 4px 10px;  
    border-radius: var(--radius-sm);  
    font-size: 0.75rem;  
    font-family: var(--font-mono);  
}  
  
/* ========================================  
   Contact Section  
======================================== */  
#contact {  
    background: var(--bg-primary);  
    position: relative;  
    overflow: hidden;  
}  
  
#contact::before {  
    content: '';  
    position: absolute;  
    top: 12%;  
    right: -4%;  
    width: 500px;  
    height: 500px;  
    background: radial-gradient(circle, rgba(108, 58, 237, 0.12) 0%, rgba(108, 58, 237, 0.04) 40%, transparent 70%);  
    border-radius: var(--radius-full);  
    animation: floatBlob2 20s ease-in-out infinite;  
    pointer-events: none;  
}  
  
#contact::after {  
    content: '';  
    position: absolute;  
    bottom: 5%;  
    left: -5%;  
    width: 450px;  
    height: 450px;  
    background: radial-gradient(circle, rgba(0, 113, 227, 0.1) 0%, rgba(0, 113, 227, 0.03) 40%, transparent 70%);  
    border-radius: var(--radius-full);  
    animation: floatBlob1 25s ease-in-out infinite;  
    pointer-events: none;  
}  
  
.contact-content {  
    display: grid;  
    grid-template-columns: 1fr 1.2fr;  
    gap: 60px;  
    max-width: 1000px;  
    margin: 0 auto;  
}  
  
.contact-info .contact-heading {  
    font-size: 2rem;  
    color: var(--text-primary);  
    margin-bottom: 20px;  
}  
  
.contact-info .contact-text {  
    color: var(--text-secondary);  
    margin-bottom: 25px;  
    line-height: 1.8;  
}  
  
.contact-highlights {  
    margin-bottom: 30px;  
}  
  
.contact-highlights li {  
    display: flex;  
    align-items: center;  
    gap: 12px;  
    color: var(--text-secondary);  
    margin-bottom: 12px;  
}  
  
.contact-highlights li i {  
    color: var(--accent-secondary);  
}  
  
.contact-methods {  
    display: flex;  
    flex-direction: column;  
    gap: 20px;  
    margin-bottom: 30px;  
}  
  
.contact-method {  
    display: flex;  
    align-items: center;  
    gap: 20px;  
}  
  
.method-icon {  
    width: 55px;  
    height: 55px;  
    background: var(--bg-tertiary);  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    border-radius: var(--radius-md);  
    color: var(--accent-primary);  
    font-size: 1.3rem;  
}  
  
.method-details .method-label {  
    display: block;  
    font-size: 0.85rem;  
    color: var(--text-muted);  
    margin-bottom: 3px;  
}  
  
.method-details a,  
.method-details span {  
    color: var(--text-secondary);  
    font-size: 0.95rem;  
}  
  
.method-details a:hover {  
    color: var(--accent-primary);  
}  
  
.contact-social {  
    display: flex;  
    gap: 15px;  
}  
  
.social-btn {  
    width: 45px;  
    height: 45px;  
    background: var(--bg-tertiary);  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    border-radius: var(--radius-md);  
    color: var(--text-secondary);  
    font-size: 1.2rem;  
    transition: var(--transition-fast);  
}  
  
.social-btn:hover {  
    background: var(--accent-primary);  
    color: #ffffff;  
    transform: translateY(-5px);  
}  
  
/* Contact Form */  
.contact-form {  
    background: var(--bg-card);  
    padding: 40px;  
    border-radius: var(--radius-lg);  
    border: 1px solid var(--bg-tertiary);  
}  
  
.form-group {  
    margin-bottom: 25px;  
}  
  
.form-group label {  
    display: block;  
    color: var(--text-secondary);  
    margin-bottom: 8px;  
    font-size: 0.95rem;  
}  
  
.form-group input,  
.form-group textarea {  
    width: 100%;  
    padding: 15px 20px;  
    background: var(--bg-primary);  
    border: 1px solid var(--bg-tertiary);  
    border-radius: var(--radius-md);  
    color: var(--text-primary);  
    font-size: 1rem;  
    font-family: inherit;  
    transition: var(--transition-fast);  
    resize: none;  
}  
  
.form-group input:focus,  
.form-group textarea:focus {  
    border-color: var(--accent-primary);  
    outline: none;  
}  
  
.form-group input::placeholder,  
.form-group textarea::placeholder {  
    color: var(--text-muted);  
}  
  
.submit-btn {  
    width: 100%;  
    justify-content: center;  
}  
  
/* ========================================  
   Footer  
======================================== */  
footer {  
    background: var(--bg-secondary);  
    padding: 50px 0 30px;  
    text-align: center;  
    border-top: 1px solid rgba(0, 0, 0, 0.06);  
}  
  
.footer-content {  
    display: flex;  
    flex-direction: column;  
    align-items: center;  
    gap: 15px;  
}  
  
.footer-logo {  
    font-size: 2.5rem;  
    font-weight: 700;  
    background: var(--accent-gradient);  
    -webkit-background-clip: text;  
    -webkit-text-fill-color: transparent;  
    background-clip: text;  
}  
  
.footer-tagline {  
    color: var(--text-secondary);  
}  
  
.footer-nav {  
    display: flex;  
    justify-content: center;  
    gap: 30px;  
    flex-wrap: wrap;  
}  
  
.footer-nav a {  
    color: var(--text-muted);  
    transition: var(--transition-fast);  
}  
  
.footer-nav a:hover {  
    color: var(--accent-primary);  
}  
  
.footer-copyright {  
    color: var(--text-muted);  
    font-size: 0.9rem;  
}  
  
/* ========================================  
   Back to Top Button  
======================================== */  
.back-to-top {  
    position: fixed;  
    bottom: 30px;  
    right: 30px;  
    width: 50px;  
    height: 50px;  
    background: var(--accent-gradient);  
    color: #ffffff;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    border-radius: var(--radius-md);  
    font-size: 1.2rem;  
    opacity: 0;  
    visibility: hidden;  
    transition: var(--transition-medium);  
    box-shadow: var(--shadow-glow);  
    z-index: 999;  
}  
  
.back-to-top.visible {  
    opacity: 1;  
    visibility: visible;  
}  
  
.back-to-top:hover {  
    transform: translateY(-5px);  
}  
  
/* ========================================  
   Animations  
======================================== */  
@keyframes fadeIn {  
    from { opacity: 0; transform: translateY(20px); }  
    to { opacity: 1; transform: translateY(0); }  
}  
  
@keyframes floatBlob1 {  
    0%, 100% { transform: translate(0, 0) scale(1); }  
    25% { transform: translate(80px, -60px) scale(1.1); }  
    50% { transform: translate(-40px, -120px) scale(0.95); }  
    75% { transform: translate(-80px, -30px) scale(1.05); }  
}  
  
@keyframes floatBlob2 {  
    0%, 100% { transform: translate(0, 0) scale(1); }  
    25% { transform: translate(-60px, 80px) scale(1.08); }  
    50% { transform: translate(50px, 40px) scale(0.92); }  
    75% { transform: translate(70px, -50px) scale(1.04); }  
}  
  
@keyframes floatBlob3 {  
    0%, 100% { transform: translate(0, 0) scale(1); }  
    33% { transform: translate(-50px, -70px) scale(1.06); }  
    66% { transform: translate(60px, 30px) scale(0.96); }  
}  
  
.animate-in {  
    opacity: 1 !important;  
    transform: translateY(0) !important;  
}  
  
/* ========================================  
   Responsive Design  
======================================== */  
@media (max-width: 1024px) {  
    .home-container {  
        flex-direction: column-reverse;  
        text-align: center;  
        gap: 40px;  
        padding-top: 40px;  
    }  
    .home-content { max-width: 100%; }  
    .stats-container { grid-template-columns: repeat(2, 1fr); }  
    .cta-buttons { justify-content: center; }  
    .social-links { justify-content: center; }  
    .title-wrapper { justify-content: center; }  
    .about-content { grid-template-columns: 1fr; text-align: center; }  
    .about-image { max-width: 350px; margin: 0 auto; }  
    .experience-badge { bottom: -15px; right: 50%; transform: translateX(50%); }  
    .about-details { justify-items: center; }  
    .contact-content { grid-template-columns: 1fr; }  
    .projects-grid { grid-template-columns: 1fr; }  
    .education-grid { grid-template-columns: 1fr; }  
    .skills-grid { grid-template-columns: 1fr; }  
    .home-visual { order: -1; }  
}  
  
@media (max-width: 768px) {  
    :root { --section-padding: 80px 0; }  
    .section-title { font-size: 2rem; }  
    nav .tablist {  
        display: none;  
        position: absolute;  
        top: 100%;  
        left: 0;  
        right: 0;  
        background: var(--nav-bg);  
        backdrop-filter: saturate(180%) blur(20px);  
        -webkit-backdrop-filter: saturate(180%) blur(20px);  
        border-bottom: 1px solid var(--nav-border);  
        flex-direction: column;  
        padding: 20px;  
        gap: 10px;  
    }  
    nav .tablist.active { display: flex; }  
    .mobile-menu-btn { display: block; }  
    .theme-toggle { margin-left: 0; margin-top: 10px; width: 100%; }  
    .name { font-size: 2.5rem; }  
    .title-wrapper { font-size: 1.3rem; }  
    .visual-container { width: 280px; height: 280px; }  
    .visual-icon { width: 150px; height: 150px; }  
    .visual-icon i { font-size: 3.5rem; }  
    .home-visual { justify-content: center; padding-right: 0; }  
    .cta-buttons { flex-direction: column; gap: 15px; }  
    .btn { width: 100%; justify-content: center; }  
    .timeline::before { display: none; }  
    .timeline-item { flex-direction: column; gap: 15px; }  
    .timeline-marker { flex-direction: row; }  
    .job-header { flex-direction: column; }  
    .project-metrics { justify-content: center; }  
    .degree-card { flex-direction: column; text-align: center; }  
    .degree-icon { margin: 0 auto; }  
    .degree-info .degree-school,  
    .degree-info .degree-location,  
    .degree-info .degree-date { justify-content: center; }  
    .contact-form { padding: 25px; }  
    .cert-card { flex-direction: column; text-align: center; }  
    .cert-icon { margin: 0 auto; }  
    .cert-skills { justify-content: center; }  
}  
  
@media (max-width: 480px) {  
    .name { font-size: 2rem; }  
    .section-title { font-size: 1.6rem; }  
    .project-filters { gap: 10px; }  
    .filter-btn { padding: 8px 16px; font-size: 0.85rem; }  
    .timeline-content { padding: 20px; }  
    .visual-container { width: 220px; height: 220px; }  
    .visual-icon { width: 120px; height: 120px; }  
    .visual-icon i { font-size: 2.5rem; }  
}