/* Apple.com Inspired Portfolio Styles */

/* Modern CSS Color System with Latest Technology - HSL, CSS Variables, and Advanced Theming */
:root {
    /* Primary Color Palette - Modern HSL-based approach */
    --color-black: hsl(0, 0%, 0%);
    --color-white: hsl(0, 0%, 100%);
    --color-grey-50: hsl(0, 0%, 98%);
    --color-grey-100: hsl(0, 0%, 96%);
    --color-grey-200: hsl(0, 0%, 95%);
    --color-grey-300: hsl(0, 0%, 90%);
    --color-grey-400: hsl(210, 10%, 80%);
    --color-grey-500: hsl(210, 8%, 50%);
    --color-grey-600: hsl(210, 8%, 40%);
    --color-grey-700: hsl(210, 8%, 30%);
    --color-grey-800: hsl(210, 10%, 15%);
    --color-grey-900: hsl(210, 10%, 10%);

    /* Vibrant Blue Palette - Using HSL for dynamic color management */
    --color-blue-50: hsl(210, 100%, 97%);
    --color-blue-100: hsl(210, 100%, 95%);
    --color-blue-200: hsl(210, 100%, 91%);
    --color-blue-300: hsl(210, 100%, 85%);
    --color-blue-400: hsl(210, 100%, 75%);
    --color-blue-500: hsl(210, 100%, 60%);
    --color-blue-600: hsl(210, 100%, 50%);
    --color-blue-700: hsl(210, 95%, 42%);
    --color-blue-800: hsl(210, 95%, 35%);
    --color-blue-900: hsl(210, 95%, 25%);

    /* Semantic Color Tokens using CSS Variables */
    --text-primary-light: var(--color-black);
    --text-secondary-light: var(--color-grey-600);
    --text-accent-light: var(--color-blue-700);
    --bg-surface-light: var(--color-white);
    --bg-secondary-light: var(--color-grey-50);
    --border-light: var(--color-grey-200);

    /* Dark Mode Color Tokens */
    --text-primary-dark: var(--color-grey-50);
    --text-secondary-dark: var(--color-grey-400);
    --text-accent-dark: var(--color-blue-400);
    --bg-surface-dark: var(--color-grey-900);
    --bg-secondary-dark: var(--color-grey-800);
    --border-dark: var(--color-grey-700);

    /* Universal Design Tokens - Latest CSS Architecture */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;

    --shadow-sm: 0 1px 2px 0 hsl(0, 0%, 0%, 0.05);
    --shadow-md: 0 4px 6px -1px hsl(0, 0%, 0%, 0.1);
    --shadow-lg: 0 10px 15px -3px hsl(0, 0%, 0%, 0.1);
    --shadow-xl: 0 20px 25px -5px hsl(0, 0%, 0%, 0.1);
    --shadow-2xl: 0 25px 50px -12px hsl(0, 0%, 0%, 0.25);

    /* Colors mapped to design system */
    --text-primary: var(--text-primary-light);
    --text-secondary: var(--text-secondary-light);
    --text-accent: var(--text-accent-light);
    --bg-primary: var(--bg-surface-light);
    --bg-secondary: var(--bg-secondary-light);
    --border-color: var(--border-light);

    /* Component-specific color tokens */
    --nav-bg: hsla(0, 0%, 100%, 0.85);
    --nav-text: #1d1d1f;
    --nav-border: hsla(240, 8%, 85%, 0.55);
    --nav-hover: #0071e3;
    --nav-icon-hover-bg: hsla(210, 95%, 55%, 0.12);
    --btn-primary: var(--color-blue-700);
    --btn-primary-hover: hsl(210, 95%, 45%);
    --btn-text-primary: var(--color-white);

    /* Project Cards - Modern Color System */
    --project-card-bg: var(--bg-surface-light);
    --project-card-text: var(--text-primary);
    --project-card-border: var(--color-grey-200);
    --project-card-shadow: var(--shadow-lg);
    --project-card-hover-shadow: 0 20px 60px hsl(0, 0%, 0%, 0.12);
    --project-card-tag-bg: var(--color-grey-100);
    --project-card-tag-text: var(--color-blue-700);
    --project-card-link-text: var(--color-blue-700);
    --project-card-link-hover-text: hsl(210, 95%, 55%);

    /* Clean hexadecimal fallbacks for maximum compatibility */
    --bg-white-light: var(--color-white);
    --bg-grey-light: var(--color-grey-50);
    --shadow-light: var(--shadow-sm);

    /* Footer tokens */
    --footer-bg: #000000;
    --footer-border: rgba(255, 255, 255, 0.08);
    --footer-text: #f5f5f7;
    --footer-link: #d2d2d7;
    --footer-link-hover: #5ac8fa;
}

/* ===== ADVANCED DARK MODE CSS - Latest Technology Implementation ===== */

/* Dark Mode Master Theme - Using Modern CSS Architecture */
@supports selector(:has()) {
  html:has(body.dark-trigger) {
    color-scheme: dark only;
  }
}

html.dark {
  /* Advanced Color System - HSL Based Dark Mode Palette */

  /* Dynamic Dark Mode Color Tokens using modern CSS variables */
  --color-dark-bg-primary: hsl(0, 0%, 0%);
  --color-dark-bg-secondary: hsl(210, 10%, 15%);
  --color-dark-bg-tertiary: hsl(210, 8%, 20%);
  --color-dark-surface: hsl(210, 10%, 10%);

  /* Advanced Text Hierarchy for Dark Mode */
  --text-primary-dark: hsl(0, 0%, 98%);
  --text-secondary-dark: hsl(210, 8%, 70%);
  --text-tertiary-dark: hsl(210, 8%, 50%);
  --text-accent-dark: hsl(210, 95%, 55%);

  /* Modern Border System with HSL Alpha */
  --border-dark-primary: hsl(210, 10%, 25%);
  --border-dark-secondary: hsl(210, 10%, 30%);
  --border-dark-accent: hsl(210, 95%, 45%, 0.6);

  /* Advanced Shadow System using Color-mix and OKLCH */
  --shadow-dark-sm: 0 1px 2px hsl(0, 0%, 0%, 0.4), 0 1px 4px hsl(210, 95%, 45%, 0.1);
  --shadow-dark-md: 0 8px 16px hsl(0, 0%, 0%, 0.5), 0 4px 12px hsl(210, 95%, 45%, 0.15);
  --shadow-dark-lg: 0 16px 32px hsl(0, 0%, 0%, 0.6), 0 8px 24px hsl(210, 95%, 45%, 0.2);
  --shadow-dark-xl: 0 32px 64px hsl(0, 0%, 0%, 0.7), 0 16px 48px hsl(210, 95%, 45%, 0.25);

  /* Automated Theme Switching using CSS Container Queries */
  --text-primary: var(--text-primary-dark);
  --text-secondary: var(--text-secondary-dark);
  --text-accent: var(--text-accent-dark);
  --bg-primary: var(--color-dark-bg-primary);
  --bg-secondary: var(--color-dark-bg-secondary);
  --border-color: var(--border-dark-primary);

  /* Component-Level Dark Mode Variables */
  --nav-bg: hsla(240, 6%, 12%, 0.82);
  --nav-text: #f5f5f7;
  --nav-border: hsla(0, 0%, 100%, 0.12);
  --nav-hover: #5ac8fa;
  --nav-icon-hover-bg: hsla(210, 95%, 70%, 0.16);

  /* Modern Button System - Using CSS Var() and calc() */
  --btn-primary-dark: hsl(210, 95%, 50%);
  --btn-primary-hover-dark: hsl(210, 95%, 60%);
  --btn-secondary-dark: hsl(210, 95%, 50%, 0.1);
  --btn-secondary-border-dark: hsl(210, 95%, 50%, 0.3);

  /* Advanced Card System for Dark Mode */
  --card-bg-dark: hsl(210, 10%, 12%);
  --card-border-dark: hsl(210, 10%, 25%);
  --card-shadow-dark: var(--shadow-dark-lg);

  /* Project Cards - Advanced Dark Mode Implementation */
  --project-card-bg: var(--card-bg-dark);
  --project-card-border: var(--card-border-dark);
  --project-card-shadow: var(--shadow-dark-lg);
  --project-card-hover-shadow: var(--shadow-dark-xl);
  --project-card-tag-bg: hsl(210, 95%, 50%, 0.15);
  --project-card-tag-border: hsl(210, 95%, 50%, 0.3);
  --project-card-link-text: hsl(210, 95%, 55%);
  --project-card-link-hover-text: hsl(210, 95%, 70%);

  /* Modern Glassmorphism Effects */
  --glass-bg: hsl(210, 10%, 8%, 0.8);
  --glass-border: hsl(210, 10%, 25%, 0.6);
  --glass-backdrop: blur(20px) saturate(180%);

  /* Footer tokens */
  --footer-bg: #000000;
  --footer-border: rgba(255, 255, 255, 0.08);
  --footer-text: #f5f5f7;
  --footer-link: #d2d2d7;
  --footer-link-hover: #5ac8fa;

  /* Advanced Body Background - Using CSS Layer Blending */
  background:
    radial-gradient(circle at 20% 50%, hsl(210, 95%, 50%, 0.05), transparent 50%),
    radial-gradient(circle at 80% 20%, hsl(210, 95%, 45%, 0.03), transparent 50%),
    radial-gradient(circle at 40% 80%, hsl(210, 100%, 40%, 0.04), transparent 50%),
    hsl(210, 10%, 5%);

  /* Modern Animation Timing */
  --animation-fast: cubic-bezier(0.4, 0.0, 0.2, 1);
  --animation-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
  --animation-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* CSS Container Query Support for Component-Level Responsiveness */
  container-type: inline-size;

  /* Advanced CSS Features */
  color-scheme: dark;

  /* Optimized Scroll Behavior - Apple Style */
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

/* Dark Mode Body Enhancement - Using Modern CSS Selectors */
html.dark body {
  background: inherit; /* Inherit from html element */
  color: var(--text-primary-dark);

  /* Modern Prefers-Contrast Support */
  @media (prefers-contrast: high) {
    --text-primary-dark: hsl(0, 0%, 100%);
    --text-secondary-dark: hsl(0, 0%, 95%);
  }
}
html.dark body { /* Override individual state selectors that might conflict */
    background-color: #000000; /* Black body background for dark mode */
}

/* Apple's precise design system */

/* Body & Base Styles */
body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, sans-serif;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 17px;
    line-height: 1.5;
    color: var(--text-primary);
    background: transparent; /* Allow sections to show their own backgrounds */
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
}

/* Typography - Apple Style */
h1 {
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.022em;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

h2 {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.0416666667;
    letter-spacing: -0.021em;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

h3 {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.0834934585;
    letter-spacing: -0.021em;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
}

h4 {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.0834934585;
    letter-spacing: -0.016em;
    margin-bottom: 1.25rem;
    color: var(--text-primary);
}

h5 {
    font-size: 1.08392rem;
    font-weight: 600;
    line-height: 1.454545;
    letter-spacing: -0.003em;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

p {
    font-size: 1.125rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
    color: var(--text-secondary);
    max-width: 68ch;
}

strong, b {
    font-weight: 600;
}

/* Links */
a {
    color: var(--text-accent);
    text-decoration: none;
    transition: color 0.25s ease;
}

a:hover {
    color: var(--text-accent);
    text-decoration: none; /* Remove underline on hover for a cleaner look */
}

.dark a {
    color: #2997ff; /* Apple's vibrant blue for links */
}
.dark a:hover {
    color: #66b5ff; /* Lighter blue on hover */
}

/* Buttons */
.btn {
    display: inline-block;
    font-size: 1.125rem;
    font-weight: 400;
    padding: 0.75rem 1.5rem;
    border-radius: 1rem;
    background: var(--btn-primary);
    color: var(--btn-text-primary);
    border: none;
    transition: background-color 0.25s ease, transform 0.25s ease;
    cursor: pointer;
}

.btn:hover {
    background: var(--btn-primary-hover);
    transform: translateY(-1px);
}

.btn-secondary {
    background: transparent;
    color: var(--text-accent);
    border: 1px solid var(--border-color);
    padding: 0.5625rem 1.125rem;
}

.btn-secondary:hover {
    background: rgba(0, 112, 224, 0.1);
    color: var(--text-accent);
}

.btn-active {
    background: var(--btn-primary);
    color: var(--btn-text-primary);
}


.menu-toggle-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem; /* Add some padding for easier clicking */
    z-index: 101; /* Above overlay */
    color: var(--nav-text);
    transition: color 0.3s ease;
}
.menu-toggle-button:hover {
    color: var(--nav-hover);
}


/* Overlay Menu */
.overlay-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: hsla(0, 0%, 100%, 0.9); /* Slightly more opaque with new bg color */
    backdrop-filter: blur(12px); /* Increased blur */
    z-index: 100;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), visibility 0s linear 0.3s; /* Smoother transition */
    overflow-y: auto;
}

body.menu-open .overlay-menu {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), visibility 0s linear 0s;
}

body.menu-open {
    overflow: hidden;
}

.menu-close-button {
    position: absolute;
    top: 25px;
    right: 25px;
    font-size: 2.2rem; /* Larger close icon */
    font-weight: 300; /* Lighter weight for a modern feel */
    color: var(--nav-text);
    background: transparent; /* No background */
    border: none;
    cursor: pointer;
    padding: 12px;
    border-radius: 50%;
    transition: color 0.2s ease, transform 0.2s ease;
}

.menu-close-button:hover {
    color: var(--nav-hover);
    transform: rotate(90deg); /* Add a subtle rotation on hover */
}

.overlay-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.8rem; /* Increased gap */
    padding: 2rem;
}

.overlay-nav-link {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 2rem; /* Larger font size for overlay links */
    font-weight: 600; /* Bolder links */
    color: var(--nav-text);
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
    padding: 0.6rem 0;
}
.overlay-nav-link:hover {
    color: var(--nav-hover);
    text-decoration: none;
    transform: translateX(5px); /* Slight move effect on hover */
}

/* Buttons */
.button-primary {
    display: inline-block;
    padding: 12px 28px; /* Increased padding */
    background-color: #0071e3;
    color: #fff;
    font-size: 1rem; /* Relative font size */
    font-weight: 500; /* Medium weight */
    border-radius: 12px; /* Modern rounded corners */
    border: 1px solid transparent; /* Transparent border initially */
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Subtle shadow */
}
.button-primary:hover {
    background-color: #005bb5; /* Darker blue */
    border-color: transparent;
    text-decoration: none;
    color: #fff;
    transform: translateY(-2px); /* Slight lift */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Enhanced shadow on hover */
}
.button-primary:active {
    transform: translateY(0px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.button-secondary {
    display: inline-block;
    padding: 12px 28px; /* Increased padding */
    background-color: transparent;
    color: #0071e3;
    font-size: 1rem; /* Relative font size */
    font-weight: 500; /* Medium weight */
    border-radius: 12px; /* Modern rounded corners */
    border: 1px solid #c0c0c5; /* Lighter border */
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    text-decoration: none;
}
.button-secondary:hover {
    background-color: rgba(0, 113, 227, 0.05); /* Lighter hover background */
    border-color: #0071e3;
    color: #005bb5; /* Darker blue on hover */
    text-decoration: none;
    transform: translateY(-2px); /* Slight lift */
    box-shadow: 0 4px 8px rgba(0,0,0,0.05); /* Subtle shadow on hover */
}
.button-secondary:active {
    transform: translateY(0px);
    box-shadow: none;
}


/* Layout & Sections - Apple Style */

section {
    position: relative;
    background: var(--bg-primary);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Section Padding - Apple Inspired */
section#home {
    padding-top: 160px;
    padding-bottom: 120px;
}

/* Home Section Spacing */
#home h2 {
    margin-bottom: 2rem;
    animation-delay: 1s;
}
#home h1 {
    margin-bottom: 1.5rem;
    animation-delay: 1.5s;
}
#home p {
    margin-bottom: 2.5rem;
    animation-delay: 2.5s;
}

section#about {
    padding-top: 120px;
    padding-bottom: 120px;
}

section#skills {
    padding-top: 120px;
    padding-bottom: 120px;
}

section#projects {
    padding-top: 120px;
    padding-bottom: 120px;
}

section#education {
    padding-top: 120px;
    padding-bottom: 120px;
}

section#publications {
    padding-top: 120px;
    padding-bottom: 120px;
}

section#awards {
    padding-top: 120px;
    padding-bottom: 120px;
}

section#certifications {
    padding-top: 120px;
    padding-bottom: 120px;
}

section#contact {
    padding-top: 120px;
    padding-bottom: 120px;
}

/* Container Utility - Apple Style */
.container-fluid {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 22px;
}

.container {
    width: 100%;
    max-width: 950px;
    margin: 0 auto;
    padding: 0 22px;
}

@media (min-width: 834px) {
    .container-fluid, .container {
        padding: 0 44px;
    }
}

@media (min-width: 1024px) {
    .container-fluid, .container {
        padding: 0 68px;
    }
}

@media (min-width: 1400px) {
    .container {
        padding: 0 110px;
    }
}

/* Grid Systems - Apple Style */

.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 -11px;
}

.col-12 {
    flex: 0 0 100%;
    width: 100%;
    padding: 0 11px;
}

.col-lg-6 {
    flex: 0 0 50%;
    width: 50%;
    padding: 0 11px;
}

.col-lg-4 {
    flex: 0 0 33.3333%;
    width: 33.3333%;
    padding: 0 11px;
}

@media (max-width: 833px) {
    .row {
        margin: 0;
    }
    .col-12, .col-lg-6, .col-lg-4 {
        flex: 0 0 100%;
        width: 100%;
        padding: 0;
    }
}

/* Navigation - Apple.com Style */
.global-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 44px;
    padding: 0 22px;
    background: var(--nav-bg);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--nav-border);
    color: var(--nav-text);
    box-shadow: inset 0 -1px 0 var(--nav-border);
    z-index: 1000;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.nav-container {
    max-width: 1024px;
    height: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 32px;
}

.nav-left,
.nav-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.nav-actions {
    justify-content: flex-end;
}

.nav-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.nav-logo img {
    height: 22px;
    width: auto;
    display: block;
}

.nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 28px;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.015em;
    width: 100%;
}

.nav-link {
    position: relative;
    color: var(--nav-text);
    text-decoration: none;
    transition: color 0.2s ease;
    padding: 4px 2px;
    white-space: nowrap;
}

.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0;
    height: 1px;
    background-color: var(--nav-hover);
    transition: width 0.2s ease;
}

.nav-link:hover,
.nav-link:focus-visible {
    color: var(--nav-hover);
}

.nav-link:hover::after,
.nav-link:focus-visible::after {
    width: 100%;
}

.nav-link:focus-visible {
    outline: none;
}

.theme-toggle-nav {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--nav-border);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    font-size: 14px;
    color: var(--nav-text);
    opacity: 0.85;
}

.theme-toggle-nav:hover,
.theme-toggle-nav:focus-visible {
    background: var(--nav-icon-hover-bg);
    border-color: var(--nav-hover);
    transform: scale(1.05);
    color: var(--nav-hover);
    opacity: 1;
    outline: none;
}

.theme-toggle-nav i {
    font-size: 14px;
    color: currentColor;
}

.menu-toggle-button {
    display: none;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: transparent;
    border: none;
    color: var(--nav-text);
    cursor: pointer;
    padding: 0.35rem 0.5rem;
    transition: color 0.2s ease;
}

.menu-toggle-button:hover,
.menu-toggle-button:focus-visible {
    color: var(--nav-hover);
    outline: none;
}

.menu-toggle-button:focus-visible .menu-icon,
.menu-toggle-button:hover .menu-icon {
    background-color: currentColor;
}

.menu-toggle-button:focus-visible .menu-icon::before,
.menu-toggle-button:hover .menu-icon::before,
.menu-toggle-button:focus-visible .menu-icon::after,
.menu-toggle-button:hover .menu-icon::after {
    background-color: currentColor;
}

.menu-icon {
    position: relative;
    width: 16px;
    height: 2px;
    background-color: currentColor;
    border-radius: 999px;
    display: block;
}

.menu-icon::before,
.menu-icon::after {
    content: "";
    position: absolute;
    left: 0;
    width: 16px;
    height: 2px;
    background-color: currentColor;
    border-radius: 999px;
}

.menu-icon::before {
    top: -5px;
}

.menu-icon::after {
    top: 5px;
}

.menu-label {
    display: inline-block;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 1200px) {
    .nav-container {
        gap: 24px;
    }
    .nav-links {
        gap: 24px;
    }
}

@media (max-width: 1024px) {
    .nav-container {
        gap: 16px;
    }
    .nav-links {
        display: none;
    }
    .menu-toggle-button {
        display: inline-flex;
    }
}

@media (max-width: 768px) {
    .global-nav {
        padding: 0 16px;
    }
}

/* Chatbot UI Styles */
#chat-toggle {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 1000;
    transition: transform 0.3s ease;
}
#chat-toggle:hover {
    transform: scale(1.1);
}

#chat-widget {
    position: fixed;
    bottom: 6rem;
    right: 2rem;
    width: 90%;
    max-width: 28rem; /* 448px */
    max-height: 70vh;
    z-index: 1000;
    opacity: 0;
    transform: translateY(2rem);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

#chat-widget.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}


#chat-widget .chat-header h3 {
    margin-bottom: 0; /* Override default h3 margin */
}

#chat-messages {
    scrollbar-width: thin;
    scrollbar-color: #9ca3af #e5e7eb;
}

#chat-messages::-webkit-scrollbar {
    width: 8px;
}

#chat-messages::-webkit-scrollbar-track {
    background: #e5e7eb;
}

#chat-messages::-webkit-scrollbar-thumb {
    background-color: #9ca3af;
    border-radius: 10px;
    border: 2px solid #e5e7eb;
}

.message-bubble {
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    max-width: 80%;
    word-wrap: break-word;
}

.message-bubble.user {
    background-color: #d1d5db; /* gray-300 */
    color: #1f2937; /* gray-800 */
    border-bottom-right-radius: 0.25rem;
    margin-left: auto;
}

.message-bubble.bot {
    background-color: #3b82f6; /* blue-500 */
    color: white;
    border-bottom-left-radius: 0.25rem;
}

#chat-input {
    transition: all 0.2s ease-in-out;
}

#chat-send {
    transition: background-color 0.2s ease-in-out;
}
#chat-send:hover i {
    transform: scale(1.1);
}


/* Responsive adjustments for chat widget */
@media (max-width: 500px) { /* max-w-md is 32rem = 512px, so this is for smaller than typical "md" */
    #chat-widget {
        right: 5%;
        width: 90%;
    }
}
section h2 {
    font-size: 2.8rem; /* Matches h2 definition */
    letter-spacing: -0.02em;
    margin-bottom: 4.5rem; /* More space below section titles */
    text-align: center;
}

/* Projects Grid - Enhanced Apple-inspired Design with Superior Light Mode Visibility */
.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2.5rem;
    margin-top: 4rem;
    padding: 0 1rem;
}

.project-card {
    background: var(--project-card-bg);
    border: 1px solid var(--project-card-border);
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: var(--project-card-shadow);
    transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
    position: relative;
    overflow: hidden;
    color: var(--project-card-text);
}

.project-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #0071e3, #2997ff, #5ac8fa);
    border-radius: 20px 20px 0 0;
}

.project-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--project-card-hover-shadow);
    border-color: var(--project-card-border);
}

.project-card:hover::after {
    opacity: 1;
}

.project-card h3 {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.025em;
    margin-bottom: 1.25rem;
    color: inherit;
    transition: color 0.3s ease;
}

.project-card h3:hover {
    color: var(--text-accent);
}

.project-card p {
    font-size: 1rem;
    line-height: 1.65;
    margin-bottom: 1.75rem;
    color: var(--text-secondary);
    font-weight: 400;
}

/* Project Tags - Enhanced Visibility and Contrast */
.project-card .project-tags {
    margin-bottom: 2rem;
}

.project-card .project-tags .tag {
    background: var(--project-card-tag-bg);
    color: var(--project-card-tag-text);
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    border: 1px solid var(--project-card-link-border);
    transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    box-shadow: 0 1px 3px rgba(0, 113, 227, 0.05);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.project-card .project-tags .tag:hover {
    background: var(--project-card-link-hover-bg);
    color: var(--project-card-link-hover-text);
    transform: translateY(-2px);
    box-shadow: var(--project-card-link-hover-shadow);
}

/* Override for maximum light mode visibility - solid black text */
.project-card .project-tags .tag,
.project-card .project-tags .tag[class*="text-accent"],
.project-card .project-tags .text-accent.text-xs.rounded {
    color: var(--text-primary) !important;
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

/* Preserve Apple-style navigation appearance in dark mode */
html.dark .global-nav,
html.dark .global-nav * {
    color: var(--nav-text) !important;
}

html.dark .global-nav .nav-link::after {
    background-color: var(--nav-hover);
}

html.dark .global-nav .nav-link:hover,
html.dark .global-nav .nav-link:focus-visible {
    color: var(--nav-hover) !important;
}

html.dark .global-nav .theme-toggle-nav {
    border-color: var(--nav-border);
    color: var(--nav-text) !important;
}

html.dark .global-nav .theme-toggle-nav:hover,
html.dark .global-nav .theme-toggle-nav:focus-visible {
    border-color: var(--nav-hover);
    background: var(--nav-icon-hover-bg);
}

html.dark .global-nav .theme-toggle-nav i {
    color: currentColor !important;
}

/* JavaScript override protection - catches the specific querySelector */
.text-accent,
.text-xs {
    color: var(--text-accent) !important;
}

/* Colorful project card links - blue by default and on hover */
.project-card .row a,
.project-card a.text-accent {
    color: var(--text-accent) !important;
    font-weight: 600;
    text-decoration: none; /* Clean look without underlines */
    transition: all 0.3s ease;
}

.project-card .row a:hover,
.project-card a.text-accent:hover {
    color: var(--text-accent) !important;
    opacity: 0.8; /* Subtle visual feedback */
    transform: translateY(-1px); /* Subtle lift effect */
}

/* Project Action Links - View Project, Live Demo */
.project-card .row {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.project-card .row .col-lg-6 {
    flex: 0 0 auto;
    width: auto;
    padding: 0;
}

.project-card .row a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--project-card-link-bg);
    color: var(--project-card-link-text);
    border-radius: 12px;
    border: 1px solid var(--project-card-link-border);
    transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    white-space: nowrap;
}

.project-card .row a:hover {
    background: var(--project-card-link-hover-bg);
    color: var(--project-card-link-hover-text);
    transform: translateY(-2px);
    box-shadow: var(--project-card-link-hover-shadow);
    border-color: var(--project-card-link-hover-bg);
}

.project-card .row a i {
    font-size: 0.85rem;
    color: inherit;
}

.project-card .row a::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 4px solid currentColor;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
    margin-left: 0.25rem;
}

.project-card a.text-accent {
    color: var(--project-card-link-text);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.project-card a.text-accent:hover {
    color: var(--project-card-link-hover-text);
    background-color: var(--project-card-link-hover-bg);
}

/* GitHub and Globe icons on links - ensure visibility */
.project-card a.text-accent i {
    color: inherit;
    margin-right: 0.25rem;
}


/* Experience/Education Lists */
.timeline-item {
    position: relative;
    border-left: 3px solid #d0d0d5; /* Slightly thicker border */
    padding-left: 2rem; /* Increased padding */
}
.timeline-item > div {
    background-color: var(--bg-primary);
    padding: 2rem;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    border: 1px solid var(--border-color);
}
.timeline-item h3 {
    font-size: 1.4rem;
    color: var(--text-primary);
}
.timeline-item h4 {
    font-size: 1.05rem;
    color: var(--text-primary);
    margin-bottom: 0.8rem;
}
.timeline-item ul {
    font-size: 0.95rem;
    color: var(--text-secondary);
    list-style-position: outside;
    padding-left: 1.2rem;
}
.timeline-item ul li {
    margin-bottom: 0.3rem;
}
.timeline-item .date-badge {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    background-color: var(--bg-secondary);
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
}

/* Contact Section */
#contact .row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: clamp(1.5rem, 3vw, 2.75rem);
    margin: 0;
}

#contact .col-lg-6 {
    width: 100%;
    padding: 0;
    flex: none;
}

.contact-card,
.contact-form-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 1.75rem;
    padding: clamp(1.75rem, 2.5vw, 2.5rem);
    box-shadow: var(--shadow-light, 0 10px 20px rgba(0, 0, 0, 0.08));
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.contact-card h3,
.contact-form-card h3 {
    font-size: clamp(1.5rem, 2vw, 1.75rem);
    margin: 0;
}

.contact-card h4 {
    color: var(--text-secondary);
}

.contact-form {
    display: grid;
    gap: 1.25rem;
}

.contact-form-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.contact-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.contact-input {
    width: 100%;
    padding: 0.9rem 1.1rem;
    border-radius: 0.9rem;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 1rem;
    line-height: 1.5;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.contact-input:focus {
    border-color: var(--text-accent);
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.12);
    outline: none;
}

.contact-textarea {
    min-height: 160px;
    resize: vertical;
}

.contact-submit {
    width: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-top: 0.5rem;
}

@media (min-width: 640px) {
    .contact-submit {
        width: auto;
        justify-self: end;
        padding-inline: clamp(1.5rem, 2vw, 2.5rem);
    }
}

.contact-social-links {
    margin-top: 2.5rem; /* Increased margin */
    display: flex;
    gap: 1.8rem; /* Increased gap */
    align-items: center;
}
.contact-social-links a {
    color: #555558; /* Softer icon color */
    font-size: 1.4rem; /* Larger icons */
    transition: color 0.2s ease, transform 0.2s ease;
}
.contact-social-links a:hover {
    color: #0071e3; /* Primary blue on hover */
    transform: scale(1.1); /* Slight scale effect */
}
.contact-social-links img {
    width: 22px; /* Slightly larger image icons */
    height: 22px;
    object-fit: contain;
    filter: grayscale(30%) contrast(90%); /* Less aggressive filter */
    opacity: 0.8;
    transition: filter 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
    vertical-align: middle;
}
.contact-social-links a:hover img {
    filter: grayscale(0%) contrast(100%);
    opacity: 1;
    transform: scale(1.1); /* Slight scale effect */
}


/* Footer - Professional Design with Clean Color Scheme */
footer {
    background: linear-gradient(180deg, var(--footer-bg) 0%, #0c0c0f 100%);
    color: var(--footer-text); /* High contrast text on black */
    border-top: 1px solid var(--footer-border); /* Subtle edge highlight */
    padding-top: 2.5rem; /* Comfortable padding */
    padding-bottom: 2.5rem;
}
footer a {
    color: var(--footer-link); /* Soft silver link color */
    transition: color 0.2s ease;
}
footer a:hover {
    color: var(--footer-link-hover); /* Apple accent blue on hover */
    text-decoration: none;
}
footer .fab, footer .fas {
     font-size: 1.4rem;
     color: currentColor;
     transition: color 0.2s ease, transform 0.2s ease;
}
footer a:hover .fab, footer a:hover .fas {
    transform: scale(1.1);
}
footer img {
    width: 22px;
    height: 22px;
    filter: none;
    opacity: 1;
    transition: filter 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
    vertical-align: middle;
}
footer a:hover img {
    filter: none;
    opacity: 0.85;
    transform: scale(1.1);
 }

/* CONTACT & FOOTER - ORIGINAL BRAND COLORFUL ICONS */

/* Contact Section Follow Me - Original Brand Colors */
.contact-social-links .fa-brands.fa-facebook,
.contact-social-links .fa-brands.fa-facebook-f,
.contact-social-links a[href*="facebook.com"] i.fa-brands,
.contact-social-links a[href*="facebook.com"] .fa-brands.fa-facebook {
    color: #1877f2 !important; /* Original Facebook Blue */
    font-weight: 400;
}
.contact-social-links .fa-brands.fa-instagram,
.contact-social-links a[href*="instagram.com"] i.fa-brands {
    color: #e4405f !important; /* Original Instagram Pink */
    font-weight: 400;
}
.contact-social-links .fa-brands.fa-linkedin,
.contact-social-links .fa-brands.fa-linkedin-in,
.contact-social-links a[href*="linkedin.com"] i.fa-brands {
    color: #0077b5 !important; /* Original LinkedIn Blue */
    font-weight: 400;
}
.contact-social-links .fa-brands.fa-github,
.contact-social-links a[href*="github.com"] i.fa-brands {
    color: #181717 !important; /* Original GitHub Dark */
    font-weight: 400;
}
.contact-social-links .fa-brands.fa-youtube,
.contact-social-links a[href*="youtube.com"] i.fa-brands {
    color: #ff0000 !important; /* Original YouTube Red */
    font-weight: 400;
}
.contact-social-links .fa-brands.fa-x-twitter,
.contact-social-links .fa-brands.fa-twitter,
.contact-social-links a[href*="x.com"] i.fa-brands,
.contact-social-links a[href*="twitter.com"] i.fa-brands {
    color: #000000 !important; /* Original Twitter/X Black */
    font-weight: 400;
}
.contact-social-links .fa-solid.fa-globe,
.contact-social-links a[href*="wixsite.com"] i.fa-solid,
.contact-social-links a[href*="portfolio"] .fa-solid.fa-globe {
    color: #0077b5 !important; /* LinkedIn Blue for Web Links */
    font-weight: 900;
}
.contact-social-links .fa-solid.fa-code,
.contact-social-links a[href*="leetcode.com"] i.fa-solid {
    color: #61dafb !important; /* React Blue for LeetCode */
    font-weight: 900;
}

/* Footer - Original Brand Colors (matching Contact Section) */
footer i.fa-brands.fa-facebook,
footer i.fa-brands.fa-facebook-f,
footer a[href*="facebook.com"] i.fa-brands {
    color: #0a84ff !important; /* Bright Facebook blue for dark background */
    font-weight: 400;
}
footer i.fa-brands.fa-instagram,
footer a[href*="instagram.com"] i.fa-brands {
    color: #ff375f !important; /* Vibrant Instagram pink */
    font-weight: 400;
}
footer i.fa-brands.fa-linkedin,
footer i.fa-brands.fa-linkedin-in,
footer a[href*="linkedin.com"] i.fa-brands {
    color: #0a66c2 !important; /* LinkedIn primary blue */
    font-weight: 400;
}
footer i.fa-brands.fa-github,
footer a[href*="github.com"] i.fa-brands {
    color: #f5f5f7 !important; /* Light GitHub mark for visibility */
    font-weight: 400;
}
footer i.fa-brands.fa-youtube,
footer a[href*="youtube.com"] i.fa-brands {
    color: #ff0000 !important; /* Original YouTube Red */
    font-weight: 400;
}
footer i.fa-brands.fa-x-twitter,
footer i.fa-brands.fa-twitter,
footer a[href*="x.com"] i.fa-brands,
footer a[href*="twitter.com"] i.fa-brands {
    color: #1da1f2 !important; /* Twitter airy blue */
    font-weight: 400;
}
footer i.fa-solid.fa-globe,
footer a[href*="wixsite.com"] .fa-solid.fa-globe {
    color: #5ac8fa !important; /* Aqua blue accent */
    font-weight: 900;
}
footer i.fa-solid.fa-code,
footer a[href*="leetcode.com"] .fa-solid.fa-code {
    color: #61dafb !important; /* React Blue for LeetCode */
    font-weight: 900;
}


/* Animation */
.apple-reveal,
[data-animate],
.fade-in {
    --reveal-x: 0px;
    --reveal-y: 32px;
    --reveal-rotate: 0deg;
    --reveal-scale: 0.98;
    --reveal-filter: blur(16px);
    --parallax-offset: 0%;
    transition:
        transform var(--animate-duration, 900ms) var(--animate-easing, cubic-bezier(0.25, 0.1, 0.25, 1)),
        opacity var(--animate-duration, 900ms) var(--animate-easing, cubic-bezier(0.25, 0.1, 0.25, 1)),
        filter var(--animate-duration, 900ms) var(--animate-easing, cubic-bezier(0.25, 0.1, 0.25, 1));
    will-change: transform, opacity, filter;
}

.apple-reveal.is-queued,
[data-animate].is-queued,
.fade-in.is-queued {
    opacity: 0;
    transform: translate3d(var(--reveal-x), calc(var(--reveal-y) + var(--parallax-offset, 0%)), 0) rotate(var(--reveal-rotate)) scale(var(--reveal-scale));
    filter: var(--reveal-filter);
}

.apple-reveal.is-visible,
[data-animate].is-visible,
.fade-in.is-visible {
    opacity: 1;
    transform: translate3d(0, var(--parallax-offset, 0%), 0) rotate(0deg) scale(1);
    filter: blur(0px);
}

.apple-reveal.is-visible[data-animate="zoom-in"],
[data-animate="zoom-in"].is-visible {
    transform: translate3d(0, var(--parallax-offset, 0%), 0) scale(1.01);
}

.apple-reveal.is-visible[data-animate="tilt-in"],
[data-animate="tilt-in"].is-visible {
    transform: translate3d(0, var(--parallax-offset, 0%), 0) rotate(0deg) scale(1);
}

[data-animate="fade-up"] {
    --reveal-y: 40px;
}

[data-animate="fade-down"] {
    --reveal-y: -40px;
}

[data-animate="fade-left"] {
    --reveal-x: 48px;
    --reveal-y: 0px;
}

[data-animate="fade-right"] {
    --reveal-x: -48px;
    --reveal-y: 0px;
}

[data-animate="zoom-in"] {
    --reveal-scale: 0.85;
    --reveal-filter: blur(22px);
}

[data-animate="blur-up"] {
    --reveal-y: 48px;
    --reveal-filter: blur(28px);
}

[data-animate="tilt-in"] {
    --reveal-y: 32px;
    --reveal-rotate: -4deg;
    --reveal-scale: 0.94;
}

[data-animate][data-animate-delay] {
    transition-delay: var(--animate-delay, 120ms);
}

[data-animate][data-animate-duration] {
    transition-duration: var(--animate-duration, 900ms);
}

[data-animate-parallax] {
    will-change: transform;
}

.is-visible[data-animate-parallax] {
    transform: translate3d(0, var(--parallax-offset, 0%), 0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
    .apple-reveal,
    [data-animate],
    .fade-in {
        transition: none !important;
    }
    .apple-reveal.is-queued,
    [data-animate].is-queued,
    .fade-in.is-queued {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}

/* Typewriter Effect for Software Engineer */
.typewriter {
    overflow: hidden;
    border-right: 2px solid var(--text-primary);
    white-space: nowrap;
    animation: typing 3.5s steps(17, end) 1.5s both, blink-caret 0.75s step-end infinite;
}

@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes blink-caret {
    from, to {
        border-color: var(--text-primary);
    }
    50% {
        border-color: transparent;
    }
}

/* Profile Image Hover Effect */
#home img {
    filter: grayscale(10%) contrast(1.1);
    transition: all 0.5s ease;
}

#home img:hover {
    transform: scale(1.05);
    filter: grayscale(0%) contrast(1.2);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* Subtle Gradient Background for Home */
#home {
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    background-attachment: fixed;
}

/* Responsive adjustments for smaller screens if needed */
@media (max-width: 768px) {
    h1 { font-size: 2.8rem; }
    h2 { font-size: 2.2rem; }
    h3 { font-size: 1.5rem; }

    .project-card h3 {
        font-size: 1.25rem;
    }
    .project-card p {
        font-size: 0.95rem;
    }

    .overlay-nav-link {
        font-size: 1.8rem; /* Adjust for smaller screens */
    }

    .contact-input {
        padding: 12px 16px; /* Adjust padding for smaller screens */
    }
    .contact-card,
    .contact-form-card {
        padding: 1.5rem;
        border-radius: 1.5rem;
    }
}

@media (max-width: 599px) {
    #contact .row {
        grid-template-columns: 1fr;
    }
    .contact-form-grid {
        grid-template-columns: 1fr;
    }
    .contact-submit {
        width: 100%;
    }
}

/* ===== LIGHT/DARK MODE REFINEMENT ===== */

/* Light Mode Overrides - Ensure Proper Solid Colors */
section#home,
section#skills,
section#projects,
section#publications,
section#certifications {
    background: var(--bg-primary);
}

section#about,
section#experience,
section#education,
section#awards,
section#contact {
    background: var(--bg-secondary);
}

/* Footer - Enhanced Light/Dark Mode */
html.dark footer {
    background: linear-gradient(180deg, #000000 0%, #0c0c0f 100%);
    color: #f5f5f7;
    border-top-color: rgba(255, 255, 255, 0.08);
}

html.dark footer a {
    color: #d2d2d7;
}

html.dark footer a:hover {
    color: #5ac8fa;
}

/* Additional Light Mode Safety Overrides */
section:hover {
    background: inherit; /* Prevent interference */
}

/* Ensure theme consistency on page load */
html {
    transition: background-color 0.3s ease, color 0.3s ease;
}

body {
    transition: all 0.3s ease;
}

/* Image Visibility in Both Modes */
.education-card img,
.timeline-item img,
.contact-social-links img {
    opacity: 1;
    visibility: visible;
}

html.dark .education-card img,
html.dark .timeline-item img,
html.dark .contact-social-links img {
    opacity: 0.9;
    filter: brightness(1.1) contrast(1.05);
}

/* Final Section Refinement */
/* ===== END OF LIGHT/DARK MODE ENHANCEMENTS ===== */

/* Dark Mode Project Cards - Professional Design */
html.dark .project-card {
    background: var(--project-card-bg);
    border-color: var(--project-card-border);
    box-shadow: var(--project-card-shadow);
}

html.dark .project-card:hover {
    border-color: var(--project-card-border);
    box-shadow: var(--project-card-hover-shadow);
    transform: translateY(-8px);
}

html.dark .project-card h3 {
    color: var(--text-primary);
}

html.dark .project-card p {
    color: var(--text-secondary);
}

html.dark .project-card .project-tags .tag {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
}

html.dark .project-card .project-tags .tag:hover {
    background: var(--text-accent) !important;
    color: var(--color-white) !important;
}

html.dark .project-card .row a,
html.dark .project-card a.text-accent {
    color: var(--text-accent) !important;
    border-color: rgba(41, 151, 255, 0.35) !important;
}

html.dark .project-card .row a:hover,
html.dark .project-card a.text-accent:hover {
    color: color-mix(in srgb, var(--text-accent) 80%, white 20%) !important;
    opacity: 0.9;
    border-color: rgba(90, 200, 250, 0.45) !important;
}

/* ===== MOBILE & RESPONSIVE DESIGN - iOS/Android/Tablet Compatible ===== */

/* ===== MOBILE VIEWPORT & BASE SETUP ===== */
/* Mobile-first approach - optimize for mobile, enhance for desktop */
@media (max-width: 767px) {
    html {
        font-size: 14px; /* Smaller base font for mobile */
    }

    body {
        font-size: 14px;
        line-height: 1.4;
    }

    /* Mobile Navigation */
    .global-nav {
        height: 48px; /* Smaller on mobile */
        padding: 0 16px;
    }

    .nav-container {
        height: 100%;
        gap: 12px; /* Tighter spacing */
    }

    .nav-logo img {
        height: 20px;
        width: auto;
    }

    .nav-links {
        display: none !important; /* Hide desktop nav on mobile */
    }

    .nav-left {
        gap: 12px;
    }

    .theme-toggle-nav {
        width: 28px;
        height: 28px;
    }

    .theme-toggle-nav i {
        font-size: 12px;
    }

    /* Mobile Touch-Friendly Elements */
    .theme-toggle-nav,
    button,
    .btn,
    a[role="button"] {
        min-height: 44px; /* Apple recommended minimum */
        min-width: 44px;
    }

    /* Mobile Typography */
    h1 {
        font-size: 2.5rem; /* Base: 40px on mobile */
        line-height: 1.1;
    }

    h2 {
        font-size: 1.75rem; /* Base: 28px on mobile */
        letter-spacing: -0.02em;
        margin-bottom: 2rem;
    }

    h3 {
        font-size: 1.5rem;
        line-height: 1.2;
    }

    h4 {
        font-size: 1.25rem;
        line-height: 1.3;
    }

    p {
        font-size: 1rem;
        line-height: 1.5;
    }

    /* Mobile Sections */
    section {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    #home {
        padding-top: 4rem;
        padding-bottom: 3rem;
    }

    /* Mobile Container */
    .container,
    .container-fluid {
        padding: 0 1rem;
    }

    /* Home Section Mobile */
    .home-element {
        opacity: 0; /* Remove fading for better mobile performance */
    }

    #home .mb-12.home-element {
        margin-bottom: 2rem;
    }

    #home h1 {
        font-size: 2.8rem;
        margin-bottom: 1rem;
    }

    #home h2 {
        font-size: 2.2rem;
        margin-bottom: 1.5rem;
    }

    #home p {
        font-size: 1.125rem;
        margin-bottom: 1.5rem;
        max-width: none; /* Remove restrictive width on mobile */
    }

    /* Mobile Profile Image */
    #home img {
        width: 200px;
        height: 200px;
        filter: none; /* Remove filters for better mobile performance */
        transition: none; /* Remove transitions */
    }

    #home img:hover {
        transform: none;
        filter: none;
        box-shadow: none;
    }

    /* Mobile Buttons */
    .btn,
    .btn-secondary {
        font-size: 1rem;
        padding: 0.75rem 1.5rem;
        width: 100%; /* Full width on mobile */
        margin-bottom: 1rem;
    }

    .btn-secondary {
        display: inline-block;
        width: auto;
        margin-bottom: 0;
    }

    /* Mobile Cards */
    .education-card,
    .project-card,
    .timeline-item > div {
        padding: 1.5rem;
        margin-bottom: 1rem;
        border-radius: 16px;
    }

    /* Mobile Project Grid */
    .project-grid {
        grid-template-columns: 1fr; /* Single column */
        gap: 1.5rem;
        padding: 0;
    }

    /* Contact Form Layout */
    .contact-input {
        font-size: 16px; /* Prevent zoom on iOS */
        padding: 12px 16px;
    }

    .contact-card,
    .contact-form-card {
        margin-bottom: 2rem;
    }

    .contact-form {
        gap: 1rem;
    }

    /* Mobile Footer */
    footer {
        padding-top: 2rem;
        padding-bottom: 2rem;
        text-align: center;
    }

    footer .flex.space-x-6 {
        justify-content: center;
        gap: 1.5rem;
    }

    /* Mobile Social Links */
    .contact-social-links {
        justify-content: center;
        gap: 1.5rem;
    }

    .contact-social-links a {
        font-size: 1.2rem;
    }

    /* Hide overlay menu on mobile */
    .menu-toggle-button {
        display: none;
    }

    /* Mobile-specific scrollbar */
    ::-webkit-scrollbar {
        width: 4px;
    }

    ::-webkit-scrollbar-track {
        background: transparent;
    }

    ::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.2);
        border-radius: 2px;
    }

    html.dark ::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.2);
    }
}

/* ===== TABLET DESIGN ===== */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Tablet-specific styles */
    .container,
    .container-fluid {
        padding: 0 2rem;
    }

    .global-nav {
        height: 52px;
        padding: 0 24px;
    }

    .nav-links {
        display: none !important; /* Still hide on tablets to save space */
    }

    h1 {
        font-size: 3.5rem;
    }

    h2 {
        font-size: 2.25rem;
    }

    .project-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
        gap: 2rem;
    }

}

/* ===== DESKTOP ENHANCEMENTS ===== */
@media (min-width: 1024px) {
    /* Desktop navigation - show full nav */
    .nav-links {
        display: flex !important;
    }

    .project-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Enhanced hover effects on desktop only */
    .project-card {
        transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

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

/* ===== iOS SPECIFIC OPTIMIZATIONS ===== */
/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
    /* iOS Safari touch targets */
    button,
    .btn,
    input,
    textarea,
    select,
    a[role="button"] {
        -webkit-appearance: none;
        appearance: none;
        -webkit-tap-highlight-color: rgba(0, 113, 227, 0.1);
        -webkit-user-select: text;
        user-select: text;
    }

    /* iOS Safari input fixes */
    input:focus,
    textarea:focus {
        -webkit-user-select: text;
        user-select: text;
        -webkit-appearance: none;
        appearance: none;
    }

    /* iOS Safari animation performance */
    .fade-in {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
}

/* ===== ANDROID SPECIFIC OPTIMIZATIONS ===== */
/* Android Chrome specific fixes */
@supports not (-webkit-touch-callout: none) {
    /* Android Chrome touch improvements */
    * {
        -webkit-tap-highlight-color: rgba(0, 113, 227, 0.1);
    }

    /* Android Chrome scrollbar */
    ::-webkit-scrollbar {
        width: 6px;
    }

    ::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.3);
        border-radius: 3px;
    }

    html.dark ::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.3);
    }
}

/* ===== HIGH RESOLUTION DISPLAYS ===== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Retina display optimizations */
    .nav-logo img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }

    /* Smooth fonts on high DPI */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }
}

/* ===== ACCESSIBILITY ENHANCEMENTS ===== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .fade-in {
        opacity: 1 !important;
        transform: none !important;
    }

    .typing span {
        animation: none;
    }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
/* Reduce complexity on mobile for better performance */
@media (max-width: 767px) {
    /* Disable heavy shadows on mobile */
    .project-card,
    .education-card,
    .timeline-item > div {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    html.dark .project-card,
    html.dark .education-card,
    html.dark .timeline-item > div {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    /* Simplify animations */
    .btn:hover {
        transform: none;
    }

    /* Disable complex filters on mobile */
    .contact-social-links img {
        filter: none;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .global-nav,
    .theme-toggle-nav,
    footer {
        display: none !important;
    }

    body {
        font-size: 12pt;
        line-height: 1.4;
    }

    .container {
        max-width: none;
        margin: 0;
        padding: 0;
    }

    .education-card,
    .project-card {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

/* ===== SKILLS & TECHNOLOGIES ICONS IN DARK MODE - ORIGINAL COLORS ===== */

/* Programming Languages - Perfect Brand Colors */
.fa-solid.fa-code, .fas.fa-code {
    color: hsl(199, 100%, 55%) !important; /* React blue for general coding */
    font-weight: 900;
}

/* JavaScript & TypeScript - Official Colors */
.fa-brands.fa-js, .fa-brands.fa-square-js, .fab.fa-js, .fab.fa-js-square {
    color: hsl(54, 91%, 58%) !important; /* JavaScript yellow */
    font-weight: 400;
    background: linear-gradient(45deg, hsl(54, 91%, 58%), hsl(0, 0%, 80%)); /* Gradient for 3D effect */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.fa-brands.fa-node-js, .fab.fa-node-js {
    color: hsl(118, 48%, 43%) !important; /* Node.js green */
    font-weight: 400;
}

.fa-brands.fa-react, .fab.fa-react {
    color: hsl(199, 100%, 55%) !important; /* React blue */
    font-weight: 400;
}

/* Frameworks & Libraries */
.fa-brands.fa-java, .fab.fa-java {
    color: hsl(12, 85%, 52%) !important; /* Java red */
    font-weight: 400;
}

.fa-brands.fa-spring, .fab.fa-spring {
    color: hsl(99, 43%, 47%) !important; /* Spring green */
    font-weight: 400;
}

.fa-brands.fa-angular, .fab.fa-angular {
    color: hsl(0, 84%, 60%) !important; /* Angular red */
    font-weight: 400;
}

.fa-solid.fa-brain, .fas.fa-brain {
    color: hsl(259, 100%, 70%) !important; /* Purple for AI/ML */
    font-weight: 900;
    animation: brainPulse 2s infinite;
}

.fa-solid.fa-robot, .fas.fa-robot {
    color: hsl(188, 100%, 50%) !important; /* Cyan for robotics/AI */
    font-weight: 900;
}

/* Cloud & DevOps - Precise Brand Colors */
.fa-brands.fa-aws, .fab.fa-aws {
    color: hsl(32, 100%, 50%) !important; /* AWS orange */
    font-weight: 400;
}

.fa-brands.fa-docker, .fab.fa-docker {
    color: hsl(203, 87%, 53%) !important; /* Docker blue */
    font-weight: 400;
}

.fa-brands.fa-jenkins, .fab.fa-jenkins {
    color: hsl(5, 76%, 45%) !important; /* Jenkins red */
    font-weight: 400;
}

/* Development Tools */
.fa-solid.fa-gear, .fa-solid.fa-cogs, .fas.fa-cogs {
    color: hsl(233, 47%, 71%) !important; /* Indigo for DevOps tools */
    font-weight: 900;
    animation: spin 4s linear infinite;
}

.fa-solid.fa-code-branch, .fas.fa-code-branch {
    color: hsl(160, 84%, 39%) !important; /* Emerald for git/terraform */
    font-weight: 900;
}

.fa-brands.fa-git-alt, .fa-brands.fa-git, .fab.fa-git {
    color: hsl(15, 86%, 50%) !important; /* Git orange */
    font-weight: 400;
}

/* Databases - Perfect Colors */
.fa-solid.fa-database, .fas.fa-database {
    color: hsl(162, 84%, 39%) !important; /* Green for databases */
    font-weight: 900;
}

.fa-brands.fa-mysql, .fab.fa-mysql {
    color: hsl(204, 64%, 44%) !important; /* MySQL blue */
    font-weight: 400;
}

.fa-brands.fa-postgresql, .fab.fa-postgresql {
    color: hsl(215, 79%, 51%) !important; /* PostgreSQL blue */
    font-weight: 400;
}

.fa-brands.fa-mongodb, .fab.fa-mongodb {
    color: hsl(114, 55%, 55%) !important; /* MongoDB green */
    font-weight: 400;
}

.fa-brands.fa-redis, .fab.fa-redis {
    color: hsl(0, 71%, 51%) !important; /* Redis red */
    font-weight: 400;
}

/* Analysis & Search */
.fa-solid.fa-magnifying-glass, .fa-solid.fa-search, .fas.fa-search {
    color: hsl(220, 13%, 50%) !important; /* Cool gray */
    font-weight: 900;
}

.fa-solid.fa-network-wired, .fas.fa-network-wired {
    color: hsl(192, 95%, 51%) !important; /* Sky blue for networking */
    font-weight: 900;
}

.fa-brands.fa-microsoft, .fab.fa-microsoft {
    color: hsl(195, 100%, 47%) !important; /* Microsoft blue */
    font-weight: 400;
}

.fa-brands.fa-google, .fab.fa-google {
    color: hsl(217, 89%, 61%) !important; /* Google blue */
    font-weight: 400;
}

/* Modern Tech - Vibrant Colors */
.fa-solid.fa-leaf, .fas.fa-leaf {
    color: hsl(142, 76%, 36%) !important; /* Modern green */
    font-weight: 900;
    filter: drop-shadow(0 0 4px rgba(34, 197, 94, 0.3));
}

.fa-solid.fa-shield, .fa-solid.fa-shield-alt, .fas.fa-shield-alt {
    color: hsl(0, 71%, 51%) !important; /* Red for security */
    font-weight: 900;
    filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.2));
}

.fa-solid.fa-chart-line, .fas.fa-chart-line {
    color: hsl(38, 92%, 50%) !important; /* Amber for analytics */
    font-weight: 900;
}

/* Latest Font Awesome Features */
.fa-solid.fa-laptop-code, .fas.fa-laptop-code {
    color: hsl(259, 100%, 70%) !important; /* Purple for coding laptops */
    font-weight: 900;
}

.fa-solid.fa-server, .fas.fa-server {
    color: hsl(218, 19%, 35%) !important; /* Gray for servers */
    font-weight: 900;
}

.fa-solid.fa-cloud, .fas.fa-cloud {
    color: hsl(233, 47%, 71%) !important; /* Indigo for cloud */
    font-weight: 900;
}

.fa-solid.fa-spinner, .fas.fa-spinner {
    color: hsl(188, 100%, 50%) !important; /* Cyan for loading */
    font-weight: 900;
}

/* Certifications & Achievement Icons */
.fa-solid.fa-certificate, .fas.fa-certificate {
    color: hsl(267, 84%, 73%) !important; /* Purple for certifications */
    font-weight: 900;
}

.fa-solid.fa-trophy, .fas.fa-trophy {
    color: hsl(45, 93%, 47%) !important; /* Gold for awards */
    font-weight: 900;
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.4));
}

/* Project & Demo Links */
.fa-solid.fa-external-link-alt, .fa-solid.fa-external-link, .fas.fa-external-link {
    color: hsl(217, 91%, 60%) !important; /* Blue for external links */
    font-weight: 900;
}

.fa-solid.fa-globe, .fas.fa-globe {
    color: hsl(160, 84%, 39%) !important; /* Emerald for web/live demo */
    font-weight: 900;
}

.fa-brands.fa-github, .fab.fa-github {
    color: hsl(0, 0%, 10%) !important; /* GitHub dark */
    font-weight: 400;
    transition: all 0.3s ease;
}

.fa-brands.fa-github:hover {
    color: hsl(0, 0%, 100%) !important; /* White on hover */
    background: linear-gradient(135deg, #6b7280, #374151);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Resume Download */
.fa-solid.fa-download, .fas.fa-download {
    color: hsl(162, 84%, 39%) !important; /* Green for download */
    font-weight: 900;
}

.fa-solid.fa-file-pdf, .fas.fa-file-pdf {
    color: hsl(0, 76%, 63%) !important; /* Red for PDF */
    font-weight: 900;
}

/* Additional Programming Languages */
.fa-solid.fa-c {
    color: hsl(207, 100%, 47%) !important;
    font-weight: 900 !important;
}

.fa-solid.fa-cpp, .fa.fa-cpp, .fas.fa-cpp {
    color: hsl(207, 100%, 47%) !important;
    font-weight: 900 !important;
}

.fa-solid.fa-cpp, .fa-solid.fa-c-plus-plus {
    color: hsl(207, 100%, 47%) !important;
    font-weight: 900;
}

.fa-brands.fa-swift, .fab.fa-swift {
    color: hsl(19, 88%, 61%) !important; /* Swift orange */
    font-weight: 400;
}

.fa-brands.fa-python {
    color: hsl(200, 52%, 45%) !important;
    font-weight: 400;
}

.fa-brands.fa-c-plus-plus, .fab.fa-c-plus-plus {
    color: hsl(207, 100%, 47%) !important;
    font-weight: 400;
}

/* FIXED C and C++ Icon Classes - Proper Font Awesome Support */
.fa.fa-c, .fas.fa-c, .fa-solid.fa-c {
    color: hsl(207, 100%, 47%) !important; /* Proper C language blue */
    font-weight: 900 !important;
}

.fa.fa-cpp, .fas.fa-cpp, .fa-solid.fa-cpp,
.fa.fa-c-plus-plus, .fas.fa-c-plus-plus, .fa-solid.fa-c-plus-plus {
    color: hsl(207, 100%, 47%) !important; /* Proper C++ language blue */
    font-weight: 900 !important;
}

/* Advanced Tech Icons */
.fa-solid.fa-layer-group, .fas.fa-layer-group {
    color: hsl(38, 92%, 50%) !important; /* Amber for layers/Deep Learning */
    font-weight: 900;
}

.fa-solid.fa-brain-circuit, .fas.fa-brain-circuit {
    color: hsl(259, 100%, 70%) !important; /* Purple for neural networks */
    font-weight: 900;
    animation: brainPulse 3s infinite;
}

.fa-solid.fa-chart-simple, .fas.fa-chart-simple {
    color: hsl(162, 84%, 39%) !important; /* Green for analytics */
    font-weight: 900;
}

/* ===== ORIGINAL ICON SYSTEM - Latest Font Awesome 6.6.0+ ===== */

/* Programming Languages - Perfect Brand Colors */
.fa-solid.fa-code, .fas.fa-code {
    color: #61dafb; /* React blue for general coding */
    font-weight: 900;
}

/* JavaScript & TypeScript - Official Colors */
.fa-brands.fa-js, .fa-brands.fa-square-js, .fab.fa-js, .fab.fa-js-square {
    color: #f7df1e; /* JavaScript yellow */
    font-weight: 400;
    background: linear-gradient(45deg, #f7df1e, #f0c); /* Gradient for 3D effect */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.fa-brands.fa-node-js, .fab.fa-node-js {
    color: #339933; /* Node.js green */
    font-weight: 400;
}

.fa-brands.fa-react, .fab.fa-react {
    color: #61dafb; /* React blue */
    font-weight: 400;
}

/* Frameworks & Libraries */
.fa-brands.fa-java, .fab.fa-java {
    color: #ee4c2c; /* Java red */
    font-weight: 400;
}

.fa-brands.fa-spring, .fab.fa-spring {
    color: #6db33f; /* Spring green */
    font-weight: 400;
}

.fa-brands.fa-angular, .fab.fa-angular {
    color: #dd0031; /* Angular red */
    font-weight: 400;
}

.fa-solid.fa-brain, .fas.fa-brain {
    color: #8b5cf6; /* Purple for AI/ML */
    font-weight: 900;
    animation: brainPulse 2s infinite;
}

.fa-solid.fa-robot, .fas.fa-robot {
    color: #06b6d4; /* Cyan for robotics/AI */
    font-weight: 900;
}

/* Cloud & DevOps - Precise Brand Colors */
.fa-brands.fa-aws, .fab.fa-aws {
    color: #ff9900; /* AWS orange */
    font-weight: 400;
}

.fa-brands.fa-docker, .fab.fa-docker {
    color: #2496ed; /* Docker blue */
    font-weight: 400;
}

.fa-brands.fa-jenkins, .fab.fa-jenkins {
    color: #d73b15; /* Jenkins red */
    font-weight: 400;
}

/* Development Tools */
.fa-solid.fa-gear, .fa-solid.fa-cogs, .fas.fa-cogs {
    color: #6366f1; /* Indigo for DevOps tools */
    font-weight: 900;
    animation: spin 4s linear infinite;
}

.fa-solid.fa-code-branch, .fas.fa-code-branch {
    color: #10b981; /* Emerald for git/terraform */
    font-weight: 900;
}

.fa-brands.fa-git-alt, .fa-brands.fa-git, .fab.fa-git {
    color: #f4511e; /* Git orange */
    font-weight: 400;
}

/* Databases - Perfect Colors */
.fa-solid.fa-database, .fas.fa-database {
    color: #059669; /* Green for databases */
    font-weight: 900;
}

.fa-brands.fa-mysql, .fab.fa-mysql {
    color: #4479a1; /* MySQL blue */
    font-weight: 400;
}

.fa-brands.fa-postgresql, .fab.fa-postgresql {
    color: #4169e1; /* PostgreSQL blue */
    font-weight: 400;
}

.fa-brands.fa-mongodb, .fab.fa-mongodb {
    color: #47a248; /* MongoDB green */
    font-weight: 400;
}

.fa-brands.fa-redis, .fab.fa-redis {
    color: #dc2626; /* Redis red */
    font-weight: 400;
}

/* Analysis & Search */
.fa-solid.fa-magnifying-glass, .fa-solid.fa-search, .fas.fa-search {
    color: #6b7280; /* Cool gray */
    font-weight: 900;
}

.fa-solid.fa-network-wired, .fas.fa-network-wired {
    color: #0ea5e9; /* Sky blue for networking */
    font-weight: 900;
}

.fa-brands.fa-microsoft, .fab.fa-microsoft {
    color: #00a4ef; /* Microsoft blue */
    font-weight: 400;
}

.fa-brands.fa-google, .fab.fa-google {
    color: #4285f4; /* Google blue */
    font-weight: 400;
}

/* Modern Tech - Vibrant Colors */
.fa-solid.fa-leaf, .fas.fa-leaf {
    color: #16a34a; /* Modern green */
    font-weight: 900;
    filter: drop-shadow(0 0 4px rgba(22, 163, 74, 0.3));
}

.fa-solid.fa-shield, .fa-solid.fa-shield-alt, .fas.fa-shield-alt {
    color: #dc2626; /* Red for security */
    font-weight: 900;
    filter: drop-shadow(0 0 6px rgba(220, 38, 38, 0.2));
}

.fa-solid.fa-chart-line, .fas.fa-chart-line {
    color: #f59e0b; /* Amber for analytics */
    font-weight: 900;
}

/* Latest Font Awesome Features */
.fa-solid.fa-laptop-code, .fas.fa-laptop-code {
    color: #8b5cf6; /* Purple for coding laptops */
    font-weight: 900;
}

.fa-solid.fa-server, .fas.fa-server {
    color: #374151; /* Gray for servers */
    font-weight: 900;
}

.fa-solid.fa-cloud, .fas.fa-cloud {
    color: #6366f1; /* Indigo for cloud */
    font-weight: 900;
}

.fa-solid.fa-spinner, .fas.fa-spinner {
    color: #06b6d4; /* Cyan for loading */
    font-weight: 900;
}

/* Certifications & Achievement Icons */
.fa-solid.fa-certificate, .fas.fa-certificate {
    color: #a855f7; /* Purple for certifications */
    font-weight: 900;
}

.fa-solid.fa-trophy, .fas.fa-trophy {
    color: #fbbf24; /* Gold for awards */
    font-weight: 900;
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.4));
}

/* Project & Demo Links */
.fa-solid.fa-external-link-alt, .fa-solid.fa-external-link, .fas.fa-external-link {
    color: #3b82f6; /* Blue for external links */
    font-weight: 900;
}

.fa-solid.fa-globe, .fas.fa-globe {
    color: #10b981; /* Emerald for web/live demo */
    font-weight: 900;
}

.fa-brands.fa-github, .fab.fa-github {
    color: #181717; /* GitHub dark */
    font-weight: 400;
    transition: all 0.3s ease;
}

.fa-brands.fa-github:hover {
    color: #ffffff; /* White on hover */
    background: linear-gradient(135deg, #6b7280, #374151);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Resume Download */
.fa-solid.fa-download, .fas.fa-download {
    color: #059669; /* Green for download */
    font-weight: 900;
}

.fa-solid.fa-file-pdf, .fas.fa-file-pdf {
    color: #ef4444; /* Red for PDF */
    font-weight: 900;
}

/* Theme Toggle - Perfect Mode Switching */
.theme-toggle-nav i.fa-moon, .fas.fa-moon {
    color: #fbbf24; /* Gold for moon */
    font-weight: 900;
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
}
.fa-moon {
    font-family: "Font Awesome 6 Free";
}

html.dark .theme-toggle-nav i.fa-moon {
    color: #fbbf24; /* Keep visible in dark mode */
}

.zone-toggle-nav i.fa-sun,
.fa.fa-sun,
.fas.fa-sun {
    color: #f97316; /* Orange for sun */
    font-weight: 900;
    text-shadow: 0 0 10px rgba(249, 115, 22, 0.5);
}
.fa-sun {
    font-family: "Font Awesome 6 Free";
}

.fa-solid.fa-magic, .fas.fa-magic {
    color: #a855f7; /* Purple for magic/settings */
    font-weight: 900;
}

/* Chat & Communication */
.fa-solid.fa-comment-dots, .fas.fa-comment-dots {
    color: #3b82f6; /* Blue for chat */
    font-weight: 900;
}

.fa-solid.fa-paper-plane, .fas.fa-paper-plane {
    color: #10b981; /* Green for send */
    font-weight: 900;
}

.fa-solid.fa-microphone, .fas.fa-microphone {
    color: #ef4444; /* Red for microphone */
    font-weight: 900;
}

.fa-solid.fa-times, .fas.fa-times {
    color: #6b7280; /* Gray for close */
    font-weight: 900;
}

/* Keyframe animations for beautiful effects */
@keyframes brainPulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.2) drop-shadow(0 0 8px rgba(139, 92, 246, 0.6)); }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Contact Information Icons */
.fa-solid.fa-envelope, .fas.fa-envelope {
    color: #3b82f6; /* Blue for email */
    font-weight: 900;
}

.fa-brands.fa-whatsapp, .fab.fa-whatsapp {
    color: #25d366; /* WhatsApp green */
    font-weight: 400;
}

.fa-solid.fa-phone, .fa-solid.fa-mobile-alt, .fas.fa-mobile-alt {
    color: #6366f1; /* Indigo for phone */
    font-weight: 900;
}

.fa-solid.fa-map-marker-alt, .fas.fa-map-marker-alt {
    color: #ef4444; /* Red for location */
    font-weight: 900;
}

.fa-solid.fa-globe, .fas.fa-globe {
    color: #06b6d4; /* Cyan for web links */
    font-weight: 900;
}

.fa-solid.fa-coffee, .fas.fa-coffee {
    color: #92400e; /* Brown for coffee */
    font-weight: 900;
}

/* Tech Stack Specific - Latest App Icons */
.fa-brands.fa-swift, .fab.fa-swift {
    color: #fa7343; /* Swift orange */
    font-weight: 400;
}

.fa-brands.fa-swift {
    background: linear-gradient(135deg, #fa7343, #ff9900);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.fa-brands.fa-python, .fab.fa-python {
    color: #3776ab; /* Python blue */
    font-weight: 400;
}

.fa-brands.fa-c-plus-plus, .fab.fa-c-plus-plus {
    color: #00599c; /* C++ blue */
    font-weight: 400;
}

.fa-brands.fa-c, .fab.fa-c {
    color: #a8b9cc; /* C language blue-gray */
    font-weight: 400;
}

/* Advanced Tech Icons */
.fa-solid.fa-layer-group, .fas.fa-layer-group {
    color: #f59e0b; /* Amber for layers/Deep Learning */
    font-weight: 900;
}

.fa-solid.fa-brain-circuit, .fas.fa-brain-circuit {
    color: #8b5cf6; /* Purple for neural networks */
    font-weight: 900;
    animation: brainPulse 3s infinite;
}

.fa-solid.fa-chart-simple, .fas.fa-chart-simple {
    color: #059669; /* Green for analytics */
    font-weight: 900;
}

.fa-brands.fa-figma, .fab.fa-figma {
    color: #f24e1e; /* Figma orange */
    font-weight: 400;
}

.fa-brands.fa-vscode, .fab.fa-vscode {
    color: #007acc; /* VS Code blue */
    font-weight: 400;
}

/* Experience Checkmarks - Updated */
.timeline-item svg {
    color: #10b981; /* Emerald for success/checkmarks */
    background: rgba(16, 185, 129, 0.1);
    border-radius: 50%;
    padding: 4px;
}

html.dark .timeline-item svg {
    background: rgba(16, 185, 129, 0.2);
}

/* Social Media Icons - Updated */
.fa-brands.fa-facebook, .fa-brands.fa-facebook-f, .fab.fa-facebook-f {
    color: #1877f2;
    font-weight: 400;
}

.fa-brands.fa-instagram, .fab.fa-instagram {
    color: #e4405f;
    font-weight: 400;
}

.fa-brands.fa-linkedin, .fa-brands.fa-linkedin-in, .fab.fa-linkedin-in {
    color: #0077b5;
    font-weight: 400;
}

.fa-brands.fa-github, .fab.fa-github {
    color: #181717;
    font-weight: 400;
}

.fa-brands.fa-youtube, .fab.fa-youtube {
    color: #ff0000;
    font-weight: 400;
}

.fa-brands.fa-x-twitter, .fa-brands.fa-twitter, .fab.fa-twitter, .fab.fa-x-twitter {
    color: #000000;
    font-weight: 400;
}

.fa-solid.fa-globe, .fas.fa-globe {
    color: #0077b5;
    font-weight: 900;
}

.fa-solid.fa-code, .fas.fa-code {
    color: #61dafb;
    font-weight: 900;
}

/* PDF and File Icons */
.fa-solid.fa-file-pdf, .fas.fa-file-pdf {
    color: #dc2626;
    font-weight: 900;
}

/* Envelope and Contact Icons */
.fa-solid.fa-envelope, .fas.fa-envelope {
    color: #6b7280;
    font-weight: 900;
}

.fa-brands.fa-whatsapp, .fab.fa-whatsapp {
    color: #25d366;
    font-weight: 400;
}

.fa-solid.fa-mobile-screen-button, .fa-solid.fa-mobile, .fa-solid.fa-mobile-alt, .fas.fa-mobile-alt {
    color: #6b7280;
    font-weight: 900;
}

.fa-solid.fa-location-dot, .fa-solid.fa-map-marker-alt, .fas.fa-map-marker-alt {
    color: #ef4444;
    font-weight: 900;
}

/* Chatbot Icons */
.fa-solid.fa-comments, .fa-solid.fa-comment-dots, .fas.fa-comment-dots {
    color: #ffffff;
    font-weight: 900;
}

.fa-solid.fa-xmark, .fa-solid.fa-times, .fas.fa-times {
    color: #ffffff;
    font-weight: 900;
}

.fa-solid.fa-microphone, .fas.fa-microphone {
    color: #ffffff;
    font-weight: 900;
}

/* Additional Programming Languages */
.fa-solid.fa-c {
    color: #00599c;
    font-weight: 900;
}

.fa-solid.fa-cpp, .fa-solid.fa-c-plus-plus {
    color: #00599c;
    font-weight: 900;
}

.fa-brands.fa-swift, .fab.fa-swift {
    color: #fa7343;
    font-weight: 400;
}

/* Python and Data Science */
.fa-brands.fa-python {
    color: #306998;
    font-weight: 400;
}

.fa-solid.fa-chart-simple,
.fa-solid.fa-chart-bar {
    color: #10b981;
    font-weight: 900;
}

/* AI and ML Icons */
.fa-solid.fa-brain-circuit,
.fa-solid.fa-robot {
    color: #8b5cf6;
    font-weight: 900;
}

.fa-solid.fa-layer-group {
    color: #f59e0b;
    font-weight: 900;
}

/* Checklist/Achievement Icons */
.fa-solid.fa-circle-check,
.fa-solid.fa-check-circle,
.fa.fa-check-circle,
.fas.fa-check-circle {
    color: #10b981;
    font-weight: 900;
}

.fa-solid.fa-circle-exclamation,
.fa-solid.fa-exclamation-circle {
    color: #f59e0b;
    font-weight: 900;
}

.fa-solid.fa-circle-xmark,
.fa-solid.fa-times-circle {
    color: #ef4444;
    font-weight: 900;
}

/* Award icons */
.fa-solid.fa-trophy,
.fa.fa-trophy,
.fas.fa-trophy {
    color: #f59e0b;
    font-weight: 900;
}

.fa-solid.fa-medal,
.fa.fa-medal,
.fas.fa-medal {
    color: #f97316;
    font-weight: 900;
}

.fa-solid.fa-certificate,
.fa.fa-certificate,
.fas.fa-certificate {
    color: #8b5cf6;
    font-weight: 900;
}

/* Universial Fallback */
.fa, .fas, .far, .fab,
.fa-solid, .fa-regular, .fa-brands {
    font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "Font Awesome 6 Brands", sans-serif;
    font-style: normal;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}

/* Dark Mode Icon Visibility Fixes - Enhanced Social Media Branding */
html.dark .fa-brands.fa-facebook, html.dark .fab.fa-facebook,
html.dark .fa-brands.fa-facebook-f, html.dark .fab.fa-facebook-f {
    color: #4267b2 !important; /* Lighter Facebook blue for dark mode */
}

html.dark .fa-brands.fa-instagram, html.dark .fab.fa-instagram {
    color: #e95950 !important; /* Brighter Instagram pink for dark mode */
}

html.dark .fa-brands.fa-linkedin, html.dark .fab.fa-linkedin,
html.dark .fa-brands.fa-linkedin-in, html.dark .fab.fa-linkedin-in {
    color: #0a66c2 !important; /* LinkedIn blue remains vibrant */
}

html.dark .fa-brands.fa-github, html.dark .fab.fa-github {
    color: #f0f0f0 !important; /* Light grey for GitHub - clear visibility on dark backgrounds */
}

html.dark .fa-brands.fa-youtube, html.dark .fab.fa-youtube {
    color: #ff0000 !important; /* YouTube red stays vibrant */
}

html.dark .fa-brands.fa-x-twitter, html.dark .fa-brands.fa-twitter,
html.dark .fab.fa-twitter, html.dark .fab.fa-x-twitter {
    color: #ffffff !important; /* White for X/Twitter - maximum visibility on dark backgrounds */
}

html.dark .fa-solid.fa-globe, html.dark .fas.fa-globe {
    color: #5ac8fa !important; /* Bright cyan for web links */
}

html.dark .fa-solid.fa-code, html.dark .fas.fa-code {
    color: #61dafb !important; /* Bright React blue for code links */
}

html.dark .fa-brands.fa-whatsapp, html.dark .fab.fa-whatsapp {
    color: #25d366 !important; /* WhatsApp green stays bright */
}

/* CONTACT SECTION FOLLOW ME ICONS - Dark Mode */
html.dark .contact-social-links .fa-brands.fa-facebook,
html.dark .contact-social-links .fa-brands.fa-facebook-f,
html.dark .contact-social-links a:hover .fa-brands.fa-facebook,
html.dark .contact-social-links a:hover .fa-brands.fa-facebook-f {
    color: #1877f2; /* Keep Facebook blue */
}

html.dark .contact-social-links .fa-brands.fa-instagram,
html.dark .contact-social-links a:hover .fa-brands.fa-instagram {
    color: #e4405f; /* Keep Instagram pink */
}

html.dark .contact-social-links .fa-brands.fa-linkedin,
html.dark .contact-social-links .fa-brands.fa-linkedin-in,
html.dark .contact-social-links a:hover .fa-brands.fa-linkedin,
html.dark .contact-social-links a:hover .fa-brands.fa-linkedin-in {
    color: #0077b5; /* Keep LinkedIn blue */
}

html.dark .contact-social-links .fa-brands.fa-github,
html.dark .contact-social-links a:hover .fa-brands.fa-github {
    color: #f0f0f0; /* GitHub light grey */
}

html.dark .contact-social-links .fa-brands.fa-youtube,
html.dark .contact-social-links a:hover .fa-brands.fa-youtube {
    color: #ff0000; /* Keep YouTube red */
}

html.dark .contact-social-links .fa-brands.fa-x-twitter,
html.dark .contact-social-links .fa-brands.fa-twitter,
html.dark .contact-social-links a:hover .fa-brands.fa-x-twitter,
html.dark .contact-social-links a:hover .fa-brands.fa-twitter {
    color: #ffffff; /* Twitter white */
}

html.dark .contact-social-links .fa-solid.fa-globe,
html.dark .contact-social-links a:hover .fa-solid.fa-globe {
    color: #0077b5; /* Globe blue */
}

html.dark .contact-social-links .fa-solid.fa-code,
html.dark .contact-social-links a:hover .fa-solid.fa-code {
    color: #61dafb; /* Code cyan */
}

/* FOOTER SOCIAL ICONS - Dark Mode - Keep Original Brand Colors */
html.dark footer i.fa-brands.fa-facebook,
html.dark footer i.fa-brands.fa-facebook-f,
html.dark footer a[href*="facebook.com"] i.fa-brands {
    color: #0a84ff !important; /* Bright Facebook blue */
}

html.dark footer i.fa-brands.fa-instagram,
html.dark footer a[href*="instagram.com"] i.fa-brands {
    color: #ff375f !important; /* Vibrant Instagram pink */
}

html.dark footer i.fa-brands.fa-linkedin,
html.dark footer i.fa-brands.fa-linkedin-in,
html.dark footer a[href*="linkedin.com"] i.fa-brands {
    color: #0a66c2 !important; /* LinkedIn blue */
}

html.dark footer i.fa-brands.fa-github,
html.dark footer a[href*="github.com"] i.fa-brands {
    color: #f5f5f7 !important; /* Light GitHub mark */
}

html.dark footer i.fa-brands.fa-youtube,
html.dark footer a[href*="youtube.com"] i.fa-brands {
    color: #ff0000 !important; /* Original YouTube Red */
}

html.dark footer i.fa-brands.fa-x-twitter,
html.dark footer i.fa-brands.fa-twitter,
html.dark footer a[href*="x.com"] i.fa-brands,
html.dark footer a[href*="twitter.com"] i.fa-brands {
    color: #1da1f2 !important; /* Twitter blue */
}

html.dark footer i.fa-solid.fa-globe,
html.dark footer a[href*="wixsite.com"] .fa-solid.fa-globe {
    color: #5ac8fa !important; /* Aqua blue accent */
}

html.dark footer i.fa-solid.fa-code,
html.dark footer a[href*="leetcode.com"] .fa-solid.fa-code {
    color: #61dafb !important; /* React Blue for LeetCode */
}



/* Enhanced Education Card Typography - Perfect Light Mode Visibility */
.education-card h3,
.education-card h5 {
    color: var(--text-accent);
    font-weight: 700;
    letter-spacing: -0.025em;
}
.education-card h4 {
    color: var(--text-primary);
    font-weight: 600;
}
.education-card p,
.education-card ul li {
    color: var(--text-secondary);
    line-height: 1.6;
}
.education-card .date-badge {
    color: var(--text-secondary);
    background-color: var(--bg-secondary);
}

/* Updated Card Design - Latest Technology */
.education-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.education-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

/* For Dark Mode Overrides */
html.dark .education-card {
    background: var(--bg-primary);
    border-color: var(--border-color);
}
html.dark .education-card h3,
html.dark .education-card h4,
html.dark .education-card h5 {
    color: var(--text-primary);
}
html.dark .education-card p,
html.dark .education-card ul li {
    color: var(--text-secondary);
}
html.dark .education-card .date-badge {
    color: var(--text-secondary);
    background-color: rgba(255, 255, 255, 0.08);
}

/* Overlay menu */
.dark .overlay-menu {
    background: hsla(240, 8%, 10%, 0.92); /* Use body color with opacity */
}
.dark .overlay-nav-link {
    color: var(--nav-text);
}
.dark .overlay-nav-link:hover {
    color: var(--nav-hover);
}

/* Footer */
.dark footer {
    background: linear-gradient(180deg, #000000 0%, #0c0c0f 100%);
    color: #f5f5f7;
    border-top-color: rgba(255,255,255,0.08);
}
.dark footer a {
    color: #d2d2d7;
}
.dark footer a:hover {
    color: #5ac8fa;
}
.dark footer .fab, .dark footer .fas {
    color: currentColor;
}

/* Chatbot */
.blinking {
    animation: blink 1.5s infinite;
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}
.dark #chat-widget,
.dark #chat-toggle {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    box-shadow: var(--project-card-shadow);
}
.dark #chat-widget .bg-blue-500 {
    background-color: var(--text-accent);
}
.dark #chat-widget .bg-gray-200 {
    background-color: rgba(255, 255, 255, 0.12);
    color: var(--text-primary);
}
.dark #chat-widget .bg-white {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}
.dark .chat-header h3 {
    color: var(--text-primary);
}
.dark .chat-header p {
    color: var(--text-secondary);
}
.dark #chat-messages {
    background-color: var(--bg-secondary);
}
.dark .message-bubble.user {
    background-color: rgba(255, 255, 255, 0.12);
    color: var(--text-primary);
}

/* Inputs and forms */
.dark .contact-input {
    background-color: rgba(17, 17, 17, 0.85);
    color: var(--text-primary);
    border-color: var(--border-color);
}
.dark .contact-input:focus {
    border-color: #2997ff;
    box-shadow: 0 0 0 4px rgba(41, 151, 255, 0.3);
}

/* Timeline badge */
.dark .timeline-item .date-badge {
    background-color: rgba(255, 255, 255, 0.12);
    color: var(--text-secondary);
}

/* Button styles */
.dark .button-primary {
    background-color: var(--text-accent);
    color: var(--color-white);
    font-weight: 600;
}
.dark .button-primary:hover {
    background-color: #66b5ff;
}
.dark .button-secondary {
    background-color: transparent;
    color: #2997ff;
    border-color: #3a3a3c;
}
.dark .button-secondary:hover {
    background-color: rgba(41, 151, 255, 0.15);
    color: #66b5ff;
    border-color: #2997ff;
}
#chatbot-toggle {
    position: fixed !important;
    bottom: clamp(20px, 4vh, 48px) !important;
    right: clamp(20px, 4vh, 48px) !important;
    z-index: 2147483647 !important;
}

#chatbot-widget {
    position: fixed !important;
    bottom: calc(clamp(20px, 4vh, 48px) + 80px) !important;
    right: clamp(20px, 4vh, 48px) !important;
    z-index: 2147483646 !important;
    max-height: calc(100vh - clamp(20px, 4vh, 48px) - 120px);
}

@media (max-width: 768px) {
    #chatbot-toggle {
        bottom: clamp(16px, 6vw, 32px) !important;
        right: clamp(16px, 6vw, 32px) !important;
    }
    #chatbot-widget {
        bottom: calc(clamp(16px, 6vw, 32px) + 72px) !important;
        right: clamp(12px, 4vw, 24px) !important;
        left: clamp(12px, 4vw, 24px) !important;
        width: auto !important;
    }
}