/* ===== CSS VARIABLES ===== */

:root {

  /* Light Mode Colors */

  --primary-color: #3b82f6;

  --secondary-color: #8b5cf6;

  --accent-color: #06b6d4;

  --success-color: #10b981;

  --warning-color: #f59e0b;

  --error-color: #ef4444;

  

  --bg-primary: #ffffff;

  --bg-secondary: #f8fafc;

  --bg-tertiary: #e2e8f0;

  --text-primary: #1e293b;

  --text-secondary: #64748b;

  --text-muted: #94a3b8;

  

  --border-color: #e2e8f0;

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);

  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

  

  /* Typography */

  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --font-size-xs: 0.75rem;

  --font-size-sm: 0.875rem;

  --font-size-base: 1rem;

  --font-size-lg: 1.125rem;

  --font-size-xl: 1.25rem;

  --font-size-2xl: 1.5rem;

  --font-size-3xl: 1.875rem;

  --font-size-4xl: 2.25rem;

  --font-size-5xl: 3rem;

  

  /* Spacing */

  --spacing-1: 0.25rem;

  --spacing-2: 0.5rem;

  --spacing-3: 0.75rem;

  --spacing-4: 1rem;

  --spacing-5: 1.25rem;

  --spacing-6: 1.5rem;

  --spacing-8: 2rem;

  --spacing-10: 2.5rem;

  --spacing-12: 3rem;

  --spacing-16: 4rem;

  --spacing-20: 5rem;

  

  /* Border Radius */

  --radius-sm: 0.25rem;

  --radius-md: 0.375rem;

  --radius-lg: 0.5rem;

  --radius-xl: 0.75rem;

  --radius-2xl: 1rem;

  --radius-full: 9999px;

  

  /* Transitions */

  --transition-fast: 150ms ease-in-out;

  --transition-normal: 300ms ease-in-out;

  --transition-slow: 500ms ease-in-out;

}



/* ===== DARK MODE VARIABLES ===== */

[data-theme="dark"] {

  --bg-primary: #0f172a;

  --bg-secondary: #1e293b;

  --bg-tertiary: #334155;

  --text-primary: #f8fafc;

  --text-secondary: #cbd5e1;

  --text-muted: #94a3b8;

  --border-color: #334155;

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);

  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);

  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4);

  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4);

}



/* ===== RESET & BASE STYLES ===== */

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



html {

  scroll-behavior: smooth;

  -webkit-overflow-scrolling: touch;

}



body {

  font-family: var(--font-family);

  font-size: var(--font-size-base);

  line-height: 1.6;

  color: var(--text-primary);

  background-color: var(--bg-primary);

  transition: background-color var(--transition-normal), color var(--transition-normal);

  overflow-x: hidden;

  -webkit-text-size-adjust: 100%;

  -webkit-tap-highlight-color: transparent;

  -webkit-touch-callout: none;

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;

}









/* ===== UTILITY CLASSES ===== */

.container {

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 var(--spacing-4);

}



.section-header {

  text-align: center;

  margin-bottom: var(--spacing-16);

  position: relative;

  z-index: 2;

}



.section-title {

  font-size: var(--font-size-4xl);

  font-weight: 700;

  color: var(--text-primary);

  margin-bottom: var(--spacing-4);

}



.section-subtitle {

  font-size: var(--font-size-lg);

  color: var(--text-secondary);

  max-width: 600px;

  margin: 0 auto;

}



.highlight {

  color: var(--primary-color);

}



/* ===== BUTTONS ===== */

.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: var(--spacing-3) var(--spacing-6);

  border: none;

  border-radius: var(--radius-lg);

  font-size: var(--font-size-base);

  font-weight: 500;

  text-decoration: none;

  cursor: pointer;

  transition: all var(--transition-fast);

  gap: var(--spacing-2);

  -webkit-tap-highlight-color: transparent;

  touch-action: manipulation;

  min-height: 44px;

  min-width: 44px;

  position: relative;

  overflow: hidden;

  backdrop-filter: blur(10px);

}



.btn-primary {

  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

  color: white;

  box-shadow: var(--shadow-md);

}



.btn-primary:hover {

  transform: translateY(-2px);

  box-shadow: var(--shadow-lg);

}



.btn::before {

  content: '';

  position: absolute;

  top: 50%;

  left: 50%;

  width: 0;

  height: 0;

  background: rgba(255, 255, 255, 0.3);

  border-radius: 50%;

  transform: translate(-50%, -50%);

  transition: width 0.6s, height 0.6s;

  z-index: 0;

}



.btn:active::before {

  width: 300px;

  height: 300px;

}



.btn::after {

  content: '';

  position: absolute;

  top: 0;

  left: -100%;

  width: 100%;

  height: 100%;

  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);

  transition: left 0.5s ease;

  z-index: 1;

}



.btn:hover::after {

  left: 100%;

}



.btn-secondary {

  background: transparent;

  color: var(--primary-color);

  border: 2px solid var(--primary-color);

}



.btn-secondary:hover {

  background: var(--primary-color);

  color: white;

}



/* ===== NAVIGATION ===== */

.navbar {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  background: rgba(255, 255, 255, 0.95);

  backdrop-filter: blur(20px);

  border-bottom: 1px solid var(--border-color);

  z-index: 1000;

  transition: background-color 0.3s ease,

              backdrop-filter 0.3s ease,

              box-shadow 0.3s ease,

              border-color 0.3s ease;

  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);

}



.navbar.scrolled {

  background: rgba(255, 255, 255, 0.98);

  backdrop-filter: blur(25px);

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(59, 130, 246, 0.1);

  border-bottom-color: rgba(59, 130, 246, 0.2);

  transform: translateY(0);

}



.navbar.scrolled .nav-link {

  color: var(--text-primary);

  transition: all 0.3s ease;

}



.navbar.scrolled .nav-link:hover {

  color: var(--primary-color);

  transform: translateY(-2px);

}



.nav-container {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: var(--spacing-4) var(--spacing-4);

  max-width: 1200px;

  margin: 0 auto;

}



.nav-logo a {

  font-size: var(--font-size-xl);

  font-weight: 700;

  color: var(--text-primary);

  text-decoration: none;

}



.nav-menu {

  display: flex;

  align-items: center;

  gap: var(--spacing-8);

}



.nav-link {

  color: var(--text-primary);

  text-decoration: none;

  font-weight: 500;

  transition: color var(--transition-fast);

  -webkit-tap-highlight-color: transparent;

  touch-action: manipulation;

  min-height: 44px;

  display: flex;

  align-items: center;

  padding: var(--spacing-2);

}



.nav-link:hover {

  color: var(--primary-color);

}



.nav-actions {

  display: flex;

  align-items: center;

  gap: var(--spacing-4);

}



.theme-toggle {

  background: none;

  border: none;

  color: var(--text-primary);

  font-size: var(--font-size-lg);

  cursor: pointer;

  padding: var(--spacing-2);

  border-radius: var(--radius-md);

  transition: all var(--transition-fast);

}



.theme-toggle:hover {

  background: var(--bg-secondary);

  color: var(--primary-color);

}



.mobile-menu-toggle {

  display: none;

  flex-direction: column;

  background: none;

  border: none;

  cursor: pointer;

  padding: var(--spacing-2);

  z-index: 1001;

}



.mobile-menu-toggle span {

  width: 25px;

  height: 3px;

  background: var(--text-primary);

  margin: 3px 0;

  transition: var(--transition-fast);

  border-radius: 2px;

}



.mobile-menu-toggle.active span:nth-child(1) {

  transform: rotate(45deg) translate(5px, 5px);

}



.mobile-menu-toggle.active span:nth-child(2) {

  opacity: 0;

}



.mobile-menu-toggle.active span:nth-child(3) {

  transform: rotate(-45deg) translate(7px, -6px);

}



@media (max-width: 768px) {

  .nav-menu {

    position: fixed;

    top: 0;

    right: -100%;

    width: 80%;

    max-width: 300px;

    height: 100vh;

    background: var(--bg-primary);

    backdrop-filter: blur(20px);

    border-left: 1px solid var(--border-color);

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: var(--spacing-6);

    transition: right var(--transition-normal);

    z-index: 1000;

    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);

  }

  

  .nav-menu.active {

    right: 0;

  }

  

  .nav-link {

    font-size: var(--font-size-lg);

    padding: var(--spacing-3) var(--spacing-4);

    border-radius: var(--radius-lg);

    transition: all var(--transition-fast);

  }

  

  .nav-link:hover {

    background: var(--bg-secondary);

    transform: translateX(5px);

  }

}



/* ===== HERO SECTION - ENHANCED ===== */

.hero {

  padding: var(--spacing-20) 0 var(--spacing-16);

  background: 

    radial-gradient(ellipse at 20% 30%, rgba(0, 255, 255, 0.15) 0%, transparent 50%),

    radial-gradient(ellipse at 80% 70%, rgba(255, 0, 255, 0.15) 0%, transparent 50%),

    radial-gradient(circle at 40% 60%, rgba(16, 185, 129, 0.12) 0%, transparent 60%),

    radial-gradient(circle at 60% 40%, rgba(139, 92, 246, 0.12) 0%, transparent 60%),

    linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);

  min-height: 100vh;

  display: flex;

  align-items: center;

  position: relative;

  overflow: hidden;

  background-attachment: fixed;

  animation: heroBackgroundShift 20s ease-in-out infinite;

}



.hero::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: 

    linear-gradient(45deg, transparent 30%, rgba(0, 255, 255, 0.02) 50%, transparent 70%),

    linear-gradient(-45deg, transparent 30%, rgba(255, 0, 255, 0.02) 50%, transparent 70%);

  animation: heroScanlines 8s linear infinite;

  pointer-events: none;

  z-index: 1;

}



.hero::after {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background-image: 

    radial-gradient(circle at 20% 80%, rgba(0, 255, 255, 0.05) 2px, transparent 2px),

    radial-gradient(circle at 80% 20%, rgba(255, 0, 255, 0.05) 1px, transparent 1px),

    radial-gradient(circle at 40% 40%, rgba(16, 185, 129, 0.05) 1px, transparent 1px);

  background-size: 60px 60px, 40px 40px, 80px 80px;

  animation: heroMatrix 25s linear infinite;

  opacity: 0.6;

  pointer-events: none;

  z-index: 1;

}



@keyframes heroBackgroundShift {

  0%, 100% {

    background-position: 0% 0%, 100% 100%, 50% 50%, 50% 50%;

  }

  25% {

    background-position: 25% 25%, 75% 75%, 40% 60%, 60% 40%;

  }

  50% {

    background-position: 50% 50%, 50% 50%, 60% 40%, 40% 60%;

  }

  75% {

    background-position: 75% 75%, 25% 25%, 50% 50%, 50% 50%;

  }

}



@keyframes heroScanlines {

  0% { transform: translateX(-100%) translateY(-100%); }

  100% { transform: translateX(100%) translateY(100%); }

}



@keyframes heroMatrix {

  0% { transform: translate(0, 0); }

  100% { transform: translate(60px, 60px); }

}



.hero::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: 

    radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.15) 0%, transparent 50%),

    radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),

    radial-gradient(circle at 40% 40%, rgba(6, 182, 212, 0.15) 0%, transparent 50%),

    radial-gradient(circle at 60% 60%, rgba(16, 185, 129, 0.1) 0%, transparent 50%);

  animation: heroBackgroundPulse 8s ease-in-out infinite;

  z-index: 1;

}



.hero::after {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: 

    linear-gradient(45deg, transparent 30%, rgba(59, 130, 246, 0.05) 50%, transparent 70%),

    linear-gradient(-45deg, transparent 30%, rgba(139, 92, 246, 0.05) 50%, transparent 70%);

  animation: heroBackgroundShift 12s ease-in-out infinite;

  z-index: 1;

}



@keyframes heroBackgroundPulse {

  0%, 100% {

    opacity: 0.8;

    transform: scale(1);

  }

  50% {

    opacity: 1;

    transform: scale(1.05);

  }

}



@keyframes heroBackgroundShift {

  0%, 100% {

    transform: translateX(0) translateY(0);

  }

  25% {

    transform: translateX(20px) translateY(-20px);

  }

  50% {

    transform: translateX(-20px) translateY(20px);

  }

  75% {

    transform: translateX(10px) translateY(-10px);

  }

}



.hero-content {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: var(--spacing-16);

  align-items: center;

  position: relative;

  z-index: 2;

}



.hero-title {

  font-size: var(--font-size-5xl);

  font-weight: 800;

  background: linear-gradient(135deg, #00ffff, #ff00ff, #ffff00, #00ffff);

  background-size: 400% 400%;

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

  margin-bottom: var(--spacing-4);

  line-height: 1.2;

  animation: 

    heroTitleGlow 3s ease-in-out infinite,

    heroTitleShift 6s ease-in-out infinite;

  filter: drop-shadow(0 0 20px rgba(0, 255, 255, 0.3));

  position: relative;

}



.hero-title .highlight {

  background: linear-gradient(135deg, #00ffff, #ff00ff, #ffff00, #00ffff);

  background-size: 400% 400%;

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

  animation: 

    heroTitleGlow 3s ease-in-out infinite,

    heroTitleShift 6s ease-in-out infinite;

  filter: drop-shadow(0 0 20px rgba(0, 255, 255, 0.3));

}



@keyframes heroTitleGlow {

  0%, 100% {

    filter: drop-shadow(0 0 20px rgba(0, 255, 255, 0.3));

  }

  50% {

    filter: drop-shadow(0 0 40px rgba(0, 255, 255, 0.6)) drop-shadow(0 0 60px rgba(255, 0, 255, 0.4));

  }

}



@keyframes heroTitleShift {

  0%, 100% { background-position: 0% 50%; }

  50% { background-position: 100% 50%; }

}



.hero-subtitle {

  font-size: var(--font-size-2xl);

  color: var(--text-secondary);

  margin-bottom: var(--spacing-6);

  font-weight: 500;

}



.hero-description {

  font-size: var(--font-size-lg);

  color: var(--text-secondary);

  margin-bottom: var(--spacing-8);

  line-height: 1.7;

}



.hero-buttons {

  display: flex;

  gap: var(--spacing-4);

  flex-wrap: wrap;

  justify-content: flex-start;

}



.hero-buttons .btn {

  display: flex;

  align-items: center;

  gap: var(--spacing-2);

  min-width: 160px;

  justify-content: center;

}



.hero-buttons .btn i {

  font-size: var(--font-size-sm);

}



.hero-image {

  display: flex;

  justify-content: center;

  align-items: center;

}



.image-container {

  position: relative;

  width: 300px;

  height: 300px;

  border-radius: var(--radius-2xl);

  overflow: visible;

  box-shadow: var(--shadow-xl);

  transition: transform var(--transition-normal);

}



.image-container:hover {

  transform: scale(1.05);

}



.profile-image {

  width: 100%;

  height: 100%;

  object-fit: cover;

  border-radius: var(--radius-2xl);

  position: relative;

  z-index: 2;

  transition: all var(--transition-normal);

  filter: brightness(1.05) contrast(1.1);

}



.profile-image:hover {

  transform: scale(1.02);

  filter: brightness(1.1) contrast(1.15);

}



.image-glow {

  position: absolute;

  top: -20px;

  left: -20px;

  right: -20px;

  bottom: -20px;

  background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));

  border-radius: var(--radius-2xl);

  opacity: 0.3;

  z-index: 1;

  animation: glow 3s ease-in-out infinite;

}



.image-border {

  position: absolute;

  top: -2px;

  left: -2px;

  right: -2px;

  bottom: -2px;

  background: linear-gradient(45deg, var(--primary-color), var(--secondary-color), var(--accent-color));

  border-radius: var(--radius-2xl);

  z-index: 0;

  animation: rotate 10s linear infinite;

}



@keyframes rotate {

  0% { transform: rotate(0deg); }

  100% { transform: rotate(360deg); }

}



/* ===== FLOATING PARTICLES ===== */

.particle {

  position: absolute;

  width: 8px;

  height: 8px;

  background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));

  border-radius: 50%;

  pointer-events: none;

  z-index: 3;

}



.particle-1 {

  top: 20%;

  left: -10px;

  animation: float 4s ease-in-out infinite;

}



.particle-2 {

  top: 40%;

  right: -15px;

  animation: float 5s ease-in-out infinite 0.5s;

}



.particle-3 {

  top: 60%;

  left: -5px;

  animation: float 6s ease-in-out infinite 1s;

}



.particle-4 {

  top: 80%;

  right: -10px;

  animation: float 4.5s ease-in-out infinite 1.5s;

}



.particle-5 {

  top: 10%;

  left: 50%;

  animation: float 5.5s ease-in-out infinite 2s;

}



.particle-6 {

  top: 70%;

  left: 50%;

  animation: float 4.8s ease-in-out infinite 2.5s;

}



/* ===== SCROLL INDICATOR ===== */

.scroll-indicator {

  position: absolute;

  bottom: 2rem;

  left: 50%;

  transform: translateX(-50%);

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 0.5rem;

  color: var(--text-secondary);

  font-size: var(--font-size-sm);

  animation: bounce 2s infinite;

  cursor: pointer;

  transition: all 0.3s ease;

}



.scroll-indicator:hover {

  color: var(--primary-color);

  transform: translateX(-50%) translateY(-5px);

}



.scroll-arrow {

  width: 30px;

  height: 30px;

  border: 2px solid var(--primary-color);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  animation: pulse 2s infinite;

}



@keyframes bounce {

  0%, 20%, 50%, 80%, 100% {

    transform: translateX(-50%) translateY(0);

  }

  40% {

    transform: translateX(-50%) translateY(-10px);

  }

  60% {

    transform: translateX(-50%) translateY(-5px);

  }

}



@keyframes pulse {

  0% {

    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);

  }

  70% {

    box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);

  }

  100% {

    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);

  }

}



/* ===== ABOUT SECTION ===== */

.about {

  padding: var(--spacing-20) 0;

  background: var(--bg-secondary);

  position: relative;

  overflow: hidden;

}



.about::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: 

    radial-gradient(circle at 10% 20%, rgba(16, 185, 129, 0.08) 0%, transparent 50%),

    radial-gradient(circle at 90% 80%, rgba(245, 158, 11, 0.08) 0%, transparent 50%),

    radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.05) 0%, transparent 70%);

  animation: aboutBackgroundFloat 10s ease-in-out infinite;

  z-index: 1;

}



.about::after {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: 

    conic-gradient(from 0deg at 30% 30%, transparent 0deg, rgba(139, 92, 246, 0.03) 60deg, transparent 120deg),

    conic-gradient(from 180deg at 70% 70%, transparent 0deg, rgba(6, 182, 212, 0.03) 60deg, transparent 120deg);

  animation: aboutBackgroundRotate 15s linear infinite;

  z-index: 1;

}



@keyframes aboutBackgroundFloat {

  0%, 100% {

    transform: translateY(0) scale(1);

    opacity: 0.8;

  }

  33% {

    transform: translateY(-30px) scale(1.02);

    opacity: 1;

  }

  66% {

    transform: translateY(15px) scale(0.98);

    opacity: 0.9;

  }

}



@keyframes aboutBackgroundRotate {

  0% {

    transform: rotate(0deg);

  }

  100% {

    transform: rotate(360deg);

  }

}



.about-content {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: var(--spacing-16);

  align-items: start;

  position: relative;

  z-index: 2;

}



.about-text h3 {

  font-size: var(--font-size-2xl);

  font-weight: 600;

  color: var(--text-primary);

  margin-bottom: var(--spacing-4);

}



.about-text p {

  font-size: var(--font-size-lg);

  color: var(--text-secondary);

  margin-bottom: var(--spacing-8);

  line-height: 1.7;

}



.about-stats {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: var(--spacing-6);

}



.stat {

  text-align: center;

  padding: var(--spacing-6);

  background: var(--bg-primary);

  border-radius: var(--radius-xl);

  box-shadow: var(--shadow-md);

}



.stat h4 {

  font-size: var(--font-size-3xl);

  font-weight: 700;

  color: var(--primary-color);

  margin-bottom: var(--spacing-2);

}



.stat p {

  color: var(--text-secondary);

  font-weight: 500;

}



.about-skills h3 {

  font-size: var(--font-size-2xl);

  font-weight: 600;

  color: var(--text-primary);

  margin-bottom: var(--spacing-6);

}



.skill-categories {

  display: flex;

  flex-direction: column;

  gap: var(--spacing-4);

}



.skill-category {

  display: flex;

  align-items: center;

  gap: var(--spacing-4);

  padding: var(--spacing-4);

  background: var(--bg-primary);

  border-radius: var(--radius-lg);

  box-shadow: var(--shadow-sm);

  transition: transform var(--transition-fast);

}



.skill-category:hover {

  transform: translateY(-2px);

  box-shadow: var(--shadow-md);

}



.skill-category i {

  font-size: var(--font-size-xl);

  color: var(--primary-color);

  width: 40px;

  text-align: center;

}



.skill-category h4 {

  font-size: var(--font-size-lg);

  font-weight: 600;

  color: var(--text-primary);

  margin-bottom: var(--spacing-1);

}



.skill-category p {

  color: var(--text-secondary);

  font-size: var(--font-size-sm);

}



/* ===== SKILLS SECTION ===== */

.skills {

  padding: var(--spacing-20) 0;

  background: var(--bg-primary);

  position: relative;

  overflow: hidden;

}



.skills::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: 

    linear-gradient(135deg, transparent 0%, rgba(59, 130, 246, 0.06) 25%, transparent 50%),

    linear-gradient(45deg, transparent 0%, rgba(139, 92, 246, 0.06) 25%, transparent 50%),

    linear-gradient(225deg, transparent 0%, rgba(6, 182, 212, 0.06) 25%, transparent 50%);

  animation: skillsBackgroundWave 12s ease-in-out infinite;

  z-index: 1;

}



.skills::after {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: 

    radial-gradient(circle at 25% 25%, rgba(16, 185, 129, 0.05) 0%, transparent 50%),

    radial-gradient(circle at 75% 75%, rgba(245, 158, 11, 0.05) 0%, transparent 50%),

    radial-gradient(circle at 50% 10%, rgba(239, 68, 68, 0.05) 0%, transparent 50%);

  animation: skillsBackgroundPulse 8s ease-in-out infinite;

  z-index: 1;

}



@keyframes skillsBackgroundWave {

  0%, 100% {

    transform: translateX(0) translateY(0) rotate(0deg);

    opacity: 0.8;

  }

  25% {

    transform: translateX(20px) translateY(-20px) rotate(1deg);

    opacity: 1;

  }

  50% {

    transform: translateX(-20px) translateY(20px) rotate(-1deg);

    opacity: 0.9;

  }

  75% {

    transform: translateX(10px) translateY(-10px) rotate(0.5deg);

    opacity: 0.95;

  }

}



@keyframes skillsBackgroundPulse {

  0%, 100% {

    transform: scale(1);

    opacity: 0.6;

  }

  50% {

    transform: scale(1.1);

    opacity: 0.8;

  }

}



.skills-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

  gap: var(--spacing-6);

  position: relative;

  z-index: 2;

}



.skill-card {

  background: var(--bg-secondary);

  padding: var(--spacing-6);

  border-radius: var(--radius-xl);

  box-shadow: var(--shadow-md);

  transition: all var(--transition-normal);

  border: 1px solid var(--border-color);

  position: relative;

  overflow: hidden;

  backdrop-filter: blur(10px);

}



.skill-card:hover {

  transform: translateY(-8px) scale(1.02);

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(59, 130, 246, 0.2);

  border-color: rgba(59, 130, 246, 0.3);

}



.skill-card::before {

  content: '';

  position: absolute;

  top: 0;

  left: -100%;

  width: 100%;

  height: 100%;

  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);

  transition: left 0.5s ease;

  z-index: 1;

}



.skill-card:hover::before {

  left: 100%;

}



.skill-card::after {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(139, 92, 246, 0.05));

  opacity: 0;

  transition: opacity 0.3s ease;

  border-radius: var(--radius-xl);

  z-index: 0;

}



.skill-card:hover::after {

  opacity: 1;

}



.skill-card h3 {

  font-size: var(--font-size-xl);

  font-weight: 600;

  color: var(--text-primary);

  margin-bottom: var(--spacing-3);

}



.skill-card p {

  color: var(--text-secondary);

  margin-bottom: var(--spacing-4);

  line-height: 1.6;

}



.skill-level {

  margin-top: var(--spacing-4);

}



.skill-bar {

  width: 100%;

  height: 8px;

  background: var(--bg-tertiary);

  border-radius: var(--radius-full);

  overflow: hidden;

  margin-bottom: var(--spacing-2);

}



.skill-progress {

  height: 100%;

  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));

  border-radius: var(--radius-full);

  transition: width 1s ease-in-out;

  position: relative;

  overflow: hidden;

}



.skill-progress::after {

  content: '';

  position: absolute;

  top: 0;

  left: -100%;

  width: 100%;

  height: 100%;

  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);

  animation: shimmer 2s infinite;

}



.skill-percentage {

  font-size: var(--font-size-sm);

  font-weight: 600;

  color: var(--text-secondary);

  text-align: right;

}



/* ===== PROJECTS SECTION - UNIQUE LAYOUT ===== */

.projects {

  padding: var(--spacing-20) 0;

  background: var(--bg-secondary);

  position: relative;

  overflow: hidden;

}



.projects::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: 

    radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),

    radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),

    radial-gradient(circle at 40% 40%, rgba(16, 185, 129, 0.05) 0%, transparent 50%);

  z-index: 1;

}



/* Project Filters */

.project-filters {

  display: flex;

  justify-content: center;

  gap: var(--spacing-4);

  margin-bottom: var(--spacing-12);

  flex-wrap: wrap;

  position: relative;

  z-index: 2;

}



.filter-btn {

  padding: var(--spacing-3) var(--spacing-6);

  background: var(--bg-primary);

  border: 2px solid var(--border-color);

  border-radius: var(--radius-full);

  color: var(--text-secondary);

  font-weight: 600;

  cursor: pointer;

  transition: all var(--transition-fast);

  position: relative;

  overflow: hidden;

  backdrop-filter: blur(10px);

}



.filter-btn::before {

  content: '';

  position: absolute;

  top: 0;

  left: -100%;

  width: 100%;

  height: 100%;

  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);

  transition: left 0.5s ease;

}



.filter-btn:hover::before {

  left: 100%;

}



.filter-btn:hover {

  border-color: var(--primary-color);

  color: var(--primary-color);

  transform: translateY(-2px);

  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.2);

}



.filter-btn.active {

  background: var(--primary-color);

  color: white;

  border-color: var(--primary-color);

  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);

}



/* Projects Showcase */

.projects-showcase {

  position: relative;

  z-index: 2;

}



/* Spotlight Section */

.spotlight-section {

  margin-bottom: var(--spacing-16);

  text-align: center;

}



.spotlight-title {

  font-size: var(--font-size-3xl);

  font-weight: 700;

  color: var(--text-primary);

  margin-bottom: var(--spacing-8);

  position: relative;

  display: inline-block;

}



.spotlight-title::after {

  content: '';

  position: absolute;

  bottom: -8px;

  left: 50%;

  transform: translateX(-50%);

  width: 60px;

  height: 4px;

  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));

  border-radius: var(--radius-full);

}



.spotlight-container {

  max-width: 800px;

  margin: 0 auto;

  position: relative;

}



.spotlight-project {

  background: var(--bg-primary);

  border-radius: var(--radius-3xl);

  overflow: hidden;

  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);

  border: 1px solid var(--border-color);

  position: relative;

  backdrop-filter: blur(20px);

  transition: all var(--transition-normal);

}



.spotlight-project::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(139, 92, 246, 0.05));

  opacity: 0;

  transition: opacity 0.3s ease;

  z-index: 1;

}



.spotlight-project:hover::before {

  opacity: 1;

}



.spotlight-project:hover {

  transform: translateY(-8px) scale(1.02);

  box-shadow: 0 35px 70px rgba(0, 0, 0, 0.2);

}



.spotlight-header {

  padding: var(--spacing-8);

  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

  color: white;

  position: relative;

  z-index: 2;

  text-align: center;

}



.spotlight-title-text {

  font-size: var(--font-size-4xl);

  font-weight: 800;

  margin-bottom: var(--spacing-4);

  display: flex;

  align-items: center;

  justify-content: center;

  gap: var(--spacing-3);

}



.spotlight-badge {

  background: rgba(255, 255, 255, 0.2);

  padding: var(--spacing-2) var(--spacing-4);

  border-radius: var(--radius-full);

  font-size: var(--font-size-lg);

  font-weight: 700;

  backdrop-filter: blur(10px);

  border: 1px solid rgba(255, 255, 255, 0.3);

}



.spotlight-category {

  font-size: var(--font-size-lg);

  opacity: 0.9;

  font-weight: 500;

  margin-bottom: var(--spacing-4);

}



.spotlight-description {

  font-size: var(--font-size-xl);

  line-height: 1.6;

  opacity: 0.95;

}



.spotlight-content {

  padding: var(--spacing-8);

  position: relative;

  z-index: 2;

}



.spotlight-tech {

  display: flex;

  flex-wrap: wrap;

  gap: var(--spacing-3);

  justify-content: center;

  margin-bottom: var(--spacing-8);

}



.spotlight-tech-tag {

  background: var(--bg-secondary);

  color: var(--text-primary);

  padding: var(--spacing-3) var(--spacing-5);

  border-radius: var(--radius-xl);

  font-size: var(--font-size-lg);

  font-weight: 600;

  border: 2px solid var(--border-color);

  transition: all var(--transition-fast);

  position: relative;

  overflow: hidden;

}



.spotlight-tech-tag::before {

  content: '';

  position: absolute;

  top: 0;

  left: -100%;

  width: 100%;

  height: 100%;

  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);

  transition: left 0.5s ease;

}



.spotlight-tech-tag:hover::before {

  left: 100%;

}



.spotlight-tech-tag:hover {

  background: var(--primary-color);

  color: white;

  transform: translateY(-3px) scale(1.05);

  border-color: var(--primary-color);

  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);

}



.spotlight-links {

  display: flex;

  gap: var(--spacing-6);

  justify-content: center;

  flex-wrap: wrap;

}



.spotlight-link {

  display: flex;

  align-items: center;

  gap: var(--spacing-3);

  padding: var(--spacing-4) var(--spacing-8);

  background: var(--primary-color);

  color: white;

  text-decoration: none;

  border-radius: var(--radius-xl);

  font-weight: 700;

  font-size: var(--font-size-lg);

  transition: all var(--transition-fast);

  position: relative;

  overflow: hidden;

  min-width: 160px;

  justify-content: center;

}



.spotlight-link::before {

  content: '';

  position: absolute;

  top: 0;

  left: -100%;

  width: 100%;

  height: 100%;

  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);

  transition: left 0.5s ease;

}



.spotlight-link:hover::before {

  left: 100%;

}



.spotlight-link:hover {

  background: var(--secondary-color);

  transform: translateY(-3px) scale(1.05);

  box-shadow: 0 15px 40px rgba(59, 130, 246, 0.4);

}



.spotlight-link.secondary {

  background: transparent;

  color: var(--primary-color);

  border: 3px solid var(--primary-color);

}



.spotlight-link.secondary:hover {

  background: var(--primary-color);

  color: white;

}



/* Interactive Grid */

.interactive-grid {

  margin-bottom: var(--spacing-16);

}



.grid-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: var(--spacing-8);

  flex-wrap: wrap;

  gap: var(--spacing-4);

}



.grid-title {

  font-size: var(--font-size-3xl);

  font-weight: 700;

  color: var(--text-primary);

  margin: 0;

}



.view-toggle {

  display: flex;

  gap: var(--spacing-2);

  background: var(--bg-primary);

  padding: var(--spacing-2);

  border-radius: var(--radius-xl);

  border: 2px solid var(--border-color);

  backdrop-filter: blur(10px);

}



.view-btn {

  padding: var(--spacing-3) var(--spacing-4);

  background: transparent;

  border: none;

  border-radius: var(--radius-lg);

  color: var(--text-secondary);

  font-weight: 600;

  cursor: pointer;

  transition: all var(--transition-fast);

  display: flex;

  align-items: center;

  gap: var(--spacing-2);

}



.view-btn:hover {

  background: var(--bg-secondary);

  color: var(--text-primary);

}



.view-btn.active {

  background: var(--primary-color);

  color: white;

  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);

}



/* Projects Container */

.projects-container {

  position: relative;

  min-height: 400px;

}



/* Masonry Layout */

.projects-container.masonry {

  columns: 3;

  column-gap: var(--spacing-6);

}



.projects-container.masonry .project-item {

  break-inside: avoid;

  margin-bottom: var(--spacing-6);

  display: inline-block;

  width: 100%;

}



/* Timeline Layout */

.projects-container.timeline {

  position: relative;

}



.projects-container.timeline::before {

  content: '';

  position: absolute;

  left: 50%;

  top: 0;

  bottom: 0;

  width: 4px;

  background: linear-gradient(180deg, var(--primary-color), var(--secondary-color));

  transform: translateX(-50%);

  border-radius: var(--radius-full);

}



.projects-container.timeline .project-item {

  position: relative;

  margin-bottom: var(--spacing-12);

  width: calc(50% - var(--spacing-8));

}



.projects-container.timeline .project-item:nth-child(odd) {

  margin-left: 0;

  margin-right: auto;

  padding-right: var(--spacing-8);

}



.projects-container.timeline .project-item:nth-child(even) {

  margin-left: auto;

  margin-right: 0;

  padding-left: var(--spacing-8);

}



.projects-container.timeline .project-item::before {

  content: '';

  position: absolute;

  top: 20px;

  width: 20px;

  height: 20px;

  background: var(--primary-color);

  border-radius: 50%;

  border: 4px solid var(--bg-secondary);

  z-index: 2;

}



.projects-container.timeline .project-item:nth-child(odd)::before {

  right: -10px;

}



.projects-container.timeline .project-item:nth-child(even)::before {

  left: -10px;

}



/* Cards Layout */

.projects-container.cards {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));

  gap: var(--spacing-8);

}



/* Project Item Styles */

.project-item {

  background: var(--bg-primary);

  border-radius: var(--radius-2xl);

  overflow: hidden;

  box-shadow: var(--shadow-lg);

  transition: all var(--transition-normal);

  border: 1px solid var(--border-color);

  position: relative;

  backdrop-filter: blur(10px);

}



.project-item::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(139, 92, 246, 0.05));

  opacity: 0;

  transition: opacity 0.3s ease;

  z-index: 1;

}



.project-item:hover::before {

  opacity: 1;

}



.project-item:hover {

  transform: translateY(-8px);

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);

  border-color: var(--primary-color);

}



.project-header {

  padding: var(--spacing-6);

  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

  color: white;

  position: relative;

  z-index: 2;

}



.project-title {

  font-size: var(--font-size-xl);

  font-weight: 700;

  margin-bottom: var(--spacing-2);

  display: flex;

  align-items: center;

  gap: var(--spacing-2);

}



.project-badge {

  background: rgba(255, 255, 255, 0.2);

  padding: var(--spacing-1) var(--spacing-3);

  border-radius: var(--radius-full);

  font-size: var(--font-size-sm);

  font-weight: 600;

  backdrop-filter: blur(10px);

}



.project-category {

  font-size: var(--font-size-sm);

  opacity: 0.9;

  font-weight: 500;

}



.project-content {

  padding: var(--spacing-6);

  position: relative;

  z-index: 2;

}



.project-description {

  color: var(--text-secondary);

  margin-bottom: var(--spacing-4);

  line-height: 1.6;

  font-size: var(--font-size-base);

}



.project-tech {

  display: flex;

  flex-wrap: wrap;

  gap: var(--spacing-2);

  margin-bottom: var(--spacing-6);

}



.tech-tag {

  background: var(--bg-secondary);

  color: var(--text-primary);

  padding: var(--spacing-2) var(--spacing-3);

  border-radius: var(--radius-lg);

  font-size: var(--font-size-sm);

  font-weight: 500;

  border: 1px solid var(--border-color);

  transition: all var(--transition-fast);

}



.tech-tag:hover {

  background: var(--primary-color);

  color: white;

  transform: translateY(-2px);

}



.project-links {

  display: flex;

  gap: var(--spacing-3);

  justify-content: center;

  flex-wrap: wrap;

}



.project-link {

  display: flex;

  align-items: center;

  gap: var(--spacing-2);

  padding: var(--spacing-3) var(--spacing-5);

  background: var(--primary-color);

  color: white;

  text-decoration: none;

  border-radius: var(--radius-lg);

  font-weight: 600;

  transition: all var(--transition-fast);

  position: relative;

  overflow: hidden;

}



.project-link::before {

  content: '';

  position: absolute;

  top: 0;

  left: -100%;

  width: 100%;

  height: 100%;

  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);

  transition: left 0.5s ease;

}



.project-link:hover::before {

  left: 100%;

}



.project-link:hover {

  background: var(--secondary-color);

  transform: translateY(-2px);

  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);

}



.project-link.secondary {

  background: transparent;

  color: var(--primary-color);

  border: 2px solid var(--primary-color);

}



.project-link.secondary:hover {

  background: var(--primary-color);

  color: white;

}



.project-link.github {

  background: linear-gradient(135deg, #ffffff, #f8f9fa);

  color: #24292e;

  border: 2px solid #24292e;

  font-weight: 700;

  text-shadow: none;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

}



.project-link.github:hover {

  background: linear-gradient(135deg, #24292e, #2d3748);

  color: white;

  transform: translateY(-2px);

  box-shadow: 0 8px 25px rgba(36, 41, 46, 0.4);

  text-shadow: none;

}



/* Project Stats */

.project-stats {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

  gap: var(--spacing-6);

  margin-top: var(--spacing-16);

  position: relative;

  z-index: 2;

}



.stat-item {

  background: var(--bg-primary);

  padding: var(--spacing-8);

  border-radius: var(--radius-2xl);

  text-align: center;

  box-shadow: var(--shadow-lg);

  border: 1px solid var(--border-color);

  backdrop-filter: blur(10px);

  transition: all var(--transition-normal);

  position: relative;

  overflow: hidden;

}



.stat-item::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(139, 92, 246, 0.05));

  opacity: 0;

  transition: opacity 0.3s ease;

  z-index: 1;

}



.stat-item:hover::before {

  opacity: 1;

}



.stat-item:hover {

  transform: translateY(-5px);

  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);

  border-color: var(--primary-color);

}



.stat-number {

  font-size: var(--font-size-5xl);

  font-weight: 800;

  color: var(--primary-color);

  margin-bottom: var(--spacing-2);

  position: relative;

  z-index: 2;

}



.stat-label {

  font-size: var(--font-size-lg);

  font-weight: 600;

  color: var(--text-secondary);

  position: relative;

  z-index: 2;

}



/* Hidden class for filtering */

.project-item.hidden {

  display: none;

}



.projects::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: 

    conic-gradient(from 45deg at 20% 20%, transparent 0deg, rgba(59, 130, 246, 0.04) 90deg, transparent 180deg),

    conic-gradient(from 225deg at 80% 80%, transparent 0deg, rgba(139, 92, 246, 0.04) 90deg, transparent 180deg),

    conic-gradient(from 135deg at 50% 50%, transparent 0deg, rgba(6, 182, 212, 0.04) 90deg, transparent 180deg);

  animation: projectsBackgroundRotate 20s linear infinite;

  z-index: 1;

}



.projects::after {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: 

    radial-gradient(ellipse at 30% 70%, rgba(16, 185, 129, 0.06) 0%, transparent 60%),

    radial-gradient(ellipse at 70% 30%, rgba(245, 158, 11, 0.06) 0%, transparent 60%),

    radial-gradient(ellipse at 50% 50%, rgba(239, 68, 68, 0.04) 0%, transparent 70%);

  animation: projectsBackgroundFloat 14s ease-in-out infinite;

  z-index: 1;

}



@keyframes projectsBackgroundRotate {

  0% {

    transform: rotate(0deg) scale(1);

  }

  50% {

    transform: rotate(180deg) scale(1.05);

  }

  100% {

    transform: rotate(360deg) scale(1);

  }

}



@keyframes projectsBackgroundFloat {

  0%, 100% {

    transform: translateY(0) scale(1);

    opacity: 0.7;

  }

  33% {

    transform: translateY(-25px) scale(1.02);

    opacity: 0.9;

  }

  66% {

    transform: translateY(15px) scale(0.98);

    opacity: 0.8;

  }

}



.projects-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));

  gap: var(--spacing-6);

  position: relative;

  z-index: 2;

}



.project-card {

  background: var(--bg-primary);

  border-radius: var(--radius-xl);

  box-shadow: var(--shadow-md);

  overflow: hidden;

  transition: all var(--transition-normal);

  border: 1px solid var(--border-color);

  position: relative;

}



.project-card::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(139, 92, 246, 0.05));

  opacity: 0;

  transition: opacity 0.3s ease;

  z-index: 1;

}



.project-card:hover::before {

  opacity: 1;

}



.project-card:hover {

  transform: translateY(-8px) scale(1.02);

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(59, 130, 246, 0.2);

  border-color: rgba(59, 130, 246, 0.3);

}



.project-card h3 {

  font-size: var(--font-size-xl);

  font-weight: 600;

  color: var(--text-primary);

  margin-bottom: var(--spacing-3);

}



.project-card p {

  color: var(--text-secondary);

  margin-bottom: var(--spacing-4);

  line-height: 1.6;

}



.project-tech {

  display: flex;

  flex-wrap: wrap;

  gap: var(--spacing-2);

  margin-bottom: var(--spacing-4);

}



.tech-tag {

  background: var(--primary-color);

  color: white;

  padding: var(--spacing-1) var(--spacing-3);

  border-radius: var(--radius-full);

  font-size: var(--font-size-xs);

  font-weight: 500;

}



.project-links {

  display: flex;

  gap: var(--spacing-3);

}



.project-link {

  color: var(--primary-color);

  text-decoration: none;

  font-weight: 500;

  display: flex;

  align-items: center;

  gap: var(--spacing-2);

  transition: color var(--transition-fast);

}



.project-link:hover {

  color: var(--secondary-color);

}



/* ===== SERVICES SECTION ===== */

.services {

  padding: var(--spacing-20) 0;

  background: var(--bg-secondary);

  position: relative;

  overflow: hidden;

}



.services::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: 

    radial-gradient(circle at 30% 20%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),

    radial-gradient(circle at 70% 80%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);

  z-index: 1;

}



.services::after {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: 

    radial-gradient(circle at 25% 25%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),

    radial-gradient(circle at 75% 75%, rgba(139, 92, 246, 0.08) 0%, transparent 50%),

    radial-gradient(circle at 50% 50%, rgba(6, 182, 212, 0.06) 0%, transparent 60%);

  animation: servicesBackgroundFloat 12s ease-in-out infinite;

  z-index: 1;

}



/* Creative Services Container */

.services-container {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  align-items: center;

  gap: var(--spacing-8);

  position: relative;

  z-index: 2;

  max-width: 1200px;

  margin: 0 auto;

  padding: var(--spacing-8);

}



/* Interactive Services Timeline */

.services-timeline {

  position: relative;

  margin-top: 4rem;

  padding: 0 1rem;

  max-width: 1000px;

  margin-left: auto;

  margin-right: auto;

}



.services-timeline::before {

  content: '';

  position: absolute;

  left: 2rem;

  top: 0;

  bottom: 0;

  width: 4px;

  background: linear-gradient(180deg, var(--primary-color), var(--secondary-color));

  border-radius: 2px;

}



.timeline-item {

  position: relative;

  margin-bottom: 4rem;

  display: flex;

  align-items: flex-start;

  gap: 2rem;

  opacity: 0;

  transform: translateX(-50px);

  animation: slideInFromLeft 0.8s ease-out forwards;

}



.timeline-item:nth-child(1) { animation-delay: 0.1s; }

.timeline-item:nth-child(2) { animation-delay: 0.2s; }

.timeline-item:nth-child(3) { animation-delay: 0.3s; }

.timeline-item:nth-child(4) { animation-delay: 0.4s; }

.timeline-item:nth-child(5) { animation-delay: 0.5s; }



@keyframes slideInFromLeft {

  to {

    opacity: 1;

    transform: translateX(0);

  }

}



.timeline-marker {

  position: relative;

  flex-shrink: 0;

  width: 4rem;

  height: 4rem;

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 2;

}



.marker-icon {

  width: 4rem;

  height: 4rem;

  background: var(--bg-primary);

  border: 4px solid var(--primary-color);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: all 0.3s ease;

  position: relative;

  z-index: 2;

}



.timeline-item:hover .marker-icon {

  transform: scale(1.1);

  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);

}



.marker-icon i {

  font-size: 1.5rem;

  color: var(--primary-color);

  transition: all 0.3s ease;

}



.timeline-item:hover .marker-icon i {

  transform: scale(1.1);

}



.marker-pulse {

  position: absolute;

  width: 4rem;

  height: 4rem;

  border: 2px solid var(--primary-color);

  border-radius: 50%;

  animation: pulse 2s infinite;

  opacity: 0.6;

}



@keyframes pulse {

  0% {

    transform: scale(1);

    opacity: 0.6;

  }

  50% {

    transform: scale(1.2);

    opacity: 0.3;

  }

  100% {

    transform: scale(1.4);

    opacity: 0;

  }

}



.timeline-content {

  flex: 1;

  background: var(--bg-secondary);

  border: 1px solid var(--border-color);

  border-radius: 16px;

  padding: 2rem;

  transition: all 0.3s ease;

  position: relative;

  overflow: hidden;

}



.timeline-content::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: linear-gradient(135deg, rgba(59, 130, 246, 0.02), rgba(139, 92, 246, 0.02));

  opacity: 0;

  transition: opacity 0.3s ease;

  z-index: 1;

}



.timeline-item:hover .timeline-content::before {

  opacity: 1;

}



.timeline-item:hover .timeline-content {

  transform: translateY(-5px);

  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);

  border-color: var(--primary-color);

}



.service-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 1rem;

  position: relative;

  z-index: 2;

}



.service-header h3 {

  font-size: 1.5rem;

  font-weight: 700;

  color: var(--text-primary);

  margin: 0;

  background: linear-gradient(135deg, var(--text-primary), var(--primary-color));

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

}



.service-badge {

  background: linear-gradient(135deg, #f59e0b, #f97316);

  color: white;

  padding: 0.5rem 1rem;

  border-radius: 20px;

  font-size: 0.75rem;

  font-weight: 700;

  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);

  animation: pulse 2s infinite;

}



.service-description {

  color: var(--text-secondary);

  line-height: 1.6;

  margin-bottom: 1.5rem;

  position: relative;

  z-index: 2;

  font-size: 1rem;

}



.service-details {

  position: relative;

  z-index: 2;

}



.features-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

  gap: 1rem;

}



.feature-item {

  display: flex;

  align-items: center;

  gap: 0.75rem;

  padding: 0.75rem;

  background: var(--bg-primary);

  border: 1px solid var(--border-color);

  border-radius: 8px;

  transition: all 0.3s ease;

  cursor: pointer;

}



.feature-item:hover {

  transform: translateY(-2px);

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

  border-color: var(--primary-color);

}



.feature-item i {

  color: var(--primary-color);

  font-size: 1rem;

  width: 20px;

  text-align: center;

}



.feature-item span {

  color: var(--text-primary);

  font-size: 0.9rem;

  font-weight: 500;

}



/* Service-specific styling */

.timeline-item[data-service="ml"] .marker-icon {

  border-color: #8b5cf6;

}



.timeline-item[data-service="ml"] .marker-icon i {

  color: #8b5cf6;

}



.timeline-item[data-service="web"] .marker-icon {

  border-color: #22c55e;

}



.timeline-item[data-service="web"] .marker-icon i {

  color: #22c55e;

}



.timeline-item[data-service="data"] .marker-icon {

  border-color: #a855f7;

}



.timeline-item[data-service="data"] .marker-icon i {

  color: #a855f7;

}



.timeline-item[data-service="ai"] .marker-icon {

  border-color: #ef4444;

}



.timeline-item[data-service="ai"] .marker-icon i {

  color: #ef4444;

}



.timeline-item[data-service="vision"] .marker-icon {

  border-color: #3b82f6;

}



.timeline-item[data-service="vision"] .marker-icon i {

  color: #3b82f6;

}



/* Mobile Responsive */

@media (max-width: 768px) {

  .services-timeline {

    padding: 0;

  }

  

  .services-timeline::before {

    left: 1.5rem;

  }

  

  .timeline-item {

    flex-direction: column;

    align-items: center;

    text-align: center;

    gap: 1rem;

  }

  

  .timeline-marker {

    width: 3rem;

    height: 3rem;

  }

  

  .marker-icon {

    width: 3rem;

    height: 3rem;

  }

  

  .marker-icon i {

    font-size: 1.25rem;

  }

  

  .timeline-content {

    padding: 1.5rem;

  }

  

  .service-header {

    flex-direction: column;

    gap: 1rem;

    text-align: center;

  }

  

  .features-grid {

    grid-template-columns: 1fr;

  }

}



.service-hexagon:nth-child(1) { --i: 0; }

.service-hexagon:nth-child(2) { --i: 1; }

.service-hexagon:nth-child(3) { --i: 2; }

.service-hexagon:nth-child(4) { --i: 3; }

.service-hexagon:nth-child(5) { --i: 4; }



.service-hexagon::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

  clip-path: polygon(30% 0%, 70% 0%, 100% 50%, 70% 100%, 30% 100%, 0% 50%);

  transition: all 0.3s ease;

  z-index: 1;

}



.service-hexagon::after {

  content: '';

  position: absolute;

  top: 4px;

  left: 4px;

  width: calc(100% - 8px);

  height: calc(100% - 8px);

  background: var(--bg-primary);

  clip-path: polygon(30% 0%, 70% 0%, 100% 50%, 70% 100%, 30% 100%, 0% 50%);

  transition: all 0.3s ease;

  z-index: 2;

}



.service-hexagon:hover {

  transform: translateY(-20px) scale(1.1) rotateY(10deg);

}



.service-hexagon:hover::before {

  background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));

  box-shadow: 0 20px 40px rgba(59, 130, 246, 0.3);

}



.service-hexagon.featured::before {

  background: linear-gradient(135deg, #f59e0b, #f97316);

  box-shadow: 0 0 30px rgba(245, 158, 11, 0.4);

}



.service-hexagon.featured:hover::before {

  background: linear-gradient(135deg, #f97316, #f59e0b);

  box-shadow: 0 20px 40px rgba(245, 158, 11, 0.5);

}



/* Hexagon Inner Content */

.hexagon-inner {

  position: relative;

  z-index: 3;

  height: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  padding: var(--spacing-4);

  transition: all 0.3s ease;

}



.service-icon {

  width: 60px;

  height: 60px;

  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: var(--spacing-3);

  transition: all 0.3s ease;

  position: relative;

}



.service-hexagon.featured .service-icon {

  background: linear-gradient(135deg, #f59e0b, #f97316);

}



.service-icon i {

  font-size: var(--font-size-2xl);

  color: white;

  transition: all 0.3s ease;

}



.service-hexagon:hover .service-icon {

  transform: scale(1.2) rotate(360deg);

}



.service-hexagon h3 {

  font-size: var(--font-size-sm);

  font-weight: 600;

  color: var(--text-primary);

  margin: 0;

  line-height: 1.2;

  transition: all 0.3s ease;

}



.service-hexagon:hover h3 {

  color: var(--primary-color);

  transform: scale(1.1);

}



.featured-badge {

  position: absolute;

  top: -8px;

  right: -8px;

  background: linear-gradient(135deg, #f59e0b, #f97316);

  color: white;

  width: 24px;

  height: 24px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: var(--font-size-xs);

  font-weight: bold;

  box-shadow: 0 4px 8px rgba(245, 158, 11, 0.3);

  animation: pulse 2s infinite;

}



/* Service Details Modal - New Approach */

.service-modal {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, 0.8);

  display: none;

  align-items: center;

  justify-content: center;

  z-index: 100000;

  backdrop-filter: none;

}



.service-modal.active {

  display: flex;

}



.service-modal-content {

  background: #ffffff;

  border-radius: var(--radius-xl);

  padding: var(--spacing-8);

  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);

  border: 2px solid var(--primary-color);

  min-width: 400px;

  max-width: 500px;

  max-height: 80vh;

  overflow-y: auto;

  position: relative;

  transform: scale(1);

  transition: transform 0.3s ease;

}



.service-modal.active .service-modal-content {

  transform: scale(1);

}



.service-modal-close {

  position: absolute;

  top: var(--spacing-4);

  right: var(--spacing-4);

  width: 32px;

  height: 32px;

  background: var(--bg-secondary);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: var(--font-size-xl);

  font-weight: bold;

  color: var(--text-secondary);

  cursor: pointer;

  transition: all 0.3s ease;

  border: none;

}



.service-modal-close:hover {

  background: var(--primary-color);

  color: white;

  transform: rotate(90deg);

}



.service-modal-content h3 {

  font-size: var(--font-size-2xl);

  font-weight: 700;

  color: var(--text-primary);

  margin-bottom: var(--spacing-4);

  text-align: center;

  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

}



.service-modal-content p {

  color: var(--text-secondary);

  margin-bottom: var(--spacing-6);

  line-height: 1.6;

  text-align: center;

}



@keyframes servicesBackgroundFloat {

  0%, 100% {

    transform: translateY(0) scale(1);

    opacity: 0.8;

  }

  50% {

    transform: translateY(-20px) scale(1.02);

    opacity: 1;

  }

}



@keyframes pulse {

  0%, 100% {

    transform: scale(1);

    opacity: 1;

  }

  50% {

    transform: scale(1.1);

    opacity: 0.8;

  }

}



@keyframes hexagonFloat {

  0%, 100% {

    transform: translateY(0) rotate(0deg);

  }

  50% {

    transform: translateY(-10px) rotate(2deg);

  }

}



/* Add floating animation to hexagons */

.service-hexagon {

  animation: hexagonFloat 6s ease-in-out infinite;

}



.service-hexagon:nth-child(odd) {

  animation-delay: 0.5s;

}



.service-hexagon:nth-child(even) {

  animation-delay: 1s;

}



/* ===== SCROLL PROGRESS BAR ===== */

.scroll-progress {

    position: fixed;

    top: 0;

    left: 0;

    width: 0%;

    height: 4px;

    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));

    z-index: 9999;

    transition: width 0.1s ease;

    box-shadow: 0 2px 10px rgba(59, 130, 246, 0.3);

}



/* ===== BACK TO TOP BUTTON ===== */

.back-to-top {

    position: fixed;

    bottom: 30px;

    right: 30px;

    width: 50px;

    height: 50px;

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    color: white;

    border: none;

    border-radius: 50%;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 18px;

    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3);

    transition: all 0.3s ease;

    opacity: 0;

    visibility: hidden;

    transform: translateY(20px);

    z-index: 1000;

}



.back-to-top:hover {

    transform: translateY(-3px);

    box-shadow: 0 6px 25px rgba(59, 130, 246, 0.4);

}



.back-to-top.visible {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}



.back-to-top i {

    transition: transform 0.3s ease;

}



.back-to-top:hover i {

    transform: translateY(-2px);

}



/* ===== COPY EMAIL BUTTON ===== */

.copy-email-btn {

    background: var(--bg-secondary);

    border: 1px solid var(--border-color);

    color: var(--text-secondary);

    width: 32px;

    height: 32px;

    border-radius: 50%;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 12px;

    margin-left: 10px;

    transition: all 0.3s ease;

    opacity: 0.7;

}



.copy-email-btn:hover {

    background: var(--primary-color);

    color: white;

    border-color: var(--primary-color);

    transform: scale(1.1);

    opacity: 1;

}



.copy-email-btn.copied {

    background: #10b981;

    color: white;

    border-color: #10b981;

}



.copy-email-btn.copied i::before {

    content: '\f00c';

}



/* ===== COMPREHENSIVE MOBILE RESPONSIVE STYLES ===== */



/* Mobile Navigation */

.mobile-menu-toggle {

    display: none;

    flex-direction: column;

    justify-content: space-around;

    width: 30px;

    height: 30px;

    background: transparent;

    border: none;

    cursor: pointer;

    padding: 0;

    z-index: 1001;

    position: relative;

}



.mobile-menu-toggle span {

    width: 100%;

    height: 3px;

    background: var(--text-primary);

    border-radius: 2px;

    transition: all 0.3s ease;

    transform-origin: center;

    display: block;

}



.mobile-menu-toggle.active span:nth-child(1) {

    transform: rotate(45deg) translate(6px, 6px);

}



.mobile-menu-toggle.active span:nth-child(2) {

    opacity: 0;

}



.mobile-menu-toggle.active span:nth-child(3) {

    transform: rotate(-45deg) translate(6px, -6px);

}



@media (max-width: 768px) {

    .mobile-menu-toggle {

        display: flex !important;

    }

    

    .nav-menu {

        position: fixed;

        top: 0;

        left: -100%;

        width: 100%;

        height: 100vh;

        background: var(--bg-primary);

        flex-direction: column;

        justify-content: center;

        align-items: center;

        transition: left 0.3s ease;

        z-index: 1000;

        gap: var(--spacing-6);

        display: flex;

        padding: var(--spacing-8);

        box-sizing: border-box;

    }

    

    .nav-menu.active {

        left: 0 !important;

        display: flex !important;

    }

    

    .nav-link {

        font-size: var(--font-size-xl);

        padding: var(--spacing-4) var(--spacing-6);

        display: block;

        text-align: center;

        color: var(--text-primary);

        text-decoration: none;

        transition: color 0.3s ease;

        width: 100%;

        border-radius: var(--radius-lg);

    }

    

    .nav-link:hover {

        color: var(--primary-color);

        background: var(--bg-secondary);

    }

    

    .nav-actions {

        display: flex;

        align-items: center;

        gap: var(--spacing-3);

    }

    

    /* Hide regular nav menu on mobile */

    .nav-menu:not(.active) {

        display: none;

    }

}



/* Prevent body scroll when mobile menu is open */

body.menu-open {

    overflow: hidden;

}



/* Mobile menu overlay */

@media (max-width: 768px) {

    .nav-menu::before {

        content: '';

        position: fixed;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

        background: rgba(0, 0, 0, 0.5);

        z-index: -1;

        opacity: 0;

        transition: opacity 0.3s ease;

    }

    

    .nav-menu.active::before {

        opacity: 1;

    }

    

    /* Ensure mobile menu is visible when active */

    .nav-menu.active {

        display: flex !important;

        left: 0 !important;

        visibility: visible !important;

        opacity: 1 !important;

    }

    

    /* Make sure mobile menu toggle is visible */

    .mobile-menu-toggle {

        display: flex !important;

        visibility: visible !important;

    }

    

    /* Ensure nav menu is hidden by default on mobile */

    .nav-menu {

        visibility: hidden;

        opacity: 0;

    }

    

    .nav-menu.active {

        visibility: visible;

        opacity: 1;

    }

}



/* Mobile Hero Section */

@media (max-width: 768px) {

    .hero {

        padding: var(--spacing-16) 0 var(--spacing-12);

        text-align: center;

        min-height: 80vh;

        display: flex;

        align-items: center;

        animation: fadeInUp 1s ease-out;

    }

    

    .hero-content {

        width: 100%;

        max-width: 100%;

    }

    

    .hero-content h1 {

        font-size: 2.2rem;

        line-height: 1.2;

        margin-bottom: var(--spacing-4);

        word-wrap: break-word;

        overflow-wrap: break-word;

        hyphens: auto;

        padding: 0 var(--spacing-2);

    }

    

    .hero-content .highlight {

        font-size: 2.5rem;

        display: block;

        margin-bottom: var(--spacing-2);

        line-height: 1.1;

    }

    

    .hero-content p {

        font-size: var(--font-size-lg);

        margin-bottom: var(--spacing-6);

        max-width: 90%;

        margin-left: auto;

        margin-right: auto;

    }

    

    .hero-buttons {

        flex-direction: column;

        gap: var(--spacing-4);

        align-items: center;

        margin-top: var(--spacing-6);

    }

    

    .hero-buttons .btn {

        width: 100%;

        max-width: 300px;

        padding: var(--spacing-3) var(--spacing-6);

        font-size: var(--font-size-lg);

    }

}



@media (max-width: 480px) {

    .hero {

        padding: var(--spacing-12) 0 var(--spacing-8);

        min-height: 70vh;

    }

    

    .hero-content h1 {

        font-size: 1.8rem;

        line-height: 1.3;

        margin-bottom: var(--spacing-3);

        padding: 0 var(--spacing-1);

    }

    

    .hero-content .highlight {

        font-size: 2.2rem;

        display: block;

        margin-bottom: var(--spacing-2);

        line-height: 1.2;

    }

    

    .hero-content p {

        font-size: var(--font-size-base);

        margin-bottom: var(--spacing-5);

        max-width: 95%;

    }

    

    .hero-buttons {

        gap: var(--spacing-3);

        margin-top: var(--spacing-5);

    }

    

    .hero-buttons .btn {

        max-width: 280px;

        padding: var(--spacing-2) var(--spacing-5);

        font-size: var(--font-size-base);

    }

}



/* Mobile About Section */

@media (max-width: 768px) {

    .about-content {

        grid-template-columns: 1fr;

        gap: var(--spacing-8);

        text-align: center;

    }

    

    .about-text {

        order: 2;

    }

    

    .about-image {

        order: 1;

        max-width: 300px;

        margin: 0 auto;

    }

}



/* Mobile Skills Section */

@media (max-width: 768px) {

    .skills-grid {

        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

        gap: var(--spacing-5);

        padding: 0 var(--spacing-2);

    }

    

    .skill-card {

        padding: var(--spacing-5);

        border-radius: 12px;

        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

    }

    

    .skill-icon {

        width: 60px;

        height: 60px;

        font-size: var(--font-size-2xl);

        margin-bottom: var(--spacing-3);

    }

    

    .skill-name {

        font-size: var(--font-size-lg);

        font-weight: 600;

        margin-bottom: var(--spacing-2);

    }

    

    .skill-description {

        font-size: var(--font-size-sm);

        line-height: 1.5;

    }

}



@media (max-width: 480px) {

    .skills-grid {

        grid-template-columns: 1fr;

    }

    

    .skill-card {

        padding: var(--spacing-3);

    }

}



/* Mobile Projects Section */

@media (max-width: 768px) {

    .projects-grid {

        grid-template-columns: 1fr;

        gap: var(--spacing-6);

        padding: 0 var(--spacing-2);

    }

    

    .project-card {

        margin-bottom: var(--spacing-4);

        padding: var(--spacing-5);

        max-width: 100%;

        border-radius: 12px;

        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);

    }

    

    .project-image {

        height: 220px;

        border-radius: 8px;

    }

    

    .project-content h3 {

        font-size: var(--font-size-xl);

        font-weight: 600;

        margin-bottom: var(--spacing-3);

    }

    

    .project-content p {

        font-size: var(--font-size-base);

        line-height: 1.6;

        margin-bottom: var(--spacing-4);

    }

    

    .project-tech {

        gap: var(--spacing-2);

        margin-bottom: var(--spacing-4);

    }

    

    .tech-tag {

        font-size: var(--font-size-sm);

        padding: var(--spacing-2) var(--spacing-3);

        border-radius: 20px;

    }

    

    .project-links {

        gap: var(--spacing-3);

        flex-direction: column;

    }

    

    .project-link {

        padding: var(--spacing-3) var(--spacing-5);

        font-size: var(--font-size-base);

        font-weight: 500;

        width: 100%;

        text-align: center;

    }

    

    .project-filters {

        flex-wrap: wrap;

        gap: var(--spacing-2);

        justify-content: center;

        margin-bottom: var(--spacing-6);

    }

    

    .filter-btn {

        padding: var(--spacing-2) var(--spacing-4);

        font-size: var(--font-size-sm);

        border-radius: 20px;

    }

}



@media (max-width: 480px) {

    .project-card {

        padding: var(--spacing-3);

    }

    

    .project-image {

        height: 180px;

    }

    

    .project-content h3 {

        font-size: var(--font-size-base);

    }

    

    .project-content p {

        font-size: var(--font-size-xs);

    }

}



/* Mobile Services Section */

@media (max-width: 768px) {

    .services-container {

        gap: var(--spacing-6);

        padding: var(--spacing-4);

        justify-content: center;

    }

    

    .service-hexagon {

        width: 160px;

        height: 160px;

        margin: var(--spacing-2);

    }

    

    .service-icon {

        width: 50px;

        height: 50px;

    }

    

    .service-icon i {

        font-size: var(--font-size-xl);

    }

    

    .service-hexagon h3 {

        font-size: var(--font-size-sm);

        font-weight: 600;

        line-height: 1.3;

    }

    

    .service-modal-content {

        min-width: 90vw;

        max-width: 90vw;

        max-height: 80vh;

        padding: var(--spacing-6);

    }

    

    .service-modal-content h3 {

        font-size: var(--font-size-xl);

        margin-bottom: var(--spacing-4);

    }

    

    .feature-tag {

        font-size: var(--font-size-xs);

        padding: var(--spacing-1) var(--spacing-2);

    }

}



@media (max-width: 480px) {

    .services-container {

        flex-direction: column;

        align-items: center;

    }

    

    .service-hexagon {

        width: 120px;

        height: 120px;

    }

    

}



/* Mobile Contact Section */

@media (max-width: 768px) {

    .contact-content {

        grid-template-columns: 1fr;

        gap: var(--spacing-10);

    }

    

    .contact-info {

        text-align: center;

        padding: var(--spacing-4);

    }

    

    .contact-items {

        align-items: center;

        gap: var(--spacing-6);

        margin-bottom: var(--spacing-8);

    }

    

    .contact-item {

        flex-direction: column;

        text-align: center;

        gap: var(--spacing-3);

        padding: var(--spacing-4);

        border-radius: 12px;

        background: var(--bg-secondary);

        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

        width: 100%;

        max-width: 300px;

    }

    

    .contact-item i {

        font-size: var(--font-size-3xl);

        color: var(--primary-color);

    }

    

    .contact-item span {

        font-size: var(--font-size-lg);

        font-weight: 500;

    }

    

    .social-links {

        justify-content: center;

        gap: var(--spacing-4);

    }

    

    .contact-form {

        padding: var(--spacing-6);

        border-radius: 12px;

        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);

    }

}



@media (max-width: 480px) {

    .contact {

        padding: var(--spacing-16) 0;

    }

    

    .contact-form {

        padding: var(--spacing-4);

    }

    

    .form-group input,

    .form-group textarea {

        font-size: 16px; /* Prevents zoom on iOS */

    }

}



/* Mobile WhatsApp Widget */

@media (max-width: 768px) {

    .whatsapp-widget {

        bottom: 15px;

        right: 15px;

    }

    

    .whatsapp-chat {

        width: 320px;

        height: 450px;

        right: -10px;

    }

}



@media (max-width: 480px) {

    .whatsapp-chat {

        width: 280px;

        height: 400px;

        right: -20px;

    }

    

    .whatsapp-actions {

        padding: 10px 15px;

    }

    

    .whatsapp-action-btn {

        padding: 10px 12px;

        font-size: 13px;

    }

}



/* Mobile Back to Top Button */

@media (max-width: 768px) {

    .back-to-top {

        bottom: 20px;

        right: 20px;

        width: 45px;

        height: 45px;

        font-size: 16px;

    }

}



@media (max-width: 480px) {

    .back-to-top {

        bottom: 15px;

        right: 15px;

        width: 40px;

        height: 40px;

        font-size: 14px;

    }

}



/* Mobile Copy Email Button */

@media (max-width: 768px) {

    .copy-email-btn {

        width: 28px;

        height: 28px;

        font-size: 11px;

        margin-left: 8px;

    }

}



@media (max-width: 480px) {

    .copy-email-btn {

        width: 26px;

        height: 26px;

        font-size: 10px;

        margin-left: 6px;

    }

}



/* Mobile Notifications */

@media (max-width: 768px) {

    .notification {

        right: var(--spacing-4);

        left: var(--spacing-4);

        max-width: none;

    }

    

    .notification-content {

        padding: var(--spacing-3) var(--spacing-4);

    }

}



/* Mobile Typography */

@media (max-width: 768px) {

    .section-title {

        font-size: var(--font-size-3xl);

    }

    

    .section-subtitle {

        font-size: var(--font-size-lg);

    }

    

    h1 { font-size: var(--font-size-4xl); }

    h2 { font-size: var(--font-size-3xl); }

    h3 { font-size: var(--font-size-2xl); }

    h4 { font-size: var(--font-size-xl); }

    h5 { font-size: var(--font-size-lg); }

    h6 { font-size: var(--font-size-base); }

}



@media (max-width: 480px) {

    .section-title {

        font-size: var(--font-size-2xl);

    }

    

    .section-subtitle {

        font-size: var(--font-size-base);

    }

    

    h1 { font-size: var(--font-size-3xl); }

    h2 { font-size: var(--font-size-2xl); }

    h3 { font-size: var(--font-size-xl); }

}



/* Mobile Container */

@media (max-width: 768px) {

    .container {

        padding: 0 var(--spacing-4);

        max-width: 100%;

    }

    

    .section {

        padding: var(--spacing-12) 0;

    }

    

    .section-header {

        margin-bottom: var(--spacing-8);

        text-align: center;

    }

}



/* Mobile Touch Targets */

@media (max-width: 768px) {

    .btn,

    .nav-link,

    .social-link,

    .project-link,

    .whatsapp-action-btn,

    .copy-email-btn,

    .back-to-top {

        min-height: 44px;

        min-width: 44px;

    }

}



/* Mobile Scroll Progress */

@media (max-width: 768px) {

    .scroll-progress {

        height: 3px;

    }

}



/* Mobile Form Improvements */

@media (max-width: 768px) {

    .form-row {

        grid-template-columns: 1fr;

        gap: var(--spacing-3);

    }

    

    .form-actions {

        flex-direction: column;

        align-items: center;

    }

    

    .form-actions .btn {

        width: 100%;

        max-width: 300px;

    }

}



/* Mobile Freelance Request */

@media (max-width: 768px) {

    .freelance-request {

        padding: var(--spacing-6);

        margin: var(--spacing-8) 0;

    }

    

    .request-content h3 {

        font-size: var(--font-size-2xl);

    }

    

    .request-content p {

        font-size: var(--font-size-base);

    }

}



@media (max-width: 480px) {

    .freelance-request {

        padding: var(--spacing-4);

        margin: var(--spacing-6) 0;

    }

    

    .request-content h3 {

        font-size: var(--font-size-xl);

    }

}



/* ===== WHATSAPP CHAT WIDGET ===== */

.whatsapp-widget {

    position: fixed;

    bottom: 20px;

    right: 20px;

    z-index: 1000;

    font-family: 'Inter', sans-serif;

}



.whatsapp-chat {

    position: absolute;

    bottom: 0;

    right: 0;

    width: 350px;

    height: 500px;

    background: white;

    border-radius: 20px;

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);

    display: none;

    flex-direction: column;

    overflow: hidden;

    border: 1px solid #e0e0e0;

}



.whatsapp-chat.active {

    display: flex;

    animation: whatsappSlideUp 0.3s ease;

}



@keyframes whatsappSlideUp {

    from {

        opacity: 0;

        transform: translateY(20px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



.whatsapp-header {

    background: linear-gradient(135deg, #25D366, #128C7E);

    color: white;

    padding: 15px 20px;

    display: flex;

    align-items: center;

    gap: 12px;

}



.whatsapp-avatar {

    width: 40px;

    height: 40px;

    background: rgba(255, 255, 255, 0.2);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 18px;

}



.whatsapp-info h4 {

    margin: 0;

    font-size: 16px;

    font-weight: 600;

}



.whatsapp-info p {

    margin: 0;

    font-size: 12px;

    opacity: 0.9;

}



.whatsapp-close {

    background: none;

    border: none;

    color: white;

    font-size: 18px;

    cursor: pointer;

    margin-left: auto;

    padding: 5px;

    border-radius: 50%;

    transition: background 0.3s ease;

}



.whatsapp-close:hover {

    background: rgba(255, 255, 255, 0.2);

}



.whatsapp-messages {

    flex: 1;

    padding: 20px;

    overflow-y: auto;

    background: #f8f9fa;

}



.whatsapp-message {

    margin-bottom: 15px;

    padding: 12px 16px;

    border-radius: 18px;

    max-width: 80%;

    word-wrap: break-word;

}



.whatsapp-message.bot-message {

    background: #e3f2fd;

    color: #1976d2;

    border-bottom-left-radius: 4px;

}



.whatsapp-message.user-message {

    background: #25D366;

    color: white;

    margin-left: auto;

    border-bottom-right-radius: 4px;

}



.whatsapp-actions {

    padding: 15px 20px;

    background: white;

    border-top: 1px solid #e0e0e0;

}



.whatsapp-action-btn {

    width: 100%;

    background: #f8f9fa;

    border: 1px solid #e0e0e0;

    padding: 12px 16px;

    margin-bottom: 8px;

    border-radius: 25px;

    cursor: pointer;

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 14px;

    color: #333;

    transition: all 0.3s ease;

}



.whatsapp-action-btn:hover {

    background: #25D366;

    color: white;

    border-color: #25D366;

    transform: translateX(5px);

}



.whatsapp-action-btn i {

    font-size: 16px;

}



.whatsapp-footer {

    padding: 15px 20px;

    background: white;

    border-top: 1px solid #e0e0e0;

}



.whatsapp-send-btn {

    width: 100%;

    background: linear-gradient(135deg, #25D366, #128C7E);

    color: white;

    border: none;

    padding: 15px 20px;

    border-radius: 25px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    font-size: 16px;

    font-weight: 600;

    transition: all 0.3s ease;

}



.whatsapp-send-btn:hover {

    transform: translateY(-2px);

    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);

}



.whatsapp-send-btn i {

    font-size: 20px;

}



/* Mobile Responsive for WhatsApp Widget */

@media (max-width: 768px) {

    .whatsapp-widget {

        bottom: 15px;

        right: 15px;

    }

    

    .whatsapp-chat {

        width: 320px;

        height: 450px;

        right: -10px;

    }

}



@media (max-width: 480px) {

    .whatsapp-chat {

        width: 280px;

        height: 400px;

        right: -20px;

    }

    

    .whatsapp-actions {

        padding: 10px 15px;

    }

    

    .whatsapp-action-btn {

        padding: 10px 12px;

        font-size: 13px;

    }

}



/* Responsive Design for Services */

@media (max-width: 768px) {

  .services-container {

    gap: var(--spacing-4);

    padding: var(--spacing-4);

  }

  

  .service-hexagon {

    width: 150px;

    height: 150px;

  }

  

  .service-icon {

    width: 40px;

    height: 40px;

  }

  

  .service-icon i {

    font-size: var(--font-size-lg);

  }

  

  .service-hexagon h3 {

    font-size: var(--font-size-xs);

  }

  

  

  .feature-tag {

    font-size: var(--font-size-xs);

    padding: var(--spacing-1) var(--spacing-2);

  }

}



@media (max-width: 480px) {

  .services-container {

    flex-direction: column;

    align-items: center;

  }

  

  .service-hexagon {

    width: 120px;

    height: 120px;

  }

  

}



@keyframes servicesBackgroundShift {

  0%, 100% {

    transform: translateX(0) rotate(0deg);

    opacity: 0.6;

  }

  50% {

    transform: translateX(20px) rotate(1deg);

    opacity: 0.8;

  }

}



.services-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

  gap: var(--spacing-6);

  margin-bottom: var(--spacing-16);

  position: relative;

  z-index: 2;

}



.service-card {

  background: var(--bg-primary);

  padding: var(--spacing-8);

  border-radius: var(--radius-xl);

  box-shadow: var(--shadow-md);

  transition: all var(--transition-normal);

  border: 1px solid var(--border-color);

  position: relative;

  overflow: hidden;

  text-align: center;

}



.service-card::before {

  content: '';

  position: absolute;

  top: 0;

  left: -100%;

  width: 100%;

  height: 100%;

  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);

  transition: left 0.5s ease;

  z-index: 1;

}



.service-card:hover::before {

  left: 100%;

}



.service-card::after {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(139, 92, 246, 0.05));

  opacity: 0;

  transition: opacity 0.3s ease;

  border-radius: var(--radius-xl);

  z-index: 0;

}



.service-card:hover::after {

  opacity: 1;

}



.service-card:hover {

  transform: translateY(-8px) scale(1.02);

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(59, 130, 246, 0.2);

  border-color: rgba(59, 130, 246, 0.3);

}



.service-icon {

  width: 80px;

  height: 80px;

  margin: 0 auto var(--spacing-4);

  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

  border-radius: var(--radius-full);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: var(--font-size-2xl);

  color: white;

  position: relative;

  z-index: 2;

  transition: all var(--transition-normal);

}



.service-card:hover .service-icon {

  transform: scale(1.1) rotate(5deg);

  box-shadow: 0 10px 25px rgba(59, 130, 246, 0.4);

}



.service-card h3 {

  font-size: var(--font-size-xl);

  font-weight: 600;

  color: var(--text-primary);

  margin-bottom: var(--spacing-3);

  position: relative;

  z-index: 2;

}



.service-card p {

  color: var(--text-secondary);

  margin-bottom: var(--spacing-4);

  line-height: 1.6;

  position: relative;

  z-index: 2;

}



.service-features {

  list-style: none;

  padding: 0;

  margin: 0;

  position: relative;

  z-index: 2;

}



.service-features li {

  padding: var(--spacing-2) 0;

  color: var(--text-secondary);

  font-size: var(--font-size-sm);

  position: relative;

  padding-left: var(--spacing-6);

}



.service-features li::before {

  content: '✓';

  position: absolute;

  left: 0;

  color: var(--primary-color);

  font-weight: bold;

  font-size: var(--font-size-sm);

}



.freelance-request {

  background: var(--bg-primary);

  padding: var(--spacing-12);

  border-radius: var(--radius-2xl);

  box-shadow: var(--shadow-lg);

  border: 1px solid var(--border-color);

  position: relative;

  z-index: 2;

}



.request-content {

  text-align: center;

  margin-bottom: var(--spacing-8);

}



.request-content h3 {

  font-size: var(--font-size-3xl);

  font-weight: 700;

  color: var(--text-primary);

  margin-bottom: var(--spacing-3);

}



.request-content p {

  font-size: var(--font-size-lg);

  color: var(--text-secondary);

  max-width: 600px;

  margin: 0 auto;

}



.request-form-container {

  max-width: 800px;

  margin: 0 auto;

}



.freelance-form {

  display: flex;

  flex-direction: column;

  gap: var(--spacing-6);

}



.form-row {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: var(--spacing-4);

}



.form-group {

  display: flex;

  flex-direction: column;

  position: relative;

}



.form-group label {

  font-weight: 600;

  color: var(--text-primary);

  margin-bottom: var(--spacing-2);

  font-size: var(--font-size-sm);

}



.form-group input,

.form-group select,

.form-group textarea {

  padding: var(--spacing-3) var(--spacing-4);

  border: 2px solid var(--border-color);

  border-radius: var(--radius-lg);

  background: var(--bg-secondary);

  color: var(--text-primary);

  font-size: var(--font-size-base);

  transition: all var(--transition-normal);

  font-family: inherit;

}



.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus {

  outline: none;

  border-color: var(--primary-color);

  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);

  transform: translateY(-2px);

}



.form-group input:hover,

.form-group select:hover,

.form-group textarea:hover {

  border-color: rgba(59, 130, 246, 0.5);

  transform: translateY(-1px);

}



.form-group textarea {

  resize: vertical;

  min-height: 120px;

}



.form-actions {

  display: flex;

  gap: var(--spacing-4);

  justify-content: center;

  margin-top: var(--spacing-4);

}



.form-note {

  display: flex;

  align-items: center;

  gap: var(--spacing-2);

  padding: var(--spacing-3);

  background: rgba(59, 130, 246, 0.05);

  border: 1px solid rgba(59, 130, 246, 0.2);

  border-radius: var(--radius-lg);

  color: var(--text-secondary);

  font-size: var(--font-size-sm);

  text-align: center;

  justify-content: center;

}



.form-note i {

  color: var(--primary-color);

  font-size: var(--font-size-base);

}



/* Form validation styles */

.field-error {

  color: var(--error-color);

  font-size: var(--font-size-xs);

  margin-top: var(--spacing-1);

  display: block;

}



.form-group input.error,

.form-group select.error,

.form-group textarea.error {

  border-color: var(--error-color);

  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);

}



.form-group input.success,

.form-group select.success,

.form-group textarea.success {

  border-color: var(--success-color);

  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);

}



/* Loading state for buttons */

.btn:disabled {

  opacity: 0.7;

  cursor: not-allowed;

  transform: none;

}



.btn:disabled:hover {

  transform: none;

  box-shadow: var(--shadow-md);

}



/* Enhanced notification styles */

.notification {

  position: fixed;

  top: 20px;

  right: 20px;

  z-index: 10000;

  max-width: 400px;

  animation: notificationSlideIn 0.3s ease-out;

}



.notification-content {

  display: flex;

  align-items: center;

  gap: var(--spacing-3);

  padding: var(--spacing-4);

  border-radius: var(--radius-lg);

  box-shadow: var(--shadow-lg);

  backdrop-filter: blur(20px);

  border: 1px solid var(--border-color);

}



.notification-success {

  background: rgba(16, 185, 129, 0.1);

  border-color: rgba(16, 185, 129, 0.3);

  color: #065f46;

}



.notification-error {

  background: rgba(239, 68, 68, 0.1);

  border-color: rgba(239, 68, 68, 0.3);

  color: #991b1b;

}



.notification-warning {

  background: rgba(245, 158, 11, 0.1);

  border-color: rgba(245, 158, 11, 0.3);

  color: #92400e;

}



.notification-info {

  background: rgba(59, 130, 246, 0.1);

  border-color: rgba(59, 130, 246, 0.3);

  color: #1e40af;

}



.notification-content i:first-child {

  font-size: var(--font-size-lg);

  flex-shrink: 0;

}



.notification-content span {

  flex: 1;

  font-weight: 500;

}



.notification-close {

  background: none;

  border: none;

  color: inherit;

  cursor: pointer;

  padding: var(--spacing-1);

  border-radius: var(--radius-sm);

  transition: background-color var(--transition-fast);

  flex-shrink: 0;

}



.notification-close:hover {

  background: rgba(0, 0, 0, 0.1);

}



@keyframes notificationSlideIn {

  from {

    transform: translateX(100%);

    opacity: 0;

  }

  to {

    transform: translateX(0);

    opacity: 1;

  }

}



/* Dark mode for notifications */

[data-theme="dark"] .notification-success {

  background: rgba(16, 185, 129, 0.2);

  color: #6ee7b7;

}



[data-theme="dark"] .notification-error {

  background: rgba(239, 68, 68, 0.2);

  color: #fca5a5;

}



[data-theme="dark"] .notification-warning {

  background: rgba(245, 158, 11, 0.2);

  color: #fcd34d;

}



[data-theme="dark"] .notification-info {

  background: rgba(59, 130, 246, 0.2);

  color: #93c5fd;

}



[data-theme="dark"] .notification-close:hover {

  background: rgba(255, 255, 255, 0.1);

}



/* Dark mode styles for services */

[data-theme="dark"] .service-card {

  background: var(--bg-secondary);

  border-color: var(--border-color);

}



[data-theme="dark"] .service-card:hover {

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(59, 130, 246, 0.3);

}



[data-theme="dark"] .freelance-request {

  background: var(--bg-secondary);

  border-color: var(--border-color);

}



[data-theme="dark"] .form-group input,

[data-theme="dark"] .form-group select,

[data-theme="dark"] .form-group textarea {

  background: var(--bg-primary);

  border-color: var(--border-color);

  color: var(--text-primary);

}



[data-theme="dark"] .form-note {

  background: rgba(59, 130, 246, 0.1);

  border-color: rgba(59, 130, 246, 0.3);

  color: var(--text-secondary);

}



/* Responsive design for services */

@media (max-width: 768px) {

  .services {

    padding: var(--spacing-16) 0;

  }

  

  .services-grid {

    grid-template-columns: 1fr;

    gap: var(--spacing-4);

    margin-bottom: var(--spacing-12);

  }

  

  .service-card {

    padding: var(--spacing-6);

  }

  

  .freelance-request {

    padding: var(--spacing-8);

  }

  

  .form-row {

    grid-template-columns: 1fr;

    gap: var(--spacing-3);

  }

  

  .form-actions {

    flex-direction: column;

    align-items: center;

  }

  

  .form-actions .btn {

    width: 100%;

    max-width: 300px;

  }

}



@media (max-width: 480px) {

  .freelance-request {

    padding: var(--spacing-6);

  }

  

  .request-content h3 {

    font-size: var(--font-size-2xl);

  }

  

  .request-content p {

    font-size: var(--font-size-base);

  }

  

  .service-icon {

    width: 60px;

    height: 60px;

    font-size: var(--font-size-xl);

  }

}



/* ===== CONTACT SECTION ===== */

.contact {

  padding: var(--spacing-20) 0;

  background: var(--bg-primary);

  position: relative;

  overflow: hidden;

}



.contact::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: 

    linear-gradient(60deg, transparent 0%, rgba(59, 130, 246, 0.05) 25%, transparent 50%),

    linear-gradient(120deg, transparent 0%, rgba(139, 92, 246, 0.05) 25%, transparent 50%),

    linear-gradient(240deg, transparent 0%, rgba(6, 182, 212, 0.05) 25%, transparent 50%);

  animation: contactBackgroundFlow 16s ease-in-out infinite;

  z-index: 1;

}



.contact::after {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: 

    radial-gradient(circle at 15% 15%, rgba(16, 185, 129, 0.06) 0%, transparent 50%),

    radial-gradient(circle at 85% 85%, rgba(245, 158, 11, 0.06) 0%, transparent 50%),

    radial-gradient(circle at 50% 50%, rgba(239, 68, 68, 0.04) 0%, transparent 60%);

  animation: contactBackgroundPulse 10s ease-in-out infinite;

  z-index: 1;

}



@keyframes contactBackgroundFlow {

  0%, 100% {

    transform: translateX(0) translateY(0) rotate(0deg);

    opacity: 0.8;

  }

  25% {

    transform: translateX(30px) translateY(-30px) rotate(2deg);

    opacity: 1;

  }

  50% {

    transform: translateX(-30px) translateY(30px) rotate(-2deg);

    opacity: 0.9;

  }

  75% {

    transform: translateX(15px) translateY(-15px) rotate(1deg);

    opacity: 0.95;

  }

}



@keyframes contactBackgroundPulse {

  0%, 100% {

    transform: scale(1) rotate(0deg);

    opacity: 0.6;

  }

  33% {

    transform: scale(1.05) rotate(1deg);

    opacity: 0.8;

  }

  66% {

    transform: scale(0.95) rotate(-1deg);

    opacity: 0.7;

  }

}



.contact-content {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: var(--spacing-16);

  align-items: start;

  position: relative;

  z-index: 2;

}



.contact-info h3 {

  font-size: var(--font-size-2xl);

  font-weight: 600;

  color: var(--text-primary);

  margin-bottom: var(--spacing-4);

}



.contact-info p {

  font-size: var(--font-size-lg);

  color: var(--text-secondary);

  margin-bottom: var(--spacing-8);

  line-height: 1.7;

}



.contact-items {

  margin-bottom: var(--spacing-8);

}



.contact-item {

  display: flex;

  align-items: center;

  gap: var(--spacing-3);

  margin-bottom: var(--spacing-4);

  padding: var(--spacing-3);

  background: var(--bg-secondary);

  border-radius: var(--radius-lg);

}



.contact-item i {

  color: var(--primary-color);

  font-size: var(--font-size-lg);

  width: 20px;

  text-align: center;

}



.contact-item span {

  color: var(--text-primary);

  font-weight: 500;

}



.social-links {

  display: flex;

  gap: var(--spacing-4);

}



.social-link {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 50px;

  height: 50px;

  background: var(--bg-secondary);

  color: var(--text-primary);

  border-radius: var(--radius-full);

  text-decoration: none;

  font-size: var(--font-size-lg);

  transition: all var(--transition-fast);

  -webkit-tap-highlight-color: transparent;

  touch-action: manipulation;

  min-height: 44px;

  min-width: 44px;

}



.social-link:hover {

  background: var(--primary-color);

  color: white;

  transform: translateY(-3px) scale(1.1);

  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);

}



.social-link::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

  border-radius: var(--radius-full);

  opacity: 0;

  transition: opacity 0.3s ease;

  z-index: -1;

}



.social-link:hover::before {

  opacity: 1;

}



.whatsapp-contact-btn {

  background: linear-gradient(135deg, #25D366, #128C7E) !important;

  border: none;

  cursor: pointer;

  transition: all 0.3s ease;

}



.whatsapp-contact-btn:hover {

  transform: translateY(-3px) scale(1.1);

  box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4) !important;

}



.whatsapp-contact-btn i {

  color: white !important;

}



.whatsapp-contact-btn::before {

  background: linear-gradient(135deg, #128C7E, #25D366) !important;

}



.contact-form {

  background: var(--bg-secondary);

  padding: var(--spacing-8);

  border-radius: var(--radius-xl);

  box-shadow: var(--shadow-md);

}



.form-group {

  margin-bottom: var(--spacing-6);

}



.form-group input,

.form-group textarea {

  width: 100%;

  padding: var(--spacing-3);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-lg);

  background: var(--bg-primary);

  color: var(--text-primary);

  font-size: var(--font-size-base);

  transition: border-color var(--transition-fast);

}



.form-group input:focus,

.form-group textarea:focus {

  outline: none;

  border-color: var(--primary-color);

  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);

  transform: translateY(-2px);

}



.form-group {

  position: relative;

}



.form-group input,

.form-group textarea {

  transition: all 0.3s ease;

}



.form-group input:hover,

.form-group textarea:hover {

  border-color: rgba(59, 130, 246, 0.5);

  transform: translateY(-1px);

}



.form-group input::placeholder,

.form-group textarea::placeholder {

  color: var(--text-muted);

}



/* ===== FOOTER ===== */

.footer {

  background: var(--bg-secondary);

  padding: var(--spacing-8) 0;

  border-top: 1px solid var(--border-color);

  position: relative;

  overflow: hidden;

}



.footer::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: 

    linear-gradient(45deg, transparent 0%, rgba(59, 130, 246, 0.03) 50%, transparent 100%),

    linear-gradient(-45deg, transparent 0%, rgba(139, 92, 246, 0.03) 50%, transparent 100%);

  animation: footerBackgroundShift 12s ease-in-out infinite;

  z-index: 1;

}



@keyframes footerBackgroundShift {

  0%, 100% {

    transform: translateX(0) scale(1);

    opacity: 0.6;

  }

  50% {

    transform: translateX(20px) scale(1.02);

    opacity: 0.8;

  }

}



.footer-content {

  display: flex;

  justify-content: space-between;

  align-items: center;

  position: relative;

  z-index: 2;

}



.footer-content p {

  color: var(--text-secondary);

}



.footer-links {

  display: flex;

  gap: var(--spacing-6);

}



.footer-links a {

  color: var(--text-secondary);

  text-decoration: none;

  transition: color var(--transition-fast);

}



.footer-links a:hover {

  color: var(--primary-color);

}



/* ===== DARK MODE STYLES ===== */

[data-theme="dark"] {

  background-color: var(--bg-primary);

  color: var(--text-primary);

}



[data-theme="dark"] body {

  background-color: var(--bg-primary);

  color: var(--text-primary);

}



[data-theme="dark"] .navbar {

  background: rgba(15, 23, 42, 0.95);

  border-bottom-color: var(--border-color);

}



[data-theme="dark"] .navbar.scrolled {

  background: rgba(15, 23, 42, 0.98);

  backdrop-filter: blur(25px);

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(59, 130, 246, 0.2);

  border-bottom-color: rgba(59, 130, 246, 0.3);

}



[data-theme="dark"] .skill-card:hover,

[data-theme="dark"] .project-card:hover {

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(59, 130, 246, 0.3);

}



[data-theme="dark"] .btn:hover {

  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);

}



[data-theme="dark"] .nav-link {

  color: var(--text-primary);

}



[data-theme="dark"] .nav-link:hover {

  color: var(--primary-color);

}



[data-theme="dark"] .hero {

  background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);

}



[data-theme="dark"] .hero-title,

[data-theme="dark"] .hero-subtitle,

[data-theme="dark"] .hero-description {

  color: var(--text-primary);

}



[data-theme="dark"] .section-title {

  color: var(--text-primary);

}



[data-theme="dark"] .section-subtitle {

  color: var(--text-secondary);

}



[data-theme="dark"] .skill-card,

[data-theme="dark"] .project-card {

  background: var(--bg-secondary);

  border-color: var(--border-color);

}



[data-theme="dark"] .skill-card h3,

[data-theme="dark"] .project-card h3 {

  color: var(--text-primary);

}



[data-theme="dark"] .skill-card p,

[data-theme="dark"] .project-card p {

  color: var(--text-secondary);

}



[data-theme="dark"] .contact-form input,

[data-theme="dark"] .contact-form textarea {

  background: var(--bg-primary);

  border-color: var(--border-color);

  color: var(--text-primary);

}



[data-theme="dark"] .contact-form input::placeholder,

[data-theme="dark"] .contact-form textarea::placeholder {

  color: var(--text-muted);

}



[data-theme="dark"] .contact-info h3,

[data-theme="dark"] .contact-info p {

  color: var(--text-primary);

}



[data-theme="dark"] .contact-item span {

  color: var(--text-primary);

}



[data-theme="dark"] .footer {

  background: var(--bg-secondary);

  color: var(--text-primary);

}



[data-theme="dark"] .footer-links a {

  color: var(--text-secondary);

}



[data-theme="dark"] .footer-links a:hover {

  color: var(--primary-color);

}



/* ===== RESPONSIVE DESIGN ===== */

@media (max-width: 768px) {

  .nav-menu {

    display: none;

  }

  

  .mobile-menu-toggle {

    display: flex;

  }

  

  .hero {

    padding: var(--spacing-16) 0 var(--spacing-12);

    min-height: 90vh;

  }

  

  .hero-content {

    grid-template-columns: 1fr;

    text-align: center;

    gap: var(--spacing-6);

  }

  

  .hero-title {

    font-size: var(--font-size-3xl);

    line-height: 1.1;

    margin-bottom: var(--spacing-3);

  }

  

  .hero-subtitle {

    font-size: var(--font-size-lg);

    margin-bottom: var(--spacing-4);

  }

  

  .hero-description {

    font-size: var(--font-size-sm);

    margin-bottom: var(--spacing-5);

    line-height: 1.6;

  }

  

  .hero-buttons {

    flex-direction: column;

    align-items: center;

    gap: var(--spacing-3);

  }

  

  .btn {

    width: 100%;

    max-width: 250px;

    padding: var(--spacing-3) var(--spacing-4);

  }

  

  .about {

    padding: var(--spacing-16) 0;

  }

  

  .about-content {

    grid-template-columns: 1fr;

    gap: var(--spacing-6);

  }

  

  .about-stats {

    grid-template-columns: repeat(3, 1fr);

    gap: var(--spacing-3);

  }

  

  .stat {

    padding: var(--spacing-3);

  }

  

  .stat h4 {

    font-size: var(--font-size-xl);

  }

  

  .stat p {

    font-size: var(--font-size-xs);

  }

  

  .skills {

    padding: var(--spacing-16) 0;

  }

  

  .projects {

    padding: var(--spacing-16) 0;

  }

  

  /* Project Filters */

  .project-filters {

    gap: var(--spacing-2);

    margin-bottom: var(--spacing-8);

  }

  

  .filter-btn {

    padding: var(--spacing-2) var(--spacing-4);

    font-size: var(--font-size-sm);

  }

  

  /* Spotlight Section */

  .spotlight-title-text {

    font-size: var(--font-size-2xl);

    flex-direction: column;

    gap: var(--spacing-2);

  }

  

  .spotlight-description {

    font-size: var(--font-size-lg);

  }

  

  .spotlight-tech {

    gap: var(--spacing-2);

  }

  

  .spotlight-tech-tag {

    padding: var(--spacing-2) var(--spacing-3);

    font-size: var(--font-size-base);

  }

  

  .spotlight-links {

    flex-direction: column;

    gap: var(--spacing-3);

  }

  

  .spotlight-link {

    padding: var(--spacing-3) var(--spacing-6);

    font-size: var(--font-size-base);

    min-width: auto;

  }

  

  /* Interactive Grid */

  .grid-header {

    flex-direction: column;

    align-items: center;

    gap: var(--spacing-4);

  }

  

  .view-toggle {

    flex-wrap: wrap;

    justify-content: center;

  }

  

  .view-btn {

    padding: var(--spacing-2) var(--spacing-3);

    font-size: var(--font-size-sm);

  }

  

  /* Layouts */

  .projects-container.masonry {

    columns: 1;

  }

  

  .projects-container.timeline .project-item {

    width: 100%;

    margin-left: 0;

    margin-right: 0;

    padding-left: 0;

    padding-right: 0;

  }

  

  .projects-container.timeline .project-item::before {

    display: none;

  }

  

  .projects-container.timeline::before {

    display: none;

  }

  

  .projects-container.cards {

    grid-template-columns: 1fr;

  }

  

  /* Project Stats */

  .project-stats {

    grid-template-columns: repeat(2, 1fr);

    gap: var(--spacing-4);

  }

  

  .stat-item {

    padding: var(--spacing-6);

  }

  

  .stat-number {

    font-size: var(--font-size-3xl);

  }

  

  .stat-label {

    font-size: var(--font-size-base);

  }

  

  /* Services Section Mobile */

  .service-card {

    padding: var(--spacing-6);

  }

  

  .service-icon {

    width: 60px;

    height: 60px;

    margin-bottom: var(--spacing-4);

  }

  

  .service-icon i {

    font-size: var(--font-size-2xl);

  }

  

  .service-card h3 {

    font-size: var(--font-size-lg);

    flex-direction: column;

    gap: var(--spacing-1);

  }

  

  .service-card p {

    font-size: var(--font-size-sm);

  }

  

  .service-features li {

    font-size: var(--font-size-sm);

    padding: var(--spacing-1) 0;

  }

  

  .contact {

    padding: var(--spacing-16) 0;

  }

  

  .contact-content {

    grid-template-columns: 1fr;

    gap: var(--spacing-6);

  }

  

  .footer-content {

    flex-direction: column;

    gap: var(--spacing-4);

    text-align: center;

  }

  

  .skills-grid,

  .projects-grid {

    grid-template-columns: 1fr;

    gap: var(--spacing-4);

  }

  

  .skill-card,

  .project-card {

    padding: var(--spacing-4);

  }

  

  .image-container {

    width: 180px;

    height: 180px;

  }

  

  .section-header {

    margin-bottom: var(--spacing-10);

  }

  

  .section-title {

    font-size: var(--font-size-2xl);

  }

  

  .section-subtitle {

    font-size: var(--font-size-sm);

  }

  

  .container {

    padding: 0 var(--spacing-3);

  }

}



@media (max-width: 480px) {

  .container {

    padding: 0 var(--spacing-2);

  }

  

  .hero {

    padding: var(--spacing-12) 0 var(--spacing-8);

    min-height: 85vh;

  }

  

  .hero-title {

    font-size: var(--font-size-2xl);

    margin-bottom: var(--spacing-2);

    line-height: 1.2;

  }

  

  .hero-subtitle {

    font-size: var(--font-size-base);

    margin-bottom: var(--spacing-3);

  }

  

  .hero-description {

    font-size: var(--font-size-xs);

    margin-bottom: var(--spacing-4);

    line-height: 1.5;

  }

  

  .hero-buttons {

    flex-direction: column;

    align-items: center;

    gap: var(--spacing-2);

  }

  

  .btn {

    width: 100%;

    max-width: 180px;

    padding: var(--spacing-2) var(--spacing-3);

    font-size: var(--font-size-sm);

  }

  

  .image-container {

    width: 150px;

    height: 150px;

  }

  

  .about {

    padding: var(--spacing-12) 0;

  }

  

  .about-stats {

    grid-template-columns: 1fr;

    gap: var(--spacing-2);

  }

  

  .stat {

    padding: var(--spacing-2);

  }

  

  .stat h4 {

    font-size: var(--font-size-lg);

  }

  

  .stat p {

    font-size: var(--font-size-xs);

  }

  

  .skill-category {

    padding: var(--spacing-2);

  }

  

  .skill-category i {

    font-size: var(--font-size-base);

    width: 25px;

  }

  

  .skill-category h4 {

    font-size: var(--font-size-sm);

  }

  

  .skill-category p {

    font-size: var(--font-size-xs);

  }

  

  .skills {

    padding: var(--spacing-12) 0;

  }

  

  .projects {

    padding: var(--spacing-12) 0;

  }

  

  .contact {

    padding: var(--spacing-12) 0;

  }

  

  .contact-form {

    padding: var(--spacing-4);

  }

  

  .form-group {

    margin-bottom: var(--spacing-3);

  }

  

  .form-group input,

  .form-group textarea {

    padding: var(--spacing-2);

    font-size: var(--font-size-sm);

  }

  

  .social-links {

    justify-content: center;

    flex-wrap: wrap;

    gap: var(--spacing-2);

  }

  

  .social-link {

    width: 35px;

    height: 35px;

    font-size: var(--font-size-sm);

  }

  

  .section-title {

    font-size: var(--font-size-xl);

  }

  

  .section-subtitle {

    font-size: var(--font-size-xs);

  }

  

  .nav-container {

    padding: var(--spacing-2);

  }

  

  .nav-logo a {

    font-size: var(--font-size-base);

  }

  

  .section-header {

    margin-bottom: var(--spacing-8);

  }

  

  .skill-card,

  .project-card {

    padding: var(--spacing-3);

  }

  

  .skill-card h3,

  .project-card h3 {

    font-size: var(--font-size-lg);

  }

  

  .skill-card p,

  .project-card p {

    font-size: var(--font-size-sm);

  }

}



/* ===== ANIMATIONS ===== */

@keyframes fadeInUp {

  from {

    opacity: 0;

    transform: translateY(30px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



@keyframes fadeInLeft {

  from {

    opacity: 0;

    transform: translateX(-50px);

  }

  to {

    opacity: 1;

    transform: translateX(0);

  }

}



@keyframes fadeInRight {

  from {

    opacity: 0;

    transform: translateX(50px);

  }

  to {

    opacity: 1;

    transform: translateX(0);

  }

}



@keyframes fadeInScale {

  from {

    opacity: 0;

    transform: scale(0.8);

  }

  to {

    opacity: 1;

    transform: scale(1);

  }

}



@keyframes slideInFromTop {

  from {

    opacity: 0;

    transform: translateY(-50px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



@keyframes bounceIn {

  0% {

    opacity: 0;

    transform: scale(0.3);

  }

  50% {

    opacity: 1;

    transform: scale(1.05);

  }

  70% {

    transform: scale(0.9);

  }

  100% {

    opacity: 1;

    transform: scale(1);

  }

}



@keyframes float {

  0%, 100% {

    transform: translateY(0px);

  }

  50% {

    transform: translateY(-20px);

  }

}



@keyframes glow {

  0%, 100% {

    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);

  }

  50% {

    box-shadow: 0 0 40px rgba(59, 130, 246, 0.6);

  }

}



@keyframes typewriter {

  from {

    width: 0;

  }

  to {

    width: 100%;

  }

}



@keyframes blink {

  0%, 50% {

    border-color: transparent;

  }

  51%, 100% {

    border-color: var(--primary-color);

  }

}



/* ===== SCROLL ANIMATIONS ===== */

.animate-on-scroll {

  opacity: 0;

  transform: translateY(50px);

  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}



.animate-on-scroll.animated {

  opacity: 1;

  transform: translateY(0);

}



.animate-left {

  opacity: 0;

  transform: translateX(-50px);

  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}



.animate-left.animated {

  opacity: 1;

  transform: translateX(0);

}



.animate-right {

  opacity: 0;

  transform: translateX(50px);

  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}



.animate-right.animated {

  opacity: 1;

  transform: translateX(0);

}



.animate-scale {

  opacity: 0;

  transform: scale(0.8);

  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}



.animate-scale.animated {

  opacity: 1;

  transform: scale(1);

}



.animate-bounce {

  opacity: 0;

  transform: translateY(50px) scale(0.8);

  transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);

}



.animate-bounce.animated {

  opacity: 1;

  transform: translateY(0) scale(1);

}



/* ===== HERO ANIMATIONS ===== */

.hero-title {

  animation: slideInFromTop 1s ease-out 0.2s both;

  overflow: visible;

  white-space: normal;

}



.hero-title.typewriter {

  border-right: 2px solid var(--primary-color);

  animation: blink 1s infinite;

}



.hero-subtitle {

  animation: slideInFromTop 1s ease-out 0.4s both;

}



.hero-description {

  animation: slideInFromTop 1s ease-out 0.6s both;

}



.hero-buttons {

  animation: slideInFromTop 1s ease-out 0.8s both;

}



.hero-image {

  animation: fadeInScale 1.2s ease-out 0.5s both;

}



.profile-image {

  animation: float 6s ease-in-out infinite;

}



.image-container {

  animation: glow 3s ease-in-out infinite;

}



/* ===== SECTION ANIMATIONS ===== */

.section-header {

  animation: slideInFromTop 0.8s ease-out both;

}



.skill-card {

  animation: fadeInUp 0.6s ease-out both;

}



.project-card {

  animation: fadeInUp 0.6s ease-out both;

}



.about-text {

  animation: fadeInLeft 0.8s ease-out both;

}



.about-skills {

  animation: fadeInRight 0.8s ease-out both;

}



.contact-info {

  animation: fadeInLeft 0.8s ease-out both;

}



.contact-form {

  animation: fadeInRight 0.8s ease-out both;

}



/* ===== STAGGERED ANIMATIONS ===== */

.skill-card:nth-child(1) { animation-delay: 0.1s; }

.skill-card:nth-child(2) { animation-delay: 0.2s; }

.skill-card:nth-child(3) { animation-delay: 0.3s; }

.skill-card:nth-child(4) { animation-delay: 0.4s; }

.skill-card:nth-child(5) { animation-delay: 0.5s; }

.skill-card:nth-child(6) { animation-delay: 0.6s; }



.project-card:nth-child(1) { animation-delay: 0.1s; }

.project-card:nth-child(2) { animation-delay: 0.2s; }

.project-card:nth-child(3) { animation-delay: 0.3s; }



.stat:nth-child(1) { animation: bounceIn 0.8s ease-out 0.1s both; }

.stat:nth-child(2) { animation: bounceIn 0.8s ease-out 0.2s both; }

.stat:nth-child(3) { animation: bounceIn 0.8s ease-out 0.3s both; }



.skill-category:nth-child(1) { animation: fadeInLeft 0.6s ease-out 0.1s both; }

.skill-category:nth-child(2) { animation: fadeInLeft 0.6s ease-out 0.2s both; }

.skill-category:nth-child(3) { animation: fadeInLeft 0.6s ease-out 0.3s both; }



/* ===== HOVER ANIMATIONS ===== */

.skill-card:hover {

  transform: translateY(-10px) scale(1.02);

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);

}



.project-card:hover {

  transform: translateY(-10px) scale(1.02);

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);

}



.btn:hover {

  transform: translateY(-2px) scale(1.05);

}



.social-link:hover {

  transform: translateY(-3px) scale(1.1);

}



/* ===== LOADING ANIMATIONS ===== */

.loading-shimmer {

  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);

  background-size: 200px 100%;

  animation: shimmer 1.5s infinite;

}



@keyframes shimmer {

  0% {

    background-position: -200px 0;

  }

  100% {

    background-position: calc(200px + 100%) 0;

  }

}



/* ===== DARK MODE ANIMATIONS ===== */

[data-theme="dark"] .loading-shimmer {

  background: linear-gradient(90deg, #334155 25%, #475569 50%, #334155 75%);

  background-size: 200px 100%;

}



[data-theme="dark"] .profile-image {

  animation: float 6s ease-in-out infinite, glow 3s ease-in-out infinite;

}



[data-theme="dark"] .image-container {

  animation: glow 3s ease-in-out infinite;

  box-shadow: 

    0 25px 50px rgba(0, 0, 0, 0.4),

    0 0 0 1px rgba(255, 255, 255, 0.05),

    inset 0 0 0 1px rgba(255, 255, 255, 0.02);

}



/* ===== SCROLL ANIMATION ENHANCEMENTS ===== */

.section-visible {

  opacity: 1 !important;

  transform: translateY(0) !important;

}



.skill-card,

.project-card {

  opacity: 0;

  transform: translateY(30px);

  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}



.skill-card.animated,

.project-card.animated {

  opacity: 1;

  transform: translateY(0);

}



/* ===== ENHANCED HOVER EFFECTS ===== */

.skill-card:hover {

  transform: translateY(-10px) scale(1.02) rotate(1deg);

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);

}



.project-card:hover {

  transform: translateY(-10px) scale(1.02) rotate(-1deg);

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);

}



.stat:hover {

  transform: scale(1.05);

  box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);

}



.skill-category:hover {

  transform: translateX(10px);

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);

}



/* ===== RESPONSIVE ANIMATIONS ===== */

@media (max-width: 768px) {

  .animate-left,

  .animate-right {

    transform: translateY(20px);

  }

  

  .animate-left.animated,

  .animate-right.animated {

    transform: translateY(0);

  }

  

  .particle {

    display: none;

  }

  

  .image-container {

    width: 200px;

    height: 200px;

  }

  

  /* Reduce animation complexity on mobile */

  .skill-card:hover,

  .project-card:hover {

    transform: translateY(-3px) scale(1.01);

  }

  

  .btn:hover {

    transform: translateY(-1px) scale(1.01);

  }

  

  .social-link:hover {

    transform: translateY(-1px) scale(1.02);

  }

  

  /* Reduce background animation intensity on mobile */

  .hero::before,

  .hero::after,

  .about::before,

  .about::after,

  .skills::before,

  .skills::after,

  .projects::before,

  .projects::after,

  .contact::before,

  .contact::after,

  .footer::before {

    animation-duration: 30s;

    opacity: 0.3;

  }

  

}



@media (max-width: 480px) {

  .image-container {

    width: 180px;

    height: 180px;

  }

  

  /* Disable complex animations on very small screens */

  .skill-card:hover,

  .project-card:hover {

    transform: translateY(-2px);

  }

  

  .btn:hover {

    transform: translateY(-1px);

  }

  

  .social-link:hover {

    transform: translateY(-1px);

  }

  

  /* Further reduce animation complexity */

  .hero::before,

  .hero::after,

  .about::before,

  .about::after,

  .skills::before,

  .skills::after,

  .projects::before,

  .projects::after,

  .contact::before,

  .contact::after,

  .footer::before {

    animation: none;

    opacity: 0.2;

  }

}



/* ===== REDUCED MOTION PREFERENCES ===== */

@media (prefers-reduced-motion: reduce) {

  .hero::before,

  .hero::after,

  .about::before,

  .about::after,

  .skills::before,

  .skills::after,

  .projects::before,

  .projects::after,

  .contact::before,

  .contact::after,

  .footer::before {

    animation: none;

    opacity: 0.3;

  }

  

  .skill-card,

  .project-card,

  .btn,

  .social-link,

  .skill-category,

  .stat {

    transition: none;

  }

  

  .skill-card:hover,

  .project-card:hover,

  .btn:hover,

  .social-link:hover,

  .skill-category:hover,

  .stat:hover {

    transform: none;

  }

}



/* ===== NOTIFICATION SYSTEM ===== */

.notification {

  position: fixed;

  top: 20px;

  right: 20px;

  z-index: 10000;

  max-width: 400px;

  animation: notificationSlideIn 0.3s ease-out;

}



.notification-content {

  display: flex;

  align-items: center;

  gap: var(--spacing-3);

  padding: var(--spacing-4);

  border-radius: var(--radius-lg);

  box-shadow: var(--shadow-lg);

  backdrop-filter: blur(20px);

  border: 1px solid var(--border-color);

}



.notification-success {

  background: rgba(16, 185, 129, 0.1);

  border-color: rgba(16, 185, 129, 0.3);

  color: #065f46;

}



.notification-error {

  background: rgba(239, 68, 68, 0.1);

  border-color: rgba(239, 68, 68, 0.3);

  color: #991b1b;

}



.notification-warning {

  background: rgba(245, 158, 11, 0.1);

  border-color: rgba(245, 158, 11, 0.3);

  color: #92400e;

}



.notification-info {

  background: rgba(59, 130, 246, 0.1);

  border-color: rgba(59, 130, 246, 0.3);

  color: #1e40af;

}



.notification-content i:first-child {

  font-size: var(--font-size-lg);

  flex-shrink: 0;

}



.notification-content span {

  flex: 1;

  font-weight: 500;

}



.notification-close {

  background: none;

  border: none;

  color: inherit;

  cursor: pointer;

  padding: var(--spacing-1);

  border-radius: var(--radius-sm);

  transition: background-color var(--transition-fast);

  flex-shrink: 0;

}



.notification-close:hover {

  background: rgba(0, 0, 0, 0.1);

}



@keyframes notificationSlideIn {

  from {

    transform: translateX(100%);

    opacity: 0;

  }

  to {

    transform: translateX(0);

    opacity: 1;

  }

}



/* Dark mode notifications */

[data-theme="dark"] .notification-success {

  background: rgba(16, 185, 129, 0.2);

  color: #6ee7b7;

}



[data-theme="dark"] .notification-error {

  background: rgba(239, 68, 68, 0.2);

  color: #fca5a5;

}



[data-theme="dark"] .notification-warning {

  background: rgba(245, 158, 11, 0.2);

  color: #fcd34d;

}



[data-theme="dark"] .notification-info {

  background: rgba(59, 130, 246, 0.2);

  color: #93c5fd;

}



[data-theme="dark"] .notification-close:hover {

  background: rgba(255, 255, 255, 0.1);

}



/* ===== LOADING STATES ===== */

.loading {

  opacity: 0.6;

  pointer-events: none;

}










/* ===== ENHANCED ANIMATED BACKGROUND ===== */

.animated-background {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: -1;

    overflow: hidden;

}



.particles-container {

    position: absolute;

    width: 100%;

    height: 100%;

}



.particle {

    position: absolute;

    width: 4px;

    height: 4px;

    background: rgba(255, 255, 255, 0.1);

    border-radius: 50%;

    animation: float 6s ease-in-out infinite;

}



@keyframes float {

    0%, 100% {

        transform: translateY(0px) rotate(0deg);

        opacity: 0.1;

    }

    50% {

        transform: translateY(-20px) rotate(180deg);

        opacity: 0.3;

    }

}



.geometric-shapes {

    position: absolute;

    width: 100%;

    height: 100%;

}



.shape {

    position: absolute;

    opacity: 0.1;

    animation: geometricFloat 8s ease-in-out infinite;

}



.triangle {

    width: 0;

    height: 0;

    border-left: 15px solid transparent;

    border-right: 15px solid transparent;

    border-bottom: 25px solid rgba(102, 126, 234, 0.3);

    top: 20%;

    left: 10%;

    animation-delay: 0s;

}



.circle {

    width: 30px;

    height: 30px;

    background: rgba(118, 75, 162, 0.3);

    border-radius: 50%;

    top: 30%;

    right: 15%;

    animation-delay: 1s;

}



.square {

    width: 25px;

    height: 25px;

    background: rgba(0, 212, 255, 0.3);

    top: 60%;

    left: 20%;

    animation-delay: 2s;

}



.hexagon {

    width: 30px;

    height: 30px;

    background: rgba(0, 255, 136, 0.3);

    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

    top: 40%;

    right: 30%;

    animation-delay: 3s;

}



.diamond {

    width: 25px;

    height: 25px;

    background: rgba(255, 193, 7, 0.3);

    transform: rotate(45deg);

    top: 70%;

    right: 20%;

    animation-delay: 4s;

}



.star {

    width: 30px;

    height: 30px;

    background: rgba(255, 87, 34, 0.3);

    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);

    top: 15%;

    left: 50%;

    animation-delay: 5s;

}



@keyframes geometricFloat {

    0%, 100% {

        transform: translateY(0px) rotate(0deg);

        opacity: 0.1;

    }

    50% {

        transform: translateY(-30px) rotate(180deg);

        opacity: 0.3;

    }

}



.gradient-orbs {

    position: absolute;

    width: 100%;

    height: 100%;

}



.orb {

    position: absolute;

    border-radius: 50%;

    filter: blur(40px);

    animation: orbFloat 10s ease-in-out infinite;

}



.orb-1 {

    width: 200px;

    height: 200px;

    background: radial-gradient(circle, rgba(102, 126, 234, 0.3) 0%, transparent 70%);

    top: 10%;

    left: 10%;

    animation-delay: 0s;

}



.orb-2 {

    width: 150px;

    height: 150px;

    background: radial-gradient(circle, rgba(118, 75, 162, 0.3) 0%, transparent 70%);

    top: 60%;

    right: 10%;

    animation-delay: 3s;

}



.orb-3 {

    width: 180px;

    height: 180px;

    background: radial-gradient(circle, rgba(0, 212, 255, 0.3) 0%, transparent 70%);

    bottom: 20%;

    left: 50%;

    animation-delay: 6s;

}



@keyframes orbFloat {

    0%, 100% {

        transform: translate(0, 0) scale(1);

    }

    33% {

        transform: translate(30px, -30px) scale(1.1);

    }

    66% {

        transform: translate(-20px, 20px) scale(0.9);

    }

}



/* ===== 3D CARD EFFECTS ===== */

.3d-card {

    perspective: 1000px;

    transform-style: preserve-3d;

}



.card-inner {

    position: relative;

    width: 100%;

    height: 100%;

    text-align: center;

    transition: transform 0.8s;

    transform-style: preserve-3d;

}



.3d-card:hover .card-inner {

    transform: rotateY(180deg);

}



.card-face {

    position: absolute;

    width: 100%;

    height: 100%;

    backface-visibility: hidden;

    border-radius: 15px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.card-front {

    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));

    backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.2);

}



.card-back {

    background: linear-gradient(135deg, #667eea, #764ba2);

    transform: rotateY(180deg);

    padding: 2rem;

    color: white;

}



.card-back-content h3 {

    font-size: 1.5rem;

    margin-bottom: 1rem;

    font-weight: 600;

}



.card-back-content p {

    margin-bottom: 1.5rem;

    opacity: 0.9;

}



.tech-stack {

    display: flex;

    flex-wrap: wrap;

    gap: 0.5rem;

    justify-content: center;

}



.tech-tag {

    background: rgba(255, 255, 255, 0.2);

    padding: 0.3rem 0.8rem;

    border-radius: 20px;

    font-size: 0.8rem;

    font-weight: 500;

}



/* ===== SCROLL-TRIGGERED ANIMATIONS ===== */

.animate-on-scroll {

    opacity: 0;

    transform: translateY(50px);

    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}



.animate-on-scroll.animated {

    opacity: 1;

    transform: translateY(0);

}



.animate-left {

    opacity: 0;

    transform: translateX(-50px);

    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}



.animate-left.animated {

    opacity: 1;

    transform: translateX(0);

}



.animate-right {

    opacity: 0;

    transform: translateX(50px);

    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}



.animate-right.animated {

    opacity: 1;

    transform: translateX(0);

}



.animate-scale {

    opacity: 0;

    transform: scale(0.8);

    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}



.animate-scale.animated {

    opacity: 1;

    transform: scale(1);

}



.animate-rotate {

    opacity: 0;

    transform: rotate(-10deg) scale(0.9);

    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}



.animate-rotate.animated {

    opacity: 1;

    transform: rotate(0deg) scale(1);

}






/* Live data section styles removed */



/* Calendly integration styles removed */



/* ===== TECHY PROJECTS SECTION ===== */

.techy-projects {

    padding: 5rem 0;

    background: var(--bg-secondary);

    position: relative;

    overflow: hidden;

    border-top: 2px solid var(--primary-color);

    border-bottom: 2px solid var(--primary-color);

}



/* Techy Background Elements */

.techy-bg {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    pointer-events: none;

    z-index: 1;

}



.matrix-rain {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(transparent 0%, rgba(37, 99, 235, 0.1) 100%);

    animation: matrixRain 20s linear infinite;

}



.circuit-lines {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-image: 

        linear-gradient(90deg, transparent 98%, rgba(37, 99, 235, 0.3) 100%),

        linear-gradient(0deg, transparent 98%, rgba(37, 99, 235, 0.3) 100%);

    background-size: 50px 50px;

    animation: circuitPulse 4s ease-in-out infinite;

}



.hologram-grid {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: 

        radial-gradient(circle at 25% 25%, rgba(37, 99, 235, 0.1) 0%, transparent 50%),

        radial-gradient(circle at 75% 75%, rgba(37, 99, 235, 0.1) 0%, transparent 50%);

    animation: hologramFloat 8s ease-in-out infinite;

}



/* Techy Title */

.techy-title {

    font-family: 'Courier New', monospace;

    font-size: 3.5rem;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: 0.2em;

    margin-bottom: 1rem;

    position: relative;

}



.glitch {

    position: relative;

    color: var(--primary-color);

    text-shadow: 

        0 0 10px var(--primary-color),

        0 0 20px var(--primary-color),

        0 0 40px var(--primary-color);

    animation: glitch 2s infinite;

}



.glitch::before,

.glitch::after {

    content: attr(data-text);

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}



.glitch::before {

    animation: glitch-1 0.5s infinite;

    color: #ff0040;

    z-index: -1;

}



.glitch::after {

    animation: glitch-2 0.5s infinite;

    color: #0040ff;

    z-index: -2;

}



.techy-subtitle {

    font-family: 'Courier New', monospace;

    font-size: 1.2rem;

    color: var(--primary-color);

    margin-top: 0.5rem;

    opacity: 0.8;

}



.techy-subtitle-text {

    font-family: 'Courier New', monospace;

    font-size: 1.1rem;

    color: var(--primary-color);

    margin-top: 1rem;

}



.terminal-prompt {

    color: var(--primary-color);

    font-weight: bold;

    margin-right: 0.5rem;

}



/* Techy Filter Buttons */

.techy-filters {

    margin: 3rem 0;

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 1rem;

    position: relative;

    z-index: 2;

}



.techy-btn {

    background: var(--bg-primary);

    border: 2px solid var(--primary-color);

    border-radius: var(--radius-lg);

    color: var(--primary-color);

    font-family: var(--font-family);

    font-weight: var(--font-semibold);

    text-transform: uppercase;

    letter-spacing: 0.1em;

    padding: 1rem 2rem;

    position: relative;

    overflow: hidden;

    transition: all 0.3s ease;

    box-shadow: 

        0 0 20px rgba(37, 99, 235, 0.3),

        inset 0 0 20px rgba(37, 99, 235, 0.1);

}



.techy-btn::before {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.3), transparent);

    transition: left 0.5s;

}



.techy-btn:hover::before {

    left: 100%;

}



.techy-btn:hover {

    background: var(--gradient-primary);

    color: var(--text-inverse);

    transform: translateY(-3px);

    box-shadow: 

        0 10px 30px rgba(37, 99, 235, 0.5),

        0 0 40px rgba(37, 99, 235, 0.3);

}



.techy-btn.active {

    background: var(--gradient-primary);

    color: var(--text-inverse);

    box-shadow: 

        0 0 30px rgba(37, 99, 235, 0.6),

        inset 0 0 20px rgba(0, 0, 0, 0.2);

}



/* Techy Projects Grid */

.projects-techy-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));

    gap: 2rem;

    margin: 3rem 0;

    position: relative;

    z-index: 2;

}



/* Techy Project Cards */

.techy-project-card {

    background: var(--bg-primary);

    border: 2px solid var(--primary-color);

    border-radius: var(--radius-2xl);

    overflow: hidden;

    position: relative;

    transition: all 0.4s ease;

    box-shadow: 

        0 0 20px rgba(37, 99, 235, 0.3),

        inset 0 0 20px rgba(37, 99, 235, 0.1);

}



.techy-project-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: linear-gradient(45deg, transparent 30%, rgba(37, 99, 235, 0.1) 50%, transparent 70%);

    opacity: 0;

    transition: opacity 0.3s ease;

    z-index: 1;

}



.techy-project-card:hover::before {

    opacity: 1;

}



.techy-project-card:hover {

    transform: translateY(-10px) scale(1.02);

    box-shadow: 

        0 20px 40px rgba(37, 99, 235, 0.4),

        0 0 60px rgba(37, 99, 235, 0.2);

    border-color: var(--primary-color);

}



/* Project Header */

.techy-project-header {

    background: var(--gradient-primary);

    color: var(--text-inverse);

    padding: 1.5rem;

    position: relative;

    z-index: 2;

}



.techy-project-title {

    font-family: var(--font-family);

    font-size: 1.5rem;

    font-weight: var(--font-bold);

    text-transform: uppercase;

    letter-spacing: 0.1em;

    margin-bottom: 0.5rem;

}



.techy-project-category {

    font-family: var(--font-family);

    font-size: 0.9rem;

    opacity: 0.8;

    text-transform: uppercase;

    letter-spacing: 0.1em;

}



/* Project Content */

.techy-project-content {

    padding: 2rem;

    position: relative;

    z-index: 2;

}



.techy-project-description {

    color: var(--text-secondary);

    font-family: var(--font-family);

    line-height: 1.6;

    margin-bottom: 1.5rem;

    font-size: 0.95rem;

}



.techy-project-tech {

    display: flex;

    flex-wrap: wrap;

    gap: 0.5rem;

    margin-bottom: 2rem;

}



.techy-tech-tag {

    background: rgba(37, 99, 235, 0.1);

    border: 1px solid var(--primary-color);

    color: var(--primary-color);

    padding: 0.5rem 1rem;

    font-family: var(--font-family);

    font-size: 0.8rem;

    text-transform: uppercase;

    letter-spacing: 0.1em;

    transition: all 0.3s ease;

    border-radius: var(--radius-lg);

}



.techy-tech-tag:hover {

    background: var(--primary-color);

    color: var(--text-inverse);

    transform: scale(1.05);

}



/* Project Actions */

.techy-project-actions {

    display: flex;

    gap: 1rem;

    align-items: center;

}



.techy-project-link {

    flex: 1;

    background: var(--gradient-primary);

    color: var(--text-inverse);

    text-decoration: none;

    padding: 1rem 2rem;

    font-family: var(--font-family);

    font-weight: var(--font-semibold);

    text-transform: uppercase;

    letter-spacing: 0.1em;

    text-align: center;

    transition: all 0.3s ease;

    border: 2px solid var(--primary-color);

    position: relative;

    overflow: hidden;

    border-radius: var(--radius-lg);

}



.techy-project-link::before {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);

    transition: left 0.5s;

}



.techy-project-link:hover::before {

    left: 100%;

}



.techy-project-link:hover {

    transform: translateY(-2px);

    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.3);

}



.techy-github-btn {

    width: 50px;

    height: 50px;

    background: rgba(37, 99, 235, 0.1);

    border: 2px solid var(--primary-color);

    color: var(--primary-color);

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    transition: all 0.3s ease;

    font-size: 1.2rem;

    border-radius: var(--radius-lg);

}



.techy-github-btn:hover {

    background: var(--primary-color);

    color: var(--text-inverse);

    transform: translateY(-2px);

    box-shadow: 0 5px 15px rgba(37, 99, 235, 0.3);

}



/* Techy Stats Panel */

.techy-stats-panel {

    margin-top: 4rem;

    position: relative;

    z-index: 2;

}



.stats-terminal {

    background: var(--bg-primary);

    border: 2px solid var(--primary-color);

    border-radius: var(--radius-2xl);

    overflow: hidden;

    box-shadow: 

        0 0 30px rgba(37, 99, 235, 0.3),

        inset 0 0 20px rgba(37, 99, 235, 0.1);

}



.terminal-header {

    background: var(--bg-secondary);

    padding: 1rem;

    display: flex;

    align-items: center;

    gap: 1rem;

    border-bottom: 2px solid var(--primary-color);

}



.terminal-buttons {

    display: flex;

    gap: 0.5rem;

}



.terminal-btn {

    width: 12px;

    height: 12px;

    border-radius: 50%;

    border: 1px solid #333;

}



.terminal-btn.red { background: #ff5f56; }

.terminal-btn.yellow { background: #ffbd2e; }

.terminal-btn.green { background: #27ca3f; }



.terminal-title {

    color: var(--primary-color);

    font-family: var(--font-family);

    font-weight: var(--font-semibold);

    font-size: 0.9rem;

}



.terminal-content {

    padding: 2rem;

    font-family: 'Courier New', monospace;

}



.stat-line {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 0.5rem 0;

    border-bottom: 1px solid rgba(0, 255, 65, 0.2);

}



.stat-line:last-child {

    border-bottom: none;

}



.stat-label {

    color: var(--primary-color);

    font-weight: var(--font-semibold);

    text-transform: uppercase;

    letter-spacing: 0.1em;

}



.stat-value {

    color: var(--primary-color);

    font-weight: var(--font-semibold);

    font-size: 1.1rem;

}



.stat-value.online {

    color: var(--primary-color);

    text-shadow: 0 0 10px var(--primary-color);

    animation: pulse 2s infinite;

}



/* Animations */

@keyframes matrixRain {

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

    100% { transform: translateY(100vh); }

}



@keyframes circuitPulse {

    0%, 100% { opacity: 0.3; }

    50% { opacity: 0.8; }

}



@keyframes hologramFloat {

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

    50% { transform: translateY(-20px) rotate(1deg); }

}



@keyframes glitch {

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

    20% { transform: translate(-2px, 2px); }

    40% { transform: translate(-2px, -2px); }

    60% { transform: translate(2px, 2px); }

    80% { transform: translate(2px, -2px); }

}



@keyframes glitch-1 {

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

    20% { transform: translate(2px, -2px); }

    40% { transform: translate(-2px, 2px); }

    60% { transform: translate(-2px, -2px); }

    80% { transform: translate(2px, 2px); }

}



@keyframes glitch-2 {

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

    20% { transform: translate(-2px, 2px); }

    40% { transform: translate(2px, -2px); }

    60% { transform: translate(2px, 2px); }

    80% { transform: translate(-2px, -2px); }

}



@keyframes pulse {

    0%, 100% { opacity: 1; }

    50% { opacity: 0.5; }

}



/* Responsive Design */

@media (max-width: 768px) {

    .projects-techy-grid {

        grid-template-columns: 1fr;

        gap: 1.5rem;

    }

    

    .techy-title {

        font-size: 2.5rem;

    }

    

    .techy-filters {

        gap: 0.5rem;

    }

    

    .techy-btn {

        padding: 0.75rem 1.5rem;

        font-size: 0.8rem;

    }

    

    .techy-btn span {

        display: none;

    }

}



@media (max-width: 480px) {

    .techy-project-actions {

        flex-direction: column;

    }

    

    .techy-github-btn {

        width: 100%;

    }

}



/* No Content Message */

.techy-no-content {

    grid-column: 1 / -1;

    text-align: center;

    color: var(--primary-color);

    font-family: var(--font-family);

    font-size: 1.2rem;

    padding: 3rem;

    border: 2px solid var(--primary-color);

    background: rgba(37, 99, 235, 0.1);

    text-transform: uppercase;

    letter-spacing: 0.1em;

    border-radius: var(--radius-2xl);

}



/* Project Filter Tabs */

.project-filters {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 1rem;

    margin: 3rem 0;

    padding: 0 1rem;

}



.filter-btn {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.75rem 1.5rem;

    background: var(--bg-secondary);

    border: 2px solid var(--border-color);

    border-radius: 50px;

    color: var(--text-secondary);

    font-size: 0.9rem;

    font-weight: 500;

    cursor: pointer;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    position: relative;

    overflow: hidden;

}



.filter-btn::before {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);

    transition: left 0.5s;

}



.filter-btn:hover::before {

    left: 100%;

}



.filter-btn:hover {

    transform: translateY(-2px);

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);

    border-color: var(--accent-color);

    color: var(--text-primary);

}



.filter-btn.active {

    background: var(--accent-color);

    border-color: var(--accent-color);

    color: white;

    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);

}



.filter-btn i {

    font-size: 1rem;

}



/* Projects Masonry Grid */

.projects-masonry {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));

    gap: 2rem;

    margin: 3rem 0;

    padding: 0 1rem;

}



/* Modern Project Cards */

.project-card {

    background: var(--bg-secondary);

    border-radius: 20px;

    overflow: hidden;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

    border: 1px solid var(--border-color);

    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    position: relative;

    cursor: pointer;

    opacity: 0;

    transform: translateY(30px);

    animation: fadeInUp 0.6s ease forwards;

}



.project-card:nth-child(1) { animation-delay: 0.1s; }

.project-card:nth-child(2) { animation-delay: 0.2s; }

.project-card:nth-child(3) { animation-delay: 0.3s; }

.project-card:nth-child(4) { animation-delay: 0.4s; }

.project-card:nth-child(5) { animation-delay: 0.5s; }

.project-card:nth-child(6) { animation-delay: 0.6s; }



.project-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));

    opacity: 0;

    transition: opacity 0.3s ease;

    z-index: 1;

}



.project-card:hover::before {

    opacity: 1;

}



.project-card:hover {

    transform: translateY(-10px) scale(1.02);

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);

    border-color: var(--accent-color);

}



/* Project Image */

.project-image {

    position: relative;

    height: 200px;

    overflow: hidden;

    background: linear-gradient(135deg, #667eea, #764ba2);

}



.project-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.4s ease;

}



.project-card:hover .project-image img {

    transform: scale(1.1);

}



.project-overlay {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: linear-gradient(135deg, rgba(102, 126, 234, 0.8), rgba(118, 75, 162, 0.8));

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: 0;

    transition: opacity 0.3s ease;

    z-index: 2;

}



.project-card:hover .project-overlay {

    opacity: 1;

}



.project-overlay-buttons {

    display: flex;

    gap: 1rem;

}



.project-overlay-btn {

    width: 50px;

    height: 50px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.2);

    border: 2px solid rgba(255, 255, 255, 0.3);

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.2rem;

    cursor: pointer;

    transition: all 0.3s ease;

    backdrop-filter: blur(10px);

}



.project-overlay-btn:hover {

    background: rgba(255, 255, 255, 0.3);

    border-color: rgba(255, 255, 255, 0.5);

    transform: scale(1.1);

}



/* Project Content */

.project-content {

    padding: 1.5rem;

    position: relative;

    z-index: 3;

}



.project-category {

    display: inline-block;

    padding: 0.25rem 0.75rem;

    background: var(--accent-color);

    color: white;

    border-radius: 20px;

    font-size: 0.75rem;

    font-weight: 600;

    margin-bottom: 1rem;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



.project-title {

    font-size: 1.25rem;

    font-weight: 700;

    color: var(--text-primary);

    margin-bottom: 0.75rem;

    line-height: 1.3;

}



.project-description {

    color: var(--text-secondary);

    font-size: 0.9rem;

    line-height: 1.6;

    margin-bottom: 1.5rem;

    display: -webkit-box;

    -webkit-line-clamp: 3;

    -webkit-box-orient: vertical;

    overflow: hidden;

}



/* Project Tech Stack */

.project-tech {

    display: flex;

    flex-wrap: wrap;

    gap: 0.5rem;

    margin-bottom: 1.5rem;

}



.tech-tag {

    padding: 0.25rem 0.75rem;

    background: var(--bg-primary);

    border: 1px solid var(--border-color);

    border-radius: 15px;

    font-size: 0.75rem;

    color: var(--text-secondary);

    font-weight: 500;

    transition: all 0.3s ease;

}



.tech-tag:hover {

    background: var(--accent-color);

    color: white;

    border-color: var(--accent-color);

}



/* Project Actions */

.project-actions {

    display: flex;

    gap: 1rem;

    align-items: center;

}



.project-link {

    flex: 1;

    padding: 0.75rem 1.5rem;

    background: var(--accent-color);

    color: white;

    text-decoration: none;

    border-radius: 10px;

    font-weight: 600;

    text-align: center;

    transition: all 0.3s ease;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 0.5rem;

}



.project-link:hover {

    background: var(--accent-hover);

    transform: translateY(-2px);

    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);

}



.project-github {

    width: 45px;

    height: 45px;

    border-radius: 10px;

    background: var(--bg-primary);

    border: 1px solid var(--border-color);

    color: var(--text-secondary);

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    transition: all 0.3s ease;

}



.project-github:hover {

    background: var(--accent-color);

    color: white;

    border-color: var(--accent-color);

    transform: translateY(-2px);

}



/* Projects CTA */

.projects-cta {

    text-align: center;

    margin-top: 3rem;

}



.projects-cta .btn {

    padding: 1rem 2rem;

    font-size: 1rem;

    font-weight: 600;

}



/* Project Stats */

.project-stats {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

    gap: 2rem;

    margin-top: 4rem;

    padding: 2rem;

    background: var(--bg-secondary);

    border-radius: 20px;

    border: 1px solid var(--border-color);

}



.stat-item {

    text-align: center;

    padding: 1.5rem;

    background: var(--bg-primary);

    border-radius: 15px;

    border: 1px solid var(--border-color);

    transition: all 0.3s ease;

}



.stat-item:hover {

    transform: translateY(-5px);

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);

}



.stat-number {

    font-size: 2.5rem;

    font-weight: 800;

    color: var(--accent-color);

    margin-bottom: 0.5rem;

    background: linear-gradient(135deg, var(--accent-color), #764ba2);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



.stat-label {

    color: var(--text-secondary);

    font-size: 0.9rem;

    font-weight: 500;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



/* Responsive Design */

@media (max-width: 768px) {

    .projects-masonry {

        grid-template-columns: 1fr;

        gap: 1.5rem;

        padding: 0 0.5rem;

    }

    

    .project-filters {

        gap: 0.5rem;

        margin: 2rem 0;

    }

    

    .filter-btn {

        padding: 0.5rem 1rem;

        font-size: 0.8rem;

    }

    

    .filter-btn span {

        display: none;

    }

    

    .project-stats {

        grid-template-columns: repeat(2, 1fr);

        gap: 1rem;

        margin-top: 2rem;

    }

    

    .stat-item {

        padding: 1rem;

    }

    

    .stat-number {

        font-size: 2rem;

    }

}



@media (max-width: 480px) {

    .project-stats {

        grid-template-columns: 1fr;

    }

    

    .project-actions {

        flex-direction: column;

    }

    

    .project-github {

        width: 100%;

    }

}



/* ===== COMPREHENSIVE ANIMATIONS ===== */



/* Keyframe Animations */

@keyframes fadeInUp {

    from {

        opacity: 0;

        transform: translateY(30px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



@keyframes fadeInLeft {

    from {

        opacity: 0;

        transform: translateX(-30px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}



@keyframes fadeInRight {

    from {

        opacity: 0;

        transform: translateX(30px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}



@keyframes fadeInScale {

    from {

        opacity: 0;

        transform: scale(0.9);

    }

    to {

        opacity: 1;

        transform: scale(1);

    }

}



@keyframes slideInDown {

    from {

        opacity: 0;

        transform: translateY(-30px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



@keyframes bounceIn {

    0% {

        opacity: 0;

        transform: scale(0.3);

    }

    50% {

        opacity: 1;

        transform: scale(1.05);

    }

    70% {

        transform: scale(0.9);

    }

    100% {

        opacity: 1;

        transform: scale(1);

    }

}



@keyframes pulse {

    0% {

        transform: scale(1);

    }

    50% {

        transform: scale(1.05);

    }

    100% {

        transform: scale(1);

    }

}



@keyframes float {

    0%, 100% {

        transform: translateY(0px);

    }

    50% {

        transform: translateY(-10px);

    }

}



@keyframes shimmer {

    0% {

        background-position: -200px 0;

    }

    100% {

        background-position: calc(200px + 100%) 0;

    }

}



/* Global Animation Classes */

.animate-fade-in {

    animation: fadeInUp 0.8s ease-out;

}



.animate-fade-in-left {

    animation: fadeInLeft 0.8s ease-out;

}



.animate-fade-in-right {

    animation: fadeInRight 0.8s ease-out;

}



.animate-fade-in-scale {

    animation: fadeInScale 0.6s ease-out;

}



.animate-slide-in-down {

    animation: slideInDown 0.8s ease-out;

}



.animate-bounce-in {

    animation: bounceIn 0.8s ease-out;

}



.animate-pulse {

    animation: pulse 2s infinite;

}



.animate-float {

    animation: float 3s ease-in-out infinite;

}



.animate-shimmer {

    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);

    background-size: 200px 100%;

    animation: shimmer 2s infinite;

}



/* Staggered Animation Delays */

.animate-delay-100 { animation-delay: 0.1s; }

.animate-delay-200 { animation-delay: 0.2s; }

.animate-delay-300 { animation-delay: 0.3s; }

.animate-delay-400 { animation-delay: 0.4s; }

.animate-delay-500 { animation-delay: 0.5s; }

.animate-delay-600 { animation-delay: 0.6s; }

.animate-delay-700 { animation-delay: 0.7s; }

.animate-delay-800 { animation-delay: 0.8s; }



/* Hover Animations */

.hover-lift {

    transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.hover-lift:hover {

    transform: translateY(-5px);

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);

}



.hover-scale {

    transition: transform 0.3s ease;

}



.hover-scale:hover {

    transform: scale(1.05);

}



.hover-glow {

    transition: box-shadow 0.3s ease;

}



.hover-glow:hover {

    box-shadow: 0 0 20px rgba(0, 123, 255, 0.3);

}



/* Page Load Animations */

.hero {

    animation: fadeInUp 1s ease-out;

}



.hero-content h1 {

    animation: fadeInUp 1s ease-out 0.2s both;

}



.hero-content .highlight {

    animation: fadeInUp 1s ease-out 0.4s both;

}



.hero-content p {

    animation: fadeInUp 1s ease-out 0.6s both;

}



.hero-buttons {

    animation: fadeInUp 1s ease-out 0.8s both;

}



/* Section Animations */

.section {

    animation: fadeInUp 0.8s ease-out;

}



.section-header {

    animation: fadeInUp 0.8s ease-out 0.2s both;

}



/* Card Animations */

.skill-card,

.project-card,

.service-hexagon {

    animation: fadeInScale 0.6s ease-out;

    transition: all 0.3s ease;

}



.skill-card:hover,

.project-card:hover {

    transform: translateY(-5px) scale(1.02);

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);

}



.service-hexagon:hover {

    transform: scale(1.1);

    animation: pulse 0.6s ease-in-out;

}



/* Button Animations */

.btn {

    transition: all 0.3s ease;

    position: relative;

    overflow: hidden;

}



.btn:hover {

    transform: translateY(-2px);

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);

}



.btn:active {

    transform: translateY(0);

}



.btn::before {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);

    transition: left 0.5s;

}



.btn:hover::before {

    left: 100%;

}



/* Navigation Animations */

.nav-link {

    transition: all 0.3s ease;

    position: relative;

}



.nav-link::after {

    content: '';

    position: absolute;

    bottom: -5px;

    left: 0;

    width: 0;

    height: 2px;

    background: var(--primary-color);

    transition: width 0.3s ease;

}



.nav-link:hover::after {

    width: 100%;

}



/* Mobile Menu Animations */

.mobile-menu-toggle {

    transition: all 0.3s ease;

}



.mobile-menu-toggle:hover {

    transform: scale(1.1);

}



.nav-menu {

    transition: all 0.3s ease;

}



.nav-menu.active {

    animation: slideInDown 0.3s ease-out;

}



/* Form Animations */

.form-group {

    animation: fadeInUp 0.6s ease-out;

}



.form-group input,

.form-group textarea {

    transition: all 0.3s ease;

}



.form-group input:focus,

.form-group textarea:focus {

    transform: scale(1.02);

    box-shadow: 0 0 15px rgba(0, 123, 255, 0.2);

}



/* Loading Animations */

.loading {

    animation: pulse 1.5s infinite;

}



.loading-spinner {

    animation: spin 1s linear infinite;

}



@keyframes spin {

    from { transform: rotate(0deg); }

    to { transform: rotate(360deg); }

}



/* Scroll Animations */

.animate-on-scroll {

    opacity: 0;

    transform: translateY(30px);

    transition: all 0.8s ease;

}



.animate-on-scroll.visible {

    opacity: 1;

    transform: translateY(0);

}



/* Mobile Specific Animations */

@media (max-width: 768px) {

    .skill-card,

    .project-card {

        animation: fadeInScale 0.6s ease-out;

    }

    

    .service-hexagon {

        animation: bounceIn 0.8s ease-out;

    }

    

    .contact-item {

        animation: fadeInLeft 0.6s ease-out;

    }

    

    .contact-form {

        animation: fadeInRight 0.6s ease-out;

    }

}



/* ===== ANIMATED BACKGROUND ===== */

body {

  position: relative;

  overflow-x: hidden;

}



body::before {

  content: '';

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: 

    radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),

    radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),

    radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.2) 0%, transparent 50%);

  animation: backgroundShift 20s ease-in-out infinite;

  z-index: -2;

}



body::after {

  content: '';

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: 

    linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.02) 50%, transparent 70%);

  animation: shimmer 3s ease-in-out infinite;

  z-index: -1;

}



/* Animated particles */

.particles {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  pointer-events: none;

  z-index: -1;

}



.particle {

  position: absolute;

  background: rgba(255, 255, 255, 0.1);

  border-radius: 50%;

  animation: float 6s ease-in-out infinite;

}



.particle:nth-child(1) { width: 4px; height: 4px; left: 10%; animation-delay: 0s; }

.particle:nth-child(2) { width: 6px; height: 6px; left: 20%; animation-delay: 1s; }

.particle:nth-child(3) { width: 3px; height: 3px; left: 30%; animation-delay: 2s; }

.particle:nth-child(4) { width: 5px; height: 5px; left: 40%; animation-delay: 3s; }

.particle:nth-child(5) { width: 4px; height: 4px; left: 50%; animation-delay: 4s; }

.particle:nth-child(6) { width: 6px; height: 6px; left: 60%; animation-delay: 5s; }

.particle:nth-child(7) { width: 3px; height: 3px; left: 70%; animation-delay: 0.5s; }

.particle:nth-child(8) { width: 5px; height: 5px; left: 80%; animation-delay: 1.5s; }

.particle:nth-child(9) { width: 4px; height: 4px; left: 90%; animation-delay: 2.5s; }

.particle:nth-child(10) { width: 6px; height: 6px; left: 15%; animation-delay: 3.5s; }

.particle:nth-child(11) { width: 3px; height: 3px; left: 25%; animation-delay: 4.5s; }

.particle:nth-child(12) { width: 5px; height: 5px; left: 35%; animation-delay: 5.5s; }

.particle:nth-child(13) { width: 4px; height: 4px; left: 45%; animation-delay: 1.2s; }

.particle:nth-child(14) { width: 6px; height: 6px; left: 55%; animation-delay: 2.2s; }

.particle:nth-child(15) { width: 3px; height: 3px; left: 65%; animation-delay: 3.2s; }

.particle:nth-child(16) { width: 5px; height: 5px; left: 75%; animation-delay: 4.2s; }

.particle:nth-child(17) { width: 4px; height: 4px; left: 85%; animation-delay: 5.2s; }

.particle:nth-child(18) { width: 6px; height: 6px; left: 95%; animation-delay: 0.8s; }

.particle:nth-child(19) { width: 3px; height: 3px; left: 5%; animation-delay: 1.8s; }

.particle:nth-child(20) { width: 5px; height: 5px; left: 12%; animation-delay: 2.8s; }



/* Background animation keyframes */

@keyframes backgroundShift {

  0%, 100% {

    transform: translateX(0) translateY(0) scale(1);

  }

  25% {

    transform: translateX(-20px) translateY(-10px) scale(1.1);

  }

  50% {

    transform: translateX(20px) translateY(10px) scale(0.9);

  }

  75% {

    transform: translateX(-10px) translateY(20px) scale(1.05);

  }

}



@keyframes shimmer {

  0% {

    transform: translateX(-100%) translateY(-100%) rotate(45deg);

  }

  100% {

    transform: translateX(100%) translateY(100%) rotate(45deg);

  }

}



@keyframes float {

  0%, 100% {

    transform: translateY(0px) translateX(0px);

    opacity: 0.7;

  }

  25% {

    transform: translateY(-20px) translateX(10px);

    opacity: 1;

  }

  50% {

    transform: translateY(-40px) translateX(-5px);

    opacity: 0.8;

  }

  75% {

    transform: translateY(-20px) translateX(-10px);

    opacity: 0.9;

  }

}



/* ===== INTERACTIVE ELEMENTS ===== */







/* Custom Cursor */



.custom-cursor {



  position: fixed;



  top: 0;



  left: 0;



  pointer-events: none;



  z-index: 9999;



  mix-blend-mode: difference;



}







.cursor-dot {



  width: 8px;



  height: 8px;



  background: var(--primary-color);



  border-radius: 50%;



  position: absolute;



  transform: translate(-50%, -50%);



  transition: all 0.1s ease;



}







.cursor-outline {



  width: 40px;



  height: 40px;



  border: 2px solid var(--primary-color);



  border-radius: 50%;



  position: absolute;



  transform: translate(-50%, -50%);



  transition: all 0.15s ease;



  opacity: 0.3;



}







.custom-cursor.hover .cursor-dot {



  transform: translate(-50%, -50%) scale(1.5);



}







.custom-cursor.hover .cursor-outline {



  transform: translate(-50%, -50%) scale(1.5);



  opacity: 0.6;



}







/* Interactive Background */



.interactive-bg {



  position: fixed;



  top: 0;



  left: 0;



  width: 100%;



  height: 100%;



  pointer-events: none;



  z-index: -1;



  overflow: hidden;



}







.floating-shapes {



  position: absolute;



  width: 100%;



  height: 100%;



}







.shape {



  position: absolute;



  border-radius: 50%;



  background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));



  opacity: 0.1;



  animation: floatShape 20s infinite linear;



}







.shape-1 {



  width: 80px;



  height: 80px;



  top: 20%;



  left: 10%;



  animation-delay: 0s;



  animation-duration: 25s;



}







.shape-2 {



  width: 120px;



  height: 120px;



  top: 60%;



  right: 15%;



  animation-delay: 5s;



  animation-duration: 30s;



}







.shape-3 {



  width: 60px;



  height: 60px;



  top: 10%;



  right: 30%;



  animation-delay: 10s;



  animation-duration: 20s;



}







.shape-4 {



  width: 100px;



  height: 100px;



  bottom: 20%;



  left: 20%;



  animation-delay: 15s;



  animation-duration: 35s;



}







.shape-5 {



  width: 70px;



  height: 70px;



  top: 40%;



  left: 50%;



  animation-delay: 8s;



  animation-duration: 28s;



}







@keyframes floatShape {



  0% {



    transform: translateY(0px) rotate(0deg);



  }



  50% {



    transform: translateY(-100px) rotate(180deg);



  }



  100% {



    transform: translateY(0px) rotate(360deg);



  }



}







.mouse-trail {



  position: absolute;



  width: 4px;



  height: 4px;



  background: var(--primary-color);



  border-radius: 50%;



  opacity: 0;



  pointer-events: none;



}







/* Interactive Text Effects */



.interactive-text {



  position: relative;



  cursor: pointer;



  transition: all 0.3s ease;



}







.interactive-text:hover {



  transform: scale(1.05);



  text-shadow: 0 0 20px rgba(59, 130, 246, 0.5);



}







.interactive-highlight {



  position: relative;



  display: inline-block;



  transition: all 0.3s ease;



}







.interactive-highlight::before {



  content: '';



  position: absolute;



  top: 0;



  left: 0;



  right: 0;



  bottom: 0;



  background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));



  opacity: 0;



  transition: opacity 0.3s ease;



  z-index: -1;



  border-radius: 4px;



}







.interactive-highlight:hover::before {



  opacity: 0.2;



}







.interactive-subtitle {



  position: relative;



  transition: all 0.3s ease;



}







.interactive-subtitle:hover {



  transform: translateX(10px);



  color: var(--primary-color);



}







.interactive-description {



  transition: all 0.3s ease;



}







.interactive-description:hover {



  transform: translateY(-2px);



  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);



}







/* Interactive Buttons */



.interactive-btn {



  position: relative;



  overflow: hidden;



  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);



}







.interactive-btn:hover {



  transform: translateY(-3px) scale(1.05);



  box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);



}







.btn-ripple {



  position: absolute;



  top: 50%;



  left: 50%;



  width: 0;



  height: 0;



  background: rgba(255, 255, 255, 0.3);



  border-radius: 50%;



  transform: translate(-50%, -50%);



  transition: width 0.6s, height 0.6s;



}







.interactive-btn:active .btn-ripple {



  width: 300px;



  height: 300px;



}







.btn-text {



  position: relative;



  z-index: 2;



  transition: all 0.3s ease;



}







.interactive-btn:hover .btn-text {



  transform: scale(1.1);



}







/* Magnetic Effect */



[data-magnetic] {



  transition: transform 0.3s cubic-bezier(0.23, 1, 0.320, 1);



}







/* Interactive Cards */



.interactive-card {



  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);



  cursor: pointer;



}







.interactive-card:hover {



  transform: translateY(-10px) scale(1.02);



  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);



}







/* 3D Tilt Effect */



[data-tilt] {



  transform-style: preserve-3d;



  transition: transform 0.3s ease;



}







/* Social Links */



.interactive-social {



  position: relative;



  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);



  display: flex;



  align-items: center;



  justify-content: center;



}







.interactive-social:hover {



  transform: scale(1.2) rotate(5deg);



}







.social-tooltip {



  position: absolute;



  bottom: -30px;



  left: 50%;



  transform: translateX(-50%);



  background: var(--bg-primary);



  color: var(--text-primary);



  padding: 0.5rem 1rem;



  border-radius: 6px;



  font-size: 0.8rem;



  white-space: nowrap;



  opacity: 0;



  visibility: hidden;



  transition: all 0.3s ease;



  border: 1px solid var(--border-color);



  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);



}







.interactive-social:hover .social-tooltip {



  opacity: 1;



  visibility: visible;



  transform: translateX(-50%) translateY(-5px);



}







/* Interactive Grids */



.interactive-grid .skill-card,



.interactive-grid .project-card {



  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);



  cursor: pointer;



}







.interactive-grid .skill-card:hover,



.interactive-grid .project-card:hover {



  transform: translateY(-8px) scale(1.05);



  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);



}







/* Interactive Timeline */



.interactive-timeline .timeline-item {



  transition: all 0.3s ease;



}







.interactive-timeline .timeline-item:hover {



  transform: translateX(10px);



}







.interactive-timeline .feature-item {



  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);



  cursor: pointer;



}







.interactive-timeline .feature-item:hover {



  transform: translateY(-3px) scale(1.02);



  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);



}







/* Interactive Showcase */



.interactive-showcase .project-card {



  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);



  cursor: pointer;



}







.interactive-showcase .project-card:hover {



  transform: translateY(-10px) scale(1.03);



  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);



}







/* Image Glow Effect */



.image-glow {



  position: absolute;



  top: -20px;



  left: -20px;



  right: -20px;



  bottom: -20px;



  background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));



  border-radius: 50%;



  opacity: 0;



  transition: opacity 0.3s ease;



  z-index: -1;



  filter: blur(20px);



}







.interactive-card:hover .image-glow {



  opacity: 0.3;



}







/* Image Overlay */



.image-overlay {



  position: absolute;



  top: 0;



  left: 0;



  right: 0;



  bottom: 0;



  background: rgba(0, 0, 0, 0.7);



  display: flex;



  align-items: center;



  justify-content: center;



  opacity: 0;



  transition: all 0.3s ease;



  border-radius: 50%;



}







.interactive-card:hover .image-overlay {



  opacity: 1;



}







.social-links {



  display: flex;



  gap: 1.5rem;



}







.social-link {



  width: 50px;



  height: 50px;



  background: var(--bg-primary);



  border: 2px solid var(--primary-color);



  border-radius: 50%;



  display: flex;



  align-items: center;



  justify-content: center;



  color: var(--primary-color);



  font-size: 1.2rem;



  transition: all 0.3s ease;



  position: relative;



}







.social-link:hover {



  background: var(--primary-color);



  color: white;



  transform: scale(1.1);



}







/* Responsive Interactive Elements */



@media (max-width: 768px) {



  .custom-cursor {



    display: none;



  }



  



  .interactive-text:hover {



    transform: none;



  }



  



  .interactive-btn:hover {



    transform: none;



  }



  



  .interactive-card:hover {



    transform: none;



  }



  



  .social-tooltip {



    display: none;



  }



}



/* ===== INTERACTIVE FEATURES ===== */







/* Custom Cursor */



.custom-cursor {



  position: fixed;



  top: 0;



  left: 0;



  width: 20px;



  height: 20px;



  pointer-events: none;



  z-index: 9999;



  transition: transform 0.1s ease;



}







.cursor-dot {



  width: 8px;



  height: 8px;



  background: var(--primary-color);



  border-radius: 50%;



  position: absolute;



  top: 50%;



  left: 50%;



  transform: translate(-50%, -50%);



}







.cursor-outline {



  width: 40px;



  height: 40px;



  border: 2px solid var(--primary-color);



  border-radius: 50%;



  position: absolute;



  top: 50%;



  left: 50%;



  transform: translate(-50%, -50%);



  opacity: 0.3;



  transition: all 0.3s ease;



}







/* Mouse Trail */



.mouse-trail {



  position: fixed;



  top: 0;



  left: 0;



  width: 100%;



  height: 100%;



  pointer-events: none;



  z-index: 1;



}







.trail-dot {



  position: absolute;



  width: 6px;



  height: 6px;



  background: var(--accent-color);



  border-radius: 50%;



  opacity: 0.8;



  animation: trailFade 0.6s ease-out forwards;



}







@keyframes trailFade {



  0% {



    opacity: 0.8;



    transform: scale(1);



  }



  100% {



    opacity: 0;



    transform: scale(0.3);



  }



}







/* Interactive Background */



.interactive-bg {



  position: fixed;



  top: 0;



  left: 0;



  width: 100%;



  height: 100%;



  pointer-events: none;



  z-index: 0;



  overflow: hidden;



}







.floating-shapes {



  position: absolute;



  width: 100%;



  height: 100%;



}







.shape {



  position: absolute;



  border-radius: 50%;



  background: linear-gradient(45deg, var(--primary-color), var(--accent-color));



  opacity: 0.1;



  animation: float 6s ease-in-out infinite;



}







.shape-1 {



  width: 80px;



  height: 80px;



  top: 20%;



  left: 10%;



  animation-delay: 0s;



}







.shape-2 {



  width: 120px;



  height: 120px;



  top: 60%;



  right: 15%;



  animation-delay: 2s;



}







.shape-3 {



  width: 60px;



  height: 60px;



  bottom: 30%;



  left: 20%;



  animation-delay: 4s;



}







.shape-4 {



  width: 100px;



  height: 100px;



  top: 40%;



  left: 50%;



  animation-delay: 1s;



}







.shape-5 {



  width: 90px;



  height: 90px;



  bottom: 20%;



  right: 30%;



  animation-delay: 3s;



}







@keyframes float {



  0%, 100% {



    transform: translateY(0px) rotate(0deg);



  }



  50% {



    transform: translateY(-20px) rotate(180deg);



  }



}







/* Interactive Text Effects */



.interactive-text {



  transition: all 0.3s ease;



  cursor: pointer;



}







.interactive-text:hover {



  transform: translateY(-2px);



  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);



}







.interactive-highlight {



  background: linear-gradient(120deg, transparent 0%, var(--accent-color) 50%, transparent 100%);



  background-size: 200% 100%;



  background-position: -200% 0;



  transition: background-position 0.6s ease;



}







.interactive-highlight:hover {



  background-position: 200% 0;



}







.interactive-subtitle {



  position: relative;



  overflow: hidden;



}







.interactive-subtitle::after {



  content: '';



  position: absolute;



  bottom: 0;



  left: -100%;



  width: 100%;



  height: 2px;



  background: var(--primary-color);



  transition: left 0.5s ease;



}







.interactive-subtitle:hover::after {



  left: 0;



}







.interactive-description {



  transition: all 0.3s ease;



}







.interactive-description:hover {



  transform: translateX(10px);



  color: var(--primary-color);



}







/* Interactive Buttons */



.interactive-btn {



  position: relative;



  overflow: hidden;



  transition: all 0.3s ease;



}







.interactive-btn::before {



  content: '';



  position: absolute;



  top: 50%;



  left: 50%;



  width: 0;



  height: 0;



  background: rgba(255, 255, 255, 0.2);



  border-radius: 50%;



  transform: translate(-50%, -50%);



  transition: width 0.6s ease, height 0.6s ease;



}







.interactive-btn:hover::before {



  width: 300px;



  height: 300px;



}







.btn-ripple {



  position: relative;



  overflow: hidden;



}







.btn-ripple::after {



  content: '';



  position: absolute;



  top: 50%;



  left: 50%;



  width: 0;



  height: 0;



  background: rgba(255, 255, 255, 0.3);



  border-radius: 50%;



  transform: translate(-50%, -50%);



  transition: width 0.6s ease, height 0.6s ease;



}







.btn-ripple:active::after {



  width: 200px;



  height: 200px;



}







/* Interactive Cards */



.interactive-card {



  transition: all 0.3s ease;



  position: relative;



  overflow: hidden;



}







.interactive-card::before {



  content: '';



  position: absolute;



  top: 0;



  left: -100%;



  width: 100%;



  height: 100%;



  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);



  transition: left 0.6s ease;



}







.interactive-card:hover::before {



  left: 100%;



}







.interactive-card:hover {



  transform: translateY(-5px) scale(1.02);



  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);



}







.image-overlay {



  position: absolute;



  top: 0;



  left: 0;



  width: 100%;



  height: 100%;



  background: linear-gradient(45deg, var(--primary-color), var(--accent-color));



  opacity: 0;



  transition: opacity 0.3s ease;



  display: flex;



  align-items: center;



  justify-content: center;



  color: white;



  font-size: 1.2rem;



  font-weight: 600;



}







.interactive-card:hover .image-overlay {



  opacity: 0.9;



}







/* Interactive Social Links */



.interactive-social {



  position: relative;



  transition: all 0.3s ease;



}







.interactive-social:hover {



  transform: translateY(-3px) scale(1.1);



}







.social-tooltip {



  position: absolute;



  bottom: 100%;



  left: 50%;



  transform: translateX(-50%);



  background: var(--text-primary);



  color: white;



  padding: 0.5rem 1rem;



  border-radius: var(--radius-md);



  font-size: var(--font-size-sm);



  white-space: nowrap;



  opacity: 0;



  visibility: hidden;



  transition: all 0.3s ease;



  margin-bottom: 0.5rem;



}







.social-tooltip::after {



  content: '';



  position: absolute;



  top: 100%;



  left: 50%;



  transform: translateX(-50%);



  border: 5px solid transparent;



  border-top-color: var(--text-primary);



}







.interactive-social:hover .social-tooltip {



  opacity: 1;



  visibility: visible;



}







/* Responsive Interactive Elements */



@media (max-width: 768px) {



  .custom-cursor {



    display: none;



  }



  



  .interactive-text:hover {



    transform: none;



  }



  



  .interactive-btn:hover {



    transform: none;



  }



  



  .interactive-card:hover {



    transform: none;



  }



  



  .social-tooltip {



    display: none;



  }



}







/* Hero Social Links */

.hero-social-links {

  display: flex;

  justify-content: center;

  gap: 1.5rem;

  margin-top: 1.5rem;

  padding: 1rem;

}



.hero-social-links .social-link {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 0.5rem;

  padding: 1rem;

  background: rgba(255, 255, 255, 0.1);

  border: 2px solid rgba(255, 255, 255, 0.2);

  border-radius: 15px;

  color: var(--text-primary);

  text-decoration: none;

  transition: all 0.3s ease;

  backdrop-filter: blur(10px);

  min-width: 80px;

}



.hero-social-links .social-link:hover {

  background: var(--primary-color);

  color: white;

  transform: translateY(-5px) scale(1.05);

  box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);

  border-color: var(--primary-color);

}



.hero-social-links .social-link i {

  font-size: 1.5rem;

  margin-bottom: 0.25rem;

}



.hero-social-links .social-label {

  font-size: 0.8rem;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.5px;

}



@media (max-width: 768px) {

  .hero-social-links {

    gap: 1rem;

    margin-top: 1rem;

  }

  

  .hero-social-links .social-link {

    padding: 0.75rem;

    min-width: 70px;

  }

  

  .hero-social-links .social-link i {

    font-size: 1.25rem;

  }

  

  .hero-social-links .social-label {

    font-size: 0.7rem;

  }

}







/* Mobile Layout Improvements */

@media (max-width: 768px) {

  .hero {

    padding: 2rem 0;

    min-height: 100vh;

  }

  

  .hero-content {

    flex-direction: column;

    text-align: center;

    gap: 2rem;

  }

  

  .hero-text {

    order: 2;

  }

  

  .hero-image {

    order: 1;

    margin-bottom: 1rem;

  }

  

  .hero-title {

    font-size: 2rem;

    margin-bottom: 1rem;

  }

  

  .hero-subtitle {

    font-size: 1.1rem;

    margin-bottom: 1rem;

  }

  

  .hero-description {

    font-size: 0.9rem;

    margin-bottom: 1.5rem;

  }

  

  .hero-buttons {

    flex-direction: column;

    gap: 1rem;

    align-items: center;

  }

  

  .hero-buttons .btn {

    width: 100%;

    max-width: 250px;

  }

  

  .image-container {

    width: 200px;

    height: 200px;

    margin: 0 auto;

  }

  

  .profile-image {

    width: 100%;

    height: 100%;

    object-fit: cover;

  }

  

  .hero-social-links {

    gap: 1rem;

    margin-top: 1rem;

    flex-wrap: wrap;

  }

  

  .hero-social-links .social-link {

    padding: 0.75rem;

    min-width: 70px;

  }

  

  .hero-social-links .social-link i {

    font-size: 1.25rem;

  }

  

  .hero-social-links .social-label {

    font-size: 0.7rem;

  }

  

  /* Navigation improvements */

  .nav-menu {

    position: fixed;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100vh;

    background: var(--bg-primary);

    flex-direction: column;

    justify-content: center;

    align-items: center;

    transition: left 0.3s ease;

    z-index: 1000;

  }

  

  .nav-menu.active {

    left: 0;

  }

  

  .nav-link {

    font-size: 1.5rem;

    margin: 1rem 0;

  }

}







/* Profile Image Improvements */

.image-container {

  position: relative;

  width: 300px;

  height: 300px;

  margin: 0 auto;

  border-radius: 20px;

  overflow: hidden;

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);

  background: linear-gradient(135deg, var(--primary-color), var(--accent-color));

  padding: 4px;

}



.profile-image {

  width: 100%;

  height: 100%;

  object-fit: cover;

  border-radius: 16px;

  display: block;

}



/* Improved Hero Social Links */

.hero-social-links {

  display: flex;

  justify-content: center;

  gap: 1rem;

  margin-top: 2rem;

  padding: 0 1rem;

}



.hero-social-links .social-link {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 0.5rem;

  padding: 1rem 1.5rem;

  background: rgba(255, 255, 255, 0.95);

  border: 2px solid rgba(59, 130, 246, 0.2);

  border-radius: 20px;

  color: var(--text-primary);

  text-decoration: none;

  transition: all 0.3s ease;

  backdrop-filter: blur(10px);

  min-width: 90px;

  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

}



.hero-social-links .social-link:hover {

  background: var(--primary-color);

  color: white;

  transform: translateY(-8px) scale(1.08);

  box-shadow: 0 15px 35px rgba(59, 130, 246, 0.4);

  border-color: var(--primary-color);

}



.hero-social-links .social-link i {

  font-size: 1.8rem;

  margin-bottom: 0.25rem;

}



.hero-social-links .social-label {

  font-size: 0.85rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.8px;

}



/* Mobile Profile Image */

@media (max-width: 768px) {

  .image-container {

    width: 250px;

    height: 250px;

  }

  

  .hero-social-links {

    gap: 0.75rem;

    margin-top: 1.5rem;

  }

  

  .hero-social-links .social-link {

    padding: 0.75rem 1rem;

    min-width: 80px;

  }

  

  .hero-social-links .social-link i {

    font-size: 1.5rem;

  }

  

  .hero-social-links .social-label {

    font-size: 0.75rem;

  }

}







/* Enhanced Hero Social Links */

.hero-social-links {

  display: flex;

  justify-content: center;

  gap: 1.5rem;

  margin-top: 2rem;

  padding: 0 1rem;

  flex-wrap: wrap;

}



.hero-social-links .social-link {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 0.75rem;

  padding: 1.5rem 2rem;

  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85));

  border: 2px solid rgba(59, 130, 246, 0.3);

  border-radius: 25px;

  color: var(--text-primary);

  text-decoration: none;

  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  backdrop-filter: blur(15px);

  min-width: 120px;

  min-height: 100px;

  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);

  position: relative;

  overflow: hidden;

}



.hero-social-links .social-link::before {

  content: '';

  position: absolute;

  top: 0;

  left: -100%;

  width: 100%;

  height: 100%;

  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);

  transition: left 0.6s ease;

}



.hero-social-links .social-link:hover::before {

  left: 100%;

}



.hero-social-links .social-link:hover {

  background: linear-gradient(135deg, var(--primary-color), var(--accent-color));

  color: white;

  transform: translateY(-10px) scale(1.05);

  box-shadow: 0 20px 40px rgba(59, 130, 246, 0.4);

  border-color: var(--primary-color);

}



.hero-social-links .social-link i {

  font-size: 2.2rem;

  margin-bottom: 0.5rem;

  display: block;

  width: 100%;

  text-align: center;

  transition: all 0.3s ease;

}



.hero-social-links .social-link:hover i {

  transform: scale(1.2) rotate(5deg);

}



.hero-social-links .social-label {

  font-size: 0.9rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 1px;

  text-align: center;

  line-height: 1.2;

}



/* Mobile Social Links */

@media (max-width: 768px) {

  .hero-social-links {

    gap: 1rem;

    margin-top: 1.5rem;

  }

  

  .hero-social-links .social-link {

    padding: 1.25rem 1.5rem;

    min-width: 100px;

    min-height: 90px;

  }

  

  .hero-social-links .social-link i {

    font-size: 1.8rem;

  }

  

  .hero-social-links .social-label {

    font-size: 0.8rem;

  }

}







/* Social Icon Specific Styling */

.social-icon {

  display: inline-block !important;

  width: auto !important;

  height: auto !important;

  line-height: 1 !important;

  vertical-align: middle !important;

  font-style: normal !important;

  font-variant: normal !important;

  text-rendering: auto !important;

  -webkit-font-smoothing: antialiased !important;

  -moz-osx-font-smoothing: grayscale !important;

}



/* Ensure Font Awesome icons load properly */

.fab, .fas {

  font-family: 'Font Awesome 6 Brands', 'Font Awesome 6 Free' !important;

  font-weight: 900 !important;

}



.fab {

  font-weight: 400 !important;

}



/* GitHub specific styling */

.fa-github {

  color: #333 !important;

}



.hero-social-links .social-link:hover .fa-github {

  color: white !important;

}



/* LinkedIn specific styling */

.fa-linkedin {

  color: #0077b5 !important;

}



.hero-social-links .social-link:hover .fa-linkedin {

  color: white !important;

}



/* Email specific styling */

.fa-envelope {

  color: #ea4335 !important;

}



.hero-social-links .social-link:hover .fa-envelope {

  color: white !important;

}







/* Clean Social Links - No Icons */

.hero-social-links {

  display: flex;

  justify-content: center;

  gap: 1rem;

  margin-top: 2rem;

  padding: 0 1rem;

  flex-wrap: wrap;

}



.hero-social-links .social-link {

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 0.75rem 1.5rem;

  background: rgba(255, 255, 255, 0.1);

  border: 2px solid rgba(255, 255, 255, 0.2);

  border-radius: 50px;

  color: var(--text-primary);

  text-decoration: none;

  transition: all 0.3s ease;

  backdrop-filter: blur(10px);

  min-width: 100px;

  font-weight: 600;

  position: relative;

  overflow: hidden;

}



.hero-social-links .social-link::before {

  content: '';

  position: absolute;

  top: 0;

  left: -100%;

  width: 100%;

  height: 100%;

  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);

  transition: left 0.5s ease;

}



.hero-social-links .social-link:hover::before {

  left: 100%;

}



.hero-social-links .social-link:hover {

  background: var(--primary-color);

  color: white;

  transform: translateY(-3px);

  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);

  border-color: var(--primary-color);

}



.hero-social-links .social-label {

  font-size: 0.9rem;

  font-weight: 600;

  text-align: center;

  letter-spacing: 0.5px;

}



/* Mobile-First Responsive Design */

@media (max-width: 768px) {

  .hero {

    padding: 1rem 0;

    min-height: 100vh;

  }

  

  .hero-content {

    flex-direction: column;

    text-align: center;

    gap: 1.5rem;

    padding: 0 1rem;

  }

  

  .hero-text {

    order: 2;

  }

  

  .hero-image {

    order: 1;

    margin-bottom: 1rem;

  }

  

  .hero-title {

    font-size: 1.8rem;

    margin-bottom: 0.5rem;

    line-height: 1.2;

  }

  

  .hero-subtitle {

    font-size: 1rem;

    margin-bottom: 0.75rem;

  }

  

  .hero-description {

    font-size: 0.85rem;

    margin-bottom: 1.25rem;

    line-height: 1.5;

  }

  

  .hero-buttons {

    flex-direction: column;

    gap: 0.75rem;

    align-items: center;

    margin-bottom: 1rem;

  }

  

  .hero-buttons .btn {

    width: 100%;

    max-width: 280px;

    padding: 0.75rem 1.5rem;

    font-size: 0.9rem;

  }

  

  .image-container {

    width: 200px;

    height: 200px;

    margin: 0 auto;

  }

  

  .profile-image {

    width: 100%;

    height: 100%;

    object-fit: cover;

  }

  

  .hero-social-links {

    gap: 0.75rem;

    margin-top: 1.5rem;

    justify-content: center;

  }

  

  .hero-social-links .social-link {

    padding: 0.6rem 1.25rem;

    min-width: 80px;

    font-size: 0.85rem;

  }

  

  .hero-social-links .social-label {

    font-size: 0.8rem;

  }

  

  /* Navigation improvements for mobile */

  .nav-menu {

    position: fixed;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100vh;

    background: var(--bg-primary);

    flex-direction: column;

    justify-content: center;

    align-items: center;

    transition: left 0.3s ease;

    z-index: 1000;

    padding: 2rem;

  }

  

  .nav-menu.active {

    left: 0;

  }

  

  .nav-link {

    font-size: 1.5rem;

    margin: 1rem 0;

    padding: 0.5rem 1rem;

    border-radius: 10px;

    transition: all 0.3s ease;

  }

  

  .nav-link:hover {

    background: var(--primary-color);

    color: white;

  }

  

  .mobile-menu-toggle {

    display: block;

    z-index: 1001;

  }

  

  /* Section spacing for mobile */

  .section {

    padding: 2rem 0;

  }

  

  .container {

    padding: 0 1rem;

  }

  

  .section-title {

    font-size: 1.8rem;

    margin-bottom: 1rem;

  }

  

  .section-subtitle {

    font-size: 1rem;

    margin-bottom: 2rem;

  }

}



/* Extra small mobile devices */

@media (max-width: 480px) {

  .hero-title {

    font-size: 1.5rem;

  }

  

  .hero-subtitle {

    font-size: 0.9rem;

  }

  

  .hero-description {

    font-size: 0.8rem;

  }

  

  .image-container {

    width: 180px;

    height: 180px;

  }

  

  .hero-social-links {

    gap: 0.5rem;

  }

  

  .hero-social-links .social-link {

    padding: 0.5rem 1rem;

    min-width: 70px;

  }

  

  .hero-social-links .social-label {

    font-size: 0.75rem;

  }

}







/* Mobile Navigation Improvements */

.mobile-menu-toggle {

  display: none;

  flex-direction: column;

  justify-content: space-around;

  width: 30px;

  height: 30px;

  background: transparent;

  border: none;

  cursor: pointer;

  padding: 0;

  z-index: 1001;

}



.mobile-menu-toggle span {

  width: 100%;

  height: 3px;

  background: var(--text-primary);

  border-radius: 2px;

  transition: all 0.3s ease;

  transform-origin: center;

}



.mobile-menu-toggle.active span:nth-child(1) {

  transform: rotate(45deg) translate(6px, 6px);

}



.mobile-menu-toggle.active span:nth-child(2) {

  opacity: 0;

}



.mobile-menu-toggle.active span:nth-child(3) {

  transform: rotate(-45deg) translate(6px, -6px);

}



/* Mobile-first responsive design */

@media (max-width: 768px) {

  .mobile-menu-toggle {

    display: flex;

  }

  

  .nav-menu {

    position: fixed;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100vh;

    background: var(--bg-primary);

    flex-direction: column;

    justify-content: center;

    align-items: center;

    transition: left 0.3s ease;

    z-index: 1000;

    padding: 2rem;

    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);

  }

  

  .nav-menu.active {

    left: 0;

  }

  

  .nav-link {

    font-size: 1.5rem;

    margin: 1rem 0;

    padding: 0.75rem 1.5rem;

    border-radius: 15px;

    transition: all 0.3s ease;

    width: 100%;

    text-align: center;

    background: rgba(255, 255, 255, 0.05);

    border: 1px solid rgba(255, 255, 255, 0.1);

  }

  

  .nav-link:hover {

    background: var(--primary-color);

    color: white;

    transform: translateY(-2px);

    box-shadow: 0 5px 15px rgba(59, 130, 246, 0.3);

  }

  

  .nav-container {

    padding: 1rem;

  }

  

  .nav-logo a {

    font-size: 1.2rem;

    font-weight: 700;

  }

  

  .theme-toggle {

    margin-right: 1rem;

  }

}



/* Extra small devices */

@media (max-width: 480px) {

  .nav-container {

    padding: 0.75rem;

  }

  

  .nav-link {

    font-size: 1.25rem;

    padding: 0.6rem 1.25rem;

  }

  

  .mobile-menu-toggle {

    width: 25px;

    height: 25px;

  }

}







/* Contact Section - No Icons */

.contact-label {

  font-weight: 600;

  color: var(--primary-color);

  margin-right: 0.5rem;

  min-width: 60px;

  display: inline-block;

}



.contact-item {

  display: flex;

  align-items: center;

  margin-bottom: 1rem;

  padding: 0.75rem;

  background: rgba(255, 255, 255, 0.05);

  border-radius: 10px;

  border: 1px solid rgba(255, 255, 255, 0.1);

}



.contact-item span:not(.contact-label) {

  flex: 1;

  color: var(--text-secondary);

}



.copy-email-btn {

  background: var(--primary-color);

  color: white;

  border: none;

  padding: 0.5rem 1rem;

  border-radius: 8px;

  cursor: pointer;

  font-size: 0.8rem;

  font-weight: 600;

  transition: all 0.3s ease;

  margin-left: 1rem;

}



.copy-email-btn:hover {

  background: var(--accent-color);

  transform: translateY(-2px);

  box-shadow: 0 5px 15px rgba(59, 130, 246, 0.3);

}



/* Social Links - No Icons */

.social-links {

  display: flex;

  gap: 1rem;

  margin-top: 1.5rem;

  flex-wrap: wrap;

}



.social-links .social-link {

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 0.75rem 1.5rem;

  background: rgba(255, 255, 255, 0.1);

  border: 2px solid rgba(255, 255, 255, 0.2);

  border-radius: 25px;

  color: var(--text-primary);

  text-decoration: none;

  transition: all 0.3s ease;

  backdrop-filter: blur(10px);

  font-weight: 600;

  min-width: 80px;

}



.social-links .social-link:hover {

  background: var(--primary-color);

  color: white;

  transform: translateY(-3px);

  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);

  border-color: var(--primary-color);

}



.social-links .social-link span {

  font-size: 0.9rem;

  font-weight: 600;

}



/* Mobile Contact Section */

@media (max-width: 768px) {

  .contact-item {

    flex-direction: column;

    align-items: flex-start;

    gap: 0.5rem;

    padding: 1rem;

  }

  

  .contact-label {

    min-width: auto;

    margin-right: 0;

    margin-bottom: 0.25rem;

  }

  

  .copy-email-btn {

    margin-left: 0;

    margin-top: 0.5rem;

    align-self: flex-start;

  }

  

  .social-links {

    gap: 0.75rem;

    justify-content: center;

  }

  

  .social-links .social-link {

    padding: 0.6rem 1.25rem;

    min-width: 70px;

  }

  

  .social-links .social-link span {

    font-size: 0.8rem;

  }

}