@keyframes fadeIn {
  0% {
      opacity: 0;
      transform: translateY(30px)
  }

  to {
      opacity: 1;
      transform: translateY(0)
  }
}

@keyframes fadeOut {
  0% {
      opacity: 1;
      transform: translateY(0)
  }

  to {
      opacity: 0;
      transform: translateY(30px)
  }
}

@keyframes slideInLeft {
  0% {
      transform: translateX(-100%);
      opacity: 0
  }

  to {
      transform: translateX(0);
      opacity: 1
  }
}

@keyframes slideOutLeft {
  0% {
      transform: translateX(0);
      opacity: 1
  }

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

@keyframes fadeInScale {
  to {
      opacity: 1;
      transform: scale(1)
  }
}

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

@keyframes fadeInUp {
  0% {
      opacity: 0;
      transform: translateY(20px)
  }

  to {
      opacity: 1;
      transform: translateY(0)
  }
}

@keyframes pop {
  0% {
      transform: scale(1)
  }

  50% {
      transform: scale(.7)
  }

  to {
      transform: scale(1.1)
  }
}

@keyframes rotateIcon {
  0% {
      transform: rotate(0deg) scale(.6)
  }

  50% {
      transform: rotate(180deg) scale(1.2)
  }

  to {
      transform: rotate(360deg) scale(1)
  }
}

@keyframes fadeSlideIn {
  0% {
      opacity: 0;
      transform: translateX(20px)
  }

  to {
      opacity: 1;
      transform: translateX(0)
  }
}

/* ===== CSS Custom Properties ===== */
:root {
  /* Colors */
  --bg-dark: #121212;
  --bg-darker: #0c0c0c;
  --bg-card: #1e1e1e;
  --text-light: #f2f2f2;
  --text-gray: #ccc;
  --text-muted: #aaa;
  --text-dark: #333;
  --accent-primary: #1fa9c6;
  --accent-hover: #26e1fa;
  --accent-active: #0d5968;
  --border-light: rgba(255,255,255,.08);
  --border-dark: rgba(0,0,0,.05);
  --shadow-light: rgba(255,255,255,.05);
  --shadow-dark: rgba(0,0,0,.05);

  /* Spacing */
  --space-xs: .5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 2.5rem;

  /* Transitions */
  --transition-fast: .2s ease;
  --transition-normal: .3s ease;
  --transition-slow: .5s ease;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
}

body.light-mode {
  --bg-dark: #f2f2f2;
  --bg-darker: #fff;
  --bg-card: #fff;
  --text-light: #121212;
  --text-gray: #333;
  --text-muted: #333;
  --border-light: rgba(0,0,0,.05);
  --shadow-light: rgba(0,0,0,.05);
}

/* ===== Base Styles ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  background-color: var(--bg-dark);
  color: var(--text-light);
  font-family: "Inter",sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden
}

body.light-mode svg#themeIcon {
  stroke: #121212!important
}

body:not(.light-mode) svg#themeIcon {
  stroke: #f2f2f2!important
}

main {
  max-width: none;
  width: 100%
}

/* ===== Typography ===== */
h1,h2,h3 {
  color: var(--text-light)
}

h1 {
  font-size: 2rem;
  font-weight: 700;
  margin-top: 5rem;
  margin-bottom: var(--space-lg);
  text-align: center;
  display: inline-block
}

/* Add underline only for main section titles */
h1.section-title {
  border-bottom: 3px solid var(--accent-primary);
  padding-bottom: .4rem
}

h2 {
  font-size: 1.6rem;
  font-weight: 600;
  margin-top: 3rem;
  margin-bottom: var(--space-sm);
  text-align: center;
  display: inline-block
}

h3 {
  font-size: 1.3rem;
  margin-bottom: var(--space-xs)
}

/* ===== Filters ===== */
.filters {
  top: 0;
  background-color: transparent;
  padding: var(--space-sm) 0;
  z-index: 10;
  text-align: center;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-xs)
}

.filters button {
  background-color: #168aa6;
  border: 0;
  padding: var(--space-xs) var(--space-sm);
  color: #fff;
  border-radius: var(--radius-sm);
  margin: .2rem;
  cursor: pointer;
  transition: background-color var(--transition-fast)
}

.filters button:hover {
  background-color: #12788f;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(18, 120, 143, 0.4);
}

.filters button.active {
  background-color: var(--accent-active);
  font-weight: 600
}

.filters button.live-demo-filter {
  background: linear-gradient(135deg, #cc3333 0%, #dd5555 100%);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(204, 51, 51, 0.2);
}

.filters button.live-demo-filter:hover {
  background: linear-gradient(135deg, #ff3b3b 0%, #ff6b6b 100%);
  box-shadow: 0 4px 12px rgba(255, 59, 59, 0.5);
  transform: translateY(-1px);
}

.filters button.live-demo-filter.active {
  background: linear-gradient(135deg, #ff3b3b 0%, #ff6b6b 100%);
  box-shadow: 0 4px 16px rgba(255, 59, 59, 0.6);
}

/* ===== Projects ===== */
.category {
  margin-bottom: var(--space-sm)
}

.category.left h2::after {
  left: 0
}

.category.right h2::after {
  right: 0
}

.project-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 900px;
  margin: 0 auto;
  align-items: center
}

.project-list.centered {
  justify-content: center
}

.project-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  box-shadow: 0 0 10px var(--shadow-light);
  width: 100%;
  max-width: 900px;
  transition: transform var(--transition-normal),box-shadow var(--transition-normal);
  min-height: 250px;
  cursor: pointer;
  position: relative
}

.demo-badge {
  background: linear-gradient(135deg, #ff3b3b 0%, #ff6b6b 100%);
  color: #fff;
  padding: .25rem .6rem;
  border-radius: 12px;
  font-size: .7rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(255, 59, 59, 0.3);
  transition: all var(--transition-normal);
  display: inline-block;
  cursor: pointer;
  margin-left: .5rem;
  vertical-align: middle;
  position: relative;
  top: 0
}

.demo-badge:hover {
  background: linear-gradient(135deg, #ff6b6b 0%, #ff3b3b 100%);
  transform: scale(1.05);
  box-shadow: 0 4px 16px rgba(255, 59, 59, 0.6);
  animation: pulse 1s ease-in-out infinite
}

@keyframes pulse {
  0%, 100% {
    box-shadow: 0 4px 16px rgba(255, 59, 59, 0.6)
  }
  50% {
    box-shadow: 0 4px 20px rgba(255, 59, 59, 0.9)
  }
}

.project-card:hover {
  transform: scale(1.01);
  box-shadow: 0 0 20px rgba(255,255,255,.04)
}

.project-card:focus-within {
  outline: 1px solid #888;
  transform: scale(1.01);
  box-shadow: 0 0 20px rgba(255,255,255,.06)
}

.project-description {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 250px;
  margin-right: var(--space-lg)
}

.project-description p {
  margin-top: var(--space-xs);
  margin-bottom: var(--space-sm)
}

.project-image img {
  width: 280px;
  height: 240px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  display: block
}

.project-tech {
  margin-top: auto;
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap
}

.project-tech span {
  background: #333;
  padding: .3rem .7rem;
  border-radius: 5px;
  font-size: .9rem
}

.project-tech i {
  margin-right: 4px
}

.fade-in {
  animation: fadeIn .3s ease
}

.fade-out {
  animation: fadeOut .3s ease
}

/* ===== About / Hero Section ===== */
.about-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--space-lg)
}

.hero {
  text-align: center;
  margin-bottom: var(--space-xl);
  padding-top: 40px
}

.profile-pic {
  width: 240px;
  height: 240px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(255,255,255,.1);
  margin-bottom: var(--space-sm)
}

.focus p,.hero .title {
  color: var(--text-gray);
  font-size: 1.5rem;
  margin-top: 0;
  font-weight: 600
}

.hero .mission {
  margin-top: var(--space-sm);
  color: var(--text-muted);
  font-style: italic
}

.bio {
  font-size: 1rem;
  color: #ddd;
  line-height: 1.8;
  margin-bottom: var(--space-xl)
}

hr {
  border: 0;
  border-top: 1px solid var(--accent-primary);
  margin: var(--space-lg) auto;
  width: 60%
}

/* ===== Skills Section ===== */
.projects .skills h3 {
  margin-top: var(--space-lg);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-light);
  border-bottom: 2px solid var(--accent-primary);
  display: inline-block;
  padding-bottom: .25rem
}

.skills h2 {
  text-align: center;
  margin-top: var(--space-lg);
  font-size: 1.4rem;
  font-weight: 600
}

.skills-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
  margin: var(--space-md) 0 3rem
}

.skill {
  text-align: center;
  width: 100px;
  opacity: 0;
  transform: translateY(20px);
  transition: all var(--transition-slow);
  flex: 0 1 100px
}

.skill i,.skill img {
  font-size: 2.5rem;
  height: 40px;
  margin-bottom: var(--space-xs)
}

.focus p {
  font-size: 1.05rem;
  line-height: 1.7
}

.skill span {
  display: block;
  margin-top: var(--space-xs)
}

.skills.visible .skill {
  opacity: 1;
  transform: translateY(0)
}

.skills.visible .skill:nth-child(1) {
  transition-delay: .1s
}

.skills.visible .skill:nth-child(2) {
  transition-delay: .2s
}

.skills.visible .skill:nth-child(3) {
  transition-delay: .3s
}

/* ===== Navigation ===== */
.navbar {
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 100vw;
  background-color: rgba(12,12,12,.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1000;
  border-bottom: 1px solid var(--border-light);
  padding: .8rem var(--space-lg);
  box-sizing: border-box;
  transition: background-color var(--transition-normal),backdrop-filter var(--transition-normal);
  justify-content: space-between
}

.navbar.shadow {
  box-shadow: 0 4px 12px rgba(0,0,0,.5);
  transition: box-shadow var(--transition-normal)
}

.navbar ul {
  list-style: none;
  display: flex;
  gap: var(--space-lg);
  padding: 0;
  margin: 0
}

.navbar li a {
  color: var(--text-light);
  text-decoration: none;
  font-weight: 500;
  font-size: 1rem;
  transition: color var(--transition-normal);
  position: relative
}

.nav-left {
  display: flex;
  align-items: center;
  gap: .75rem
}

/* Utility: hover accent color */
.hover-accent:hover,
.navbar li a:hover,
body.light-mode .navbar li a:hover,
.icon:hover,
body.light-mode .icon:hover,
#themeToggle:hover svg,
body.light-mode #themeToggle:hover svg,
.theme-toggle button:hover svg,
#backToTop:hover svg,
#themeToggleDesktop:hover svg,
#themeToggleMobile:hover svg,
body.light-mode #closeMenu:hover,
body.light-mode .hamburger:hover,
body:not(.light-mode) #closeMenu:hover,
body:not(.light-mode) .hamburger:hover {
  color: #1fa9c6
}

.navbar li a::after {
  content: "";
  position: absolute;
  width: 0%;
  height: 2px;
  left: 0;
  bottom: -4px;
  background-color: currentColor;
  transition: width .3s ease
}

.navbar {
  width: 100%
}

.navbar li a:hover::after {
  width: 100%
}

.nav-left {
  gap: .75rem
}

.nav-icon {
  width: 40px;
  height: 40px;
  object-fit: contain
}

#closeMenu,.hamburger {
  background: 0 0;
  border: 0;
  color: #f2f2f2;
  cursor: pointer
}

.hamburger {
  display: none;
  font-size: 2rem;
  z-index: 1001
}

.mobile-close {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1rem
}

#closeMenu {
  font-size: 1.5rem
}

body.nav-open {
  overflow: hidden
}

.brand-name {
  color: var(--text-light);
  transition: color var(--transition-normal);
  font-weight: 600;
  font-size: 1.1rem
}

/* Light mode text colors consolidated - handled by CSS variables */
body.light-mode .brand-name,
body.light-mode .icon,
body.light-mode .navbar li a {
  color: var(--text-light)
}

.nav-right-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-md)
}

.nav-right {
  display: flex;
  align-items: center;
  list-style: none;
  gap: var(--space-lg);
  margin: 0;
  padding: 0;
  transform: translateX(-100%);
  transition: transform var(--transition-normal),opacity var(--transition-normal);
  opacity: 0
}

.nav-right.active {
  transform: translateX(0);
  opacity: 1;
  animation: slideInLeft .3s ease forwards
}

.nav-right.closing {
  animation: slideOutLeft .3s ease forwards
}

#navOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(18,18,18,.6);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal)
}

body.nav-open #navOverlay {
  opacity: 1;
  visibility: visible
}

.icon {
  width: 48px;
  height: 48px;
  color: var(--text-light);
  transition: color var(--transition-normal);
  cursor: pointer
}

/* Removed - consolidated into .hover-accent utility above */

.mobile-theme-toggle {
  display: none
}

/* Utility class for button resets */
.btn-reset {
  background: 0 0;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  box-shadow: none
}

button#backToTop,button#themeToggle {
  display: flex;
  align-items: center;
  justify-content: center
}

body.light-mode #themeToggle svg {
  filter: brightness(0) saturate(100%) invert(0);
  color: #121212
}

#themeToggle svg {
  width: 24px;
  height: 24px;
  color: inherit
}

/* Glow effect utility */
.hover-glow:hover,
#themeToggle:hover svg,
body.light-mode #themeToggle:hover svg,
.theme-toggle button:hover svg,
#backToTop:hover svg,
#themeToggleDesktop:hover svg,
#themeToggleMobile:hover svg {
  filter: drop-shadow(0 0 6px #1fa9c6)
}

#upArrowIcon {
  width: 36px;
  height: 36px;
  transition: transform .2s ease,opacity .2s ease
}

#themeToggle svg,.icon-anim {
  opacity: 0;
  transform: scale(.8);
  animation: fadeInScale .3s ease forwards
}

/* ===== Contact Form ===== */
.contact-form {
  margin: var(--space-lg) auto var(--space-md);
  max-width: 600px;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm)
}

.contact-form input,
.contact-form textarea {
  background-color: var(--bg-card);
  border: 1px solid #444;
  padding: .75rem var(--space-sm);
  border-radius: var(--radius-md);
  color: var(--text-light);
  font-size: 1rem;
  transition: border-color var(--transition-fast);
  font-family: "Inter",sans-serif
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #888;
  outline: 0
}

.contact-form button {
  background-color: #333;
  color: var(--text-light);
  padding: .75rem var(--space-sm);
  border: 0;
  border-radius: var(--radius-md);
  font-weight: 500;
  font-size: 1rem;
  cursor: pointer;
  transition: all var(--transition-normal)
}

.contact-form button:hover {
  background-color: var(--accent-primary);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(31, 169, 198, 0.4)
}

/* ===== Footer ===== */
.footer p {
  text-align: center;
  max-width: 600px;
  margin: var(--space-sm) auto var(--space-lg);
  font-size: 1.1rem;
  color: var(--text-gray)
}

.footer-links {
  margin-top: var(--space-md);
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-sm)
}

.footer-links a {
  color: var(--text-light);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: all var(--transition-normal);
  margin-bottom: 0
}

.footer-links a:hover {
  color: var(--accent-primary);
  border-bottom-color: var(--accent-primary)
}

body.light-mode .footer-links a:hover {
  color: var(--accent-primary);
  border-bottom-color: var(--accent-primary)
}

.theme-toggle {
  margin-left: auto;
  margin-right: 2rem
}

.theme-toggle button {
  background: 0 0!important;
  border-radius: 0;
  transition: none;
  vertical-align: middle;
  position: relative;
  top: .5px
}

.theme-toggle svg {
  color: inherit;
  filter: none;
  transform: scale(1);
  transition: transform .4s ease,filter .3s ease,color .3s ease
}

/* Removed - consolidated into utilities above */

/* ===== Light Mode Overrides ===== */
/* Most colors now handled by CSS variables at top */

body.light-mode .bio,
body.light-mode .contact-form input::placeholder,
body.light-mode .contact-form textarea::placeholder,
body.light-mode .focus p,
body.light-mode .footer a,
body.light-mode .footer p,
body.light-mode .hero .mission,
body.light-mode .hero .title,
body.light-mode .skill span {
  color: var(--text-gray)
}

body.light-mode .navbar {
  background-color: rgba(255,255,255,.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-light)
}

body.light-mode .filters button {
  background-color: var(--accent-hover);
  color: #111
}

body.light-mode .filters button:hover {
  background-color: #22c0d8
}

body.light-mode .filters button.active {
  background-color: var(--accent-primary);
  color: #fff
}

body.light-mode .project-tech span {
  background: #ddd
}

body.light-mode .contact-form input,
body.light-mode .contact-form textarea {
  border: 1px solid #ccc
}

body.light-mode .contact-form button {
  background-color: #ddd
}

body.light-mode .contact-form button:hover {
  background-color: var(--accent-primary);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(31, 169, 198, 0.4)
}

body:not(.light-mode) #themeToggleDesktop svg,body:not(.light-mode) #themeToggleMobile svg {
  color: #f2f2f2
}

#backToTop,.spinner {
  width: 40px;
  height: 40px
}

#backToTop,#loader {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center
}

#backToTop {
  bottom: 30px;
  right: 30px;
  z-index: 99;
  background: 0 0;
  border: 0;
  padding: 0;
  box-shadow: none;
  color: inherit;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s ease,transform .3s ease;
  pointer-events: none
}

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

#backToTop:hover,body.light-mode #backToTop {
  background-color: none
}

body.light-mode #backToTop img {
  filter: none
}

#backToTop img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: none
}

#loader {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #121212;
  z-index: 9999;
  transition: opacity .5s ease,visibility .5s
}

.spinner {
  border: 4px solid #f2f2f2;
  border-top: 4px solid transparent;
  border-radius: 50%;
  animation: spin .8s linear infinite
}

body.loaded #loader {
  opacity: 0;
  visibility: hidden
}

/* ===== Utility Classes ===== */
.text-center {
  text-align: center
}

.mb-3 {
  margin-bottom: 3rem
}

.mt-1-5 {
  margin-top: 1.5rem
}

.mb-0 {
  margin-bottom: 0
}

.mb-2-5 {
  margin-bottom: 2.5rem
}

/* ===== Animation Classes ===== */
.fade-in-section {
  opacity: 0;
  transform: translateY(30px);
  transition: all .6s ease-out
}

.slide-up {
  opacity: 0;
  transform: translateY(40px);
  transition: all .6s ease-out
}

.fade-in-section.visible,
.slide-up.visible {
  opacity: 1;
  transform: translateY(0)
}

.zoom-in {
  opacity: 0;
  transform: scale(.95);
  transition: all var(--transition-slow)
}

.zoom-in.visible {
  opacity: 1;
  transform: scale(1)
}

.stagger {
  transition-delay: .15s
}

.stagger-2 {
  transition-delay: .3s
}

.stagger-3 {
  transition-delay: .45s
}

/* ===== Media Queries ===== */
@media (max-width:1024px) {
  .project-card {
      flex-direction: column;
      align-items: center;
      padding: var(--space-sm)
  }

  .project-description {
      margin-right: 0;
      text-align: center
  }

  .project-image img {
      margin-top: var(--space-sm)
  }

  .filters button {
      padding: .4rem .8rem;
      font-size: .9rem
  }

  .project-tech span {
      font-size: .8rem
  }
}

@media (max-width:768px) {
  body {
      padding: var(--space-sm)
  }

  .navbar ul {
      gap: var(--space-sm)
  }

  .about-container {
      padding: var(--space-md)
  }

  .hero .title {
      font-size: 1.25rem
  }

  .bio p,.focus p,.hero .mission,.navbar li a {
      font-size: .95rem
  }

  .profile-pic {
      width: 180px;
      height: 180px
  }

  .skills-grid {
      display: flex!important;
      flex-direction: row!important;
      flex-wrap: wrap;
      justify-content: center;
      gap: var(--space-md);
      margin: var(--space-md) 0
  }

  .skill i {
      font-size: 2.5rem
  }

  .skill span {
      font-size: .85rem
  }

  h3 {
      font-size: 1.2rem
  }

  .project-card {
      padding: var(--space-sm)
  }

  .project-tech span {
      font-size: .8rem
  }
}

@media (max-width:480px) {
  .profile-pic {
      width: 140px;
      height: 140px
  }

  .project-image img {
      max-width: 100%
  }

  .hero .skills-grid {
      justify-content: space-around
  }

  .skill {
      width: 30%
  }

  .skill i {
      font-size: 2rem
  }

  .focus h2,.skills .project-image img {
      height: auto
  }

  .project-card {
      padding: .8rem
  }

  .project-description p {
      font-size: .9rem
  }

  h3 {
      font-size: 1.1rem
  }

  .project-tech span {
      padding: .2rem .5rem
  }
}

@media (max-width:768px) {
  .navbar {
      position: fixed!important;
      top: 0;
      left: 0;
      right: 0;
      width: 100%!important;
      z-index: 1002;
      padding: .75rem 1rem;
      background-color: transparent!important;
      backdrop-filter: none!important;
      -webkit-backdrop-filter: none!important;
      border: 0!important;
      box-shadow: none!important
  }

  .nav-left {
      display: none
  }

  .nav-top-mobile {
      background-color: transparent!important;
      box-shadow: none;
      border: 0;
      height: auto;
      padding: .5rem 1rem;
      min-height: unset
  }

  .desktop-only {
      display: none!important
  }

  .hamburger,.mobile-theme-toggle {
      display: block
  }

  .hamburger {
      margin-left: 1rem
  }

  .theme-toggle {
      display: flex;
      align-items: center;
      margin: 0;
      padding: 0
  }

  .nav-right {
      position: fixed;
      top: 0;
      left: -250px;
      height: calc(100vh - 60px);
      width: 250px;
      background-color: rgba(12,12,12,.95);
      backdrop-filter: blur(8px);
      padding: 2rem 1.5rem;
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      overflow-y: auto;
      transition: left .3s ease;
      z-index: 1000
  }

  .nav-right li,.nav-right li a {
      display: flex;
      align-items: center
  }

  .nav-right li a {
      height: 100%
  }

  .nav-right.active {
      left: 0
  }
}

/* Duplicate h1/h2 rules removed - already defined in Typography section */

.fade-in-heading {
  animation: fadeInUp .8s ease-out both
}

/* ===== Skills Category ===== */
.skills-category {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--space-lg)
}

.skills-category .skills-grid {
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-md)
}

/* ===== Theme Toggle Animations ===== */
#themeToggleDesktop svg,
#themeToggleMobile svg {
  color: var(--text-light);
  stroke: currentColor;
  transition: color var(--transition-normal),filter var(--transition-normal),transform var(--transition-normal)
}

#themeToggleDesktop:hover svg,
#themeToggleMobile:hover svg {
  stroke: var(--accent-primary);
  transform: scale(1.1)
}

.theme-toggle svg.theme-anim {
  animation: pop .3s ease
}

.theme-rotate {
  animation: rotateIcon .4s ease
}

@media (min-width:769px) {
  .nav-right {
      position: static;
      transform: none;
      opacity: 1;
      flex-direction: row;
      height: auto;
      width: auto;
      background: 0 0;
      backdrop-filter: none;
      padding: 0;
      animation: none!important
  }

  #navOverlay {
      display: none
  }
}

.mobile-close {
  display: none
}

@media (max-width:768px) {
  .mobile-close {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-bottom: 1rem;
      padding-top: 1.5rem;
      animation: fadeSlideIn .3s ease-out
  }

  .nav-right:not(.active) .mobile-close {
      display: none
  }

  .nav-right {
      height: 100vh;
      display: none
  }

  .nav-right.active {
      display: flex;
      left: 0
  }
}

body.light-mode .nav-right {
  background-color: #fff
}

body.light-mode #closeMenu,body.light-mode .hamburger {
  color: #121212
}

body.light-mode #closeMenu svg,body.light-mode .hamburger svg {
  stroke: #121212;
  color: #121212
}

/* Removed - consolidated into .hover-accent utility above */

body:not(.light-mode) #closeMenu svg:hover,body:not(.light-mode) .hamburger svg:hover {
  stroke: #1fa9c6
}

/* Removed duplicate button hover styles - using electric blue hover from line 764 */

.about-text {
  max-width: 750px;
  margin: 0 auto;
  padding: 0 1rem;
  text-align: center;
}