/*
  Global Stylesheet for CodeCrafted by Adnan
  -----------------------------------------
  This file defines the overall look and feel of the portfolio.
  Dark‑theme inspired colours are defined as CSS variables to
  allow easy toggling between dark and light modes. The layout
  leverages CSS Grid and Flexbox to build responsive sections.
*/

/* Colour palette */
:root {
  --bg-color: #10131a;
  --bg-secondary: #181c23;
  --card-bg: #181c23;
  --card-border: #2d2d5e;
  --accent: #00ff99;
  --accent-secondary: #00b36b;
  --text-color: #e6ffe6;
  --text-muted: #7fffd4;
  --nav-height: 70px;
  --terminal-border: #00ff99;
  --terminal-glow: 0 0 8px #00ff99, 0 0 16px #00ff9944;
}

/* ------------------------------------------------------------------ */
/* Base page transition and layout fixes                               */
/* Fade in the entire page on load for a smooth entrance.              */
body {
  opacity: 0;
  animation: bodyFadeIn 1s ease-out forwards;
}

@keyframes bodyFadeIn {
  to {
    opacity: 1;
  }
}

/* Place all primary sections and header relative to ensure they layer
   above the fixed starfield. Without this, the fixed starfield could
   overlay text in some browsers. */
header,
section,
footer {
  position: relative;
  z-index: 1;
}

body.light-mode {
  --bg-color: #f8f9fb;
  --bg-secondary: #ffffff;
  --card-bg: #ffffff;
  --card-border: #e0e0e0;
  --accent: #006b5b;
  --accent-secondary: #009e8e;
  --text-color: #222222;
  --text-muted: #555555;
}

/* Global resets */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Fira Code', 'Poppins', monospace, sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color);
  letter-spacing: 0.01em;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

ul {
  list-style: none;
}

/* Container */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Header / Navigation */
header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  background-color: var(--bg-secondary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  height: var(--nav-height);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
}

.logo a {
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 1px;
  color: var(--accent);
}

nav ul {
  display: flex;
  gap: 2.5rem;
  font-size: 1.2rem;
}

nav ul li a {
  padding: 0.5rem 0;
  position: relative;
  font-weight: 500;
  transition: color 0.3s;
}

nav ul li a:hover {
  color: var(--accent);
}

/* Underline effect on nav hover */
nav ul li a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background-color: var(--accent);
  transition: width 0.3s ease;
}

nav ul li a:hover::after {
  width: 100%;
}

/* Theme toggle button */
#theme-toggle {
  border: none;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  transition: transform 0.3s;
}

#theme-toggle:hover {
  transform: rotate(20deg);
}

#theme-icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

/* Hero Section */
#hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-color);
  /* Updated background path: the hero background image lives at the repo root on GitHub Pages */
  padding-top: var(--nav-height);
  overflow: hidden;
  /* ensure stars and background don't bleed into next sections */
}

#hero .hero-content {
  position: relative;
  z-index: 2;
}

#starfield {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

.hero-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.hero-subtitle {
  font-size: 1.3rem;
  font-family: 'Fira Code', monospace;
  margin-bottom: 2rem;
  height: 1.5em;
  display: inline-flex;
  align-items: center;
}

.cursor {
  display: inline-block;
  width: 1px;
  height: 1.2em;
  background: var(--accent);
  margin-left: 4px;
  animation: blink 1s steps(1) infinite;
}

@keyframes blink {

  0%,
  50% {
    opacity: 1;
  }

  50.01%,
  100% {
    opacity: 0;
  }
}

.cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 30px;
  font-weight: 600;
  text-transform: capitalize;
  transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
  cursor: pointer;
}

.btn.primary {
  background-color: var(--accent);
  color: #0e0e2f;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.btn.primary:hover {
  background-color: var(--accent-secondary);
  box-shadow: 0 0 8px 2px var(--accent), 0 0 16px 4px var(--accent-secondary);
}

.btn.secondary {
  background-color: transparent;
  border: 2px solid var(--accent);
  color: var(--accent);
}

.btn.secondary:hover {
  background-color: var(--accent);
  color: #0e0e2f;
  box-shadow: 0 0 8px 2px var(--accent), 0 0 16px 4px var(--accent-secondary);
}

.btn.small {
  padding: 0.45rem 1rem;
  font-size: 0.8rem;
  border-radius: 20px;
}

/* Section Titles */
.section-title {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 2rem;
  position: relative;
}

.section-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background-color: var(--accent);
  margin: 0.5rem auto 0;
  border-radius: 2px;
}

/* About Section */
#about {
  padding: 5rem 0;
  /* background-color: var(--bg-secondary); */
}

.about-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 3rem;
}

.frosted-glass {
  /* Frosted glass effect */
  background: rgba(255, 255, 255, 0.1);
  /* semi-transparent white */
  backdrop-filter: blur(1px);
  /* apply blur */
  -webkit-backdrop-filter: blur(1px);
  /* Safari support */
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 2rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.about-image img {
  width: 220px;
  height: 220px;
  object-fit: cover;
  border-radius: 50%;
  transition: transform 0.4s, box-shadow 0.4s;
  display: block;
  margin: 0 auto;
}

.about-image img:hover {
  transform: scale(1.07) rotate(-2deg);
  box-shadow: 0 0 10px 4px var(--accent), 0 0 0 #10131a;
}

.about-content h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.about-content p {
  margin-bottom: 1rem;
  color: var(--text-muted);
}

.fun-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.fun-facts li {
  padding: 0.5rem 0;
  background-color: var(--card-bg);
  border-left: 3px solid var(--accent);
  padding-left: 0.75rem;
  border-radius: 4px;
  color: var(--text-color);
  font-size: 0.9rem;
}

.tech-stack {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}

.tech-stack img {
  width: 50px;
  height: 50px;
  transition: transform 0.3s, filter 0.3s;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.4));
}

.tech-stack img:hover {
  transform: scale(1.18) rotate(-3deg);
  filter: drop-shadow(0 0 8px var(--accent));
}

/* Projects Section */
#projects {
  padding: 5rem 0;
}

/* Education Section */
#education {
  padding: 5rem 0;
}

.education-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.edu-item {
  background-color: var(--card-bg);
  border: 1.5px solid var(--card-border);
  border-radius: 8px;
  padding: 1.5rem;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
  box-shadow: 0 0 0 0 var(--accent-secondary);
}

.edu-item h3 {
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}

.edu-degree,
.edu-date {
  display: block;
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.edu-item p {
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* Skills Section */
#skills {
  padding: 5rem 0;
}

.skills-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.skill-category h3 {
  margin-bottom: 1rem;
  font-size: 1.4rem;
  color: var(--accent);
}

.skill-bar {
  margin-bottom: 1rem;
}

.skill-name {
  display: block;
  margin-bottom: 0.3rem;
  font-weight: 600;
}

.skill-progress {
  background-color: var(--card-border);
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
}

.skill-progress .progress-inner {
  display: block;
  height: 100%;
  width: 0;
  background-color: var(--accent);
  transition: width 1.2s ease;
}

/* Status messages for the contact form */
#form-status {
  margin-top: 1rem;
  font-size: 0.9rem;
}

#form-status.success {
  color: var(--accent);
}

#form-status.error {
  color: #ff4081;
}

/* Tab controls for filtering projects */
.project-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}

.tab-btn {
  background: transparent;
  border: none;
  padding: 0.5rem 1rem;
  font-weight: 600;
  color: var(--text-color);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.tab-btn:hover,
.tab-btn.active {
  color: var(--accent);
  border-color: var(--accent);
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.project-card {
  background-color: var(--card-bg);
  border: 1.5px solid var(--card-border);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 0 0 var(--accent-secondary);
}

.project-card:hover {
  transform: scale(1.04) translateY(-6px);
  border-color: var(--accent);
  box-shadow: 0 0 16px 2px var(--accent), 0 0 32px 8px var(--accent-secondary);
}

.project-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.project-info {
  padding: 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.project-info h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.project-info p {
  flex: 1;
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.tag {
  background-color: var(--bg-secondary);
  border: 1px solid var(--card-border);
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  font-size: 0.7rem;
  color: var(--text-muted);
}

.project-links {
  display: flex;
  gap: 0.5rem;
}

.project-links .btn.small {
  background-color: var(--bg-secondary);
  color: var(--accent);
  border: 1px solid var(--accent);
}

.project-links .btn.small:hover {
  background-color: var(--accent);
  color: #0e0e2f;
}

/* Timeline */
#experience {
  padding: 5rem 0;
}

.timeline {
  position: relative;
  padding-left: 2rem;
  margin-top: 2rem;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--accent);
}

.timeline-item {
  position: relative;
  margin-bottom: 2.5rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.timeline-item:last-child {
  margin-bottom: 0;
}

.timeline-icon {
  position: relative;
  border: 0.5px solid var(--accent);
  border-radius: 50%;
  min-width: 50px;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
}

.timeline-icon img {
  width: 22px;
  height: 22px;
}

.timeline-content {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  padding: 1rem 1.5rem;
  border-radius: 6px;
  width: 100%;
}

.timeline-content h3 {
  margin-bottom: 0.25rem;
  font-size: 1.1rem;
}

.timeline-date {
  font-size: 0.8rem;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.timeline-content ul {
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* Contact Section */
#contact {
  padding: 5rem 0;
}

.contact-content {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
}

#contact-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-row {
  display: flex;
  gap: 1rem;
  width: 100%;
}

.form-row input {
  flex: 1;
}

#contact-form input,
#contact-form textarea {
  padding: 0.75rem 1rem;
  border-radius: 4px;
  border: 1px solid var(--card-border);
  background-color: var(--bg-secondary);
  color: var(--text-color);
  font-size: 0.9rem;
}

#contact-form textarea {
  resize: vertical;
}

#contact-form input:focus,
#contact-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.social-links {
  display: flex;
  padding-left: 5em;
  padding-top: 1em;
  gap: 1rem;
}

.social-links img {
  width: 32px;
  height: 32px;
  transition: transform 0.3s, filter 0.3s;
  filter: brightness(0) invert(1);
}

body.light-mode .social-links img {
  filter: none;
}

.social-links a:hover img {
  transform: scale(1.22) rotate(-2deg);
  filter: drop-shadow(0 0 8px var(--accent));
}

/* Starfield and twinkle animation */
.star {
  position: absolute;
  border-radius: 50%;
  background-color: var(--accent);
  opacity: 0.7;
}

@keyframes twinkle {

  0%,
  100% {
    opacity: 0.2;
  }

  50% {
    opacity: 1;
  }
}

/* Global starfield container – spans the entire viewport and sits
   behind all content. The stars are appended to this element in
   main.js. */
#starfield {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* Confetti animation for Easter egg */
.confetti-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 9999;
}

.confetti {
  position: absolute;
  top: -10px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  animation: fallConfetti linear forwards;
}

@keyframes fallConfetti {
  to {
    transform: translateY(110vh) rotate(360deg);
    opacity: 0;
  }
}

/* Footer */
footer {
  padding: 1.5rem 0;
  text-align: center;
  background-color: var(--bg-secondary);
  color: var(--text-muted);
  font-size: 0.8rem;
}

/* Reveal animation */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.6s ease;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Terminal-inspired section containers */
.terminal-header {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 1em 0.2em 1em;
  background: #006b5b;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.circle {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 0.3em;
}

.red {
  background: #ff5f56;
}

.yellow {
  background: #ffbd2e;
}

.green {
  background: #27c93f;
}

.terminal-body,
.cert-intro-terminal,
.contact-panel-terminal {
  background: #10131a;
  border: 2px solid var(--terminal-border);
  border-radius: 0 0 8px 8px;
  box-shadow: var(--terminal-glow);
  padding: 1.5em 2em;
  font-family: 'Fira Code', monospace;
  font-size: 1.1em;
  color: var(--accent);
  margin-bottom: 2em;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow-x: auto;
  box-sizing: border-box;
}

.terminal-box-individual {
  background: #10131a;
  border: 2px solid var(--terminal-border);
  border-radius: 8px;
  box-shadow: var(--terminal-glow);
  padding: 2em;
  font-family: 'Fira Code', monospace;
  font-size: 1.1em;
  color: var(--accent);
  margin-bottom: 2em;
  position: relative;
  box-sizing: border-box;

  /* Simplified layout for standalone content */
  display: block;
  overflow: hidden;
}

body.light-mode .terminal-box-individual {
  background: #fff;
  border: 2px solid var(--card-border);
  color: #222;
  box-shadow: 0 0 8px 2px #e0e0e0, 0 0 32px 8px #e0e0e044;
}

body.light-mode .terminal-box-individual {
  font-family: 'Fira Code', monospace;
}

.terminal-body {
  min-height: 480px;
  max-width: 820px;
  margin: 0 auto;
  font-size: 1.32em;
  background: #10131a;
  border: 2.5px solid #00ff99;
  border-radius: 0 0 14px 14px;
  box-shadow: 0 0 5px 2px #00ff99, 0 0 48px 8px #00ff9944;
  padding: 2.8em 2.8em 2.8em 2.8em;
  font-family: 'Fira Code', 'Menlo', 'Consolas', monospace;
  color: #b6ffb6;
  margin-bottom: 2.5em;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow-x: auto;
  box-sizing: border-box;
}

body.light-mode .terminal-body {
  background: #fff;
  border: 2.5px solid var(--card-border);
  color: #222;
  box-shadow: 0 0 8px 2px #e0e0e0, 0 0 32px 8px #e0e0e044;
}

.terminal-line {
  display: flex;
  align-items: center;
  min-height: 2.2em;
  margin-bottom: 0.18em;
  color: #b6ffb6;
  font-family: 'Fira Code', 'Menlo', 'Consolas', monospace;
  font-size: 1.08em;
  letter-spacing: 0.01em;
  white-space: pre-wrap;
  justify-content: center;
}

.terminal-cmd {
  color: #00ff99;
  font-weight: 600;
}

.terminal-output {
  color: #e6ffe6;
  margin-left: 0.5em;
  font-weight: 400;
}

.terminal-input {
  color: #00ff99;
}

.cursor {
  display: inline-block;
  width: 1.1ch;
  height: 1.2em;
  background: none;
  color: #00ff99;
  margin-left: 2px;
  animation: blink 1s steps(1) infinite;
  font-weight: bold;
  font-size: 1.1em;
}

@keyframes blink {

  0%,
  50% {
    opacity: 1;
  }

  50.01%,
  100% {
    opacity: 0;
  }
}

@media (max-width: 900px) {
  .terminal-body {
    padding: 1.2em 0.5em 1.2em 0.5em;
    min-height: 260px;
    font-size: 1em;
  }
}

/* Responsive for terminal panels */
@media (max-width: 900px) {

  .about-metrics-terminal,
  .contact-flex {
    flex-direction: column;
    align-items: stretch;
  }

  .about-metrics-terminal {
    gap: 1em;
  }

  #contact .contact-content {
    flex-direction: column;
    align-items: stretch;
    gap: 2rem;
  }

  #contact .contact-panel-terminal,
  #contact #contact-form {
    max-width: 100%;
  }
}

@media (max-width: 992px) {
  .about-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .about-image {
    display: flex;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  nav ul {
    gap: 1rem;
  }

  .hero-title {
    font-size: 2rem;
  }

  .hero-subtitle {
    font-size: 1rem;
  }

  .section-title {
    font-size: 1.75rem;
  }
}

@media (max-width: 576px) {
  .form-row {
    flex-direction: column;
  }

  .form-row input {
    width: 100%;
  }
}

.terminal-actions {
  display: flex;
  justify-content: center;
  gap: 1.2em;
  margin-top: 2.5em;
  width: 100%;
}

@media (max-width: 600px) {
  .terminal-actions {
    flex-direction: column;
    gap: 0.7em;
    margin-top: 1.2em;
  }
}

/* Metrics Section */
.metrics-container {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 1em;
  flex-wrap: nowrap;
  margin: 1em auto;
  max-width: 1100px;
}

body.light-mode .metrics-container {
  background: rgba(255, 255, 255, 0.7);
  border-radius: 0;
  box-shadow: none;
}

.glass-box.metric-block {
  background: rgba(16, 19, 26, 0.55);
  border-radius: 18px;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid rgba(0, 255, 153, 0.18);
  min-width: 210px;
  min-height: 140px;
  padding: 2.2em 1.5em 1.5em 1.5em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s, box-shadow 0.3s;
  margin-bottom: 1.2em;
}

body.light-mode .glass-box.metric-block {
  background: rgba(255, 255, 255, 0.8);
  border: none;
  box-shadow: none;
}

.metric-value {
  font-size: 2.1em;
  font-family: 'Fira Code', monospace;
  color: #00ff99;
  margin-bottom: 0.3em;
  font-weight: 700;
}

body.light-mode .metric-value {
  color: #009e8e;
}

.metric-label {
  color: #e6ffe6;
  font-size: 1.1em;
  text-align: center;
  font-family: 'Fira Code', monospace;
  opacity: 0.92;
}

body.light-mode .metric-label {
  color: #222;
}

/* Awards and Certifications Styles */
.awards-certs {
  margin-top: 2.2rem;
  background: rgba(16, 19, 26, 0.82);
  border-radius: 14px;
  box-shadow: 0 0 24px 4px #00ff99, 0 0 48px 8px #00ff9944;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 2.5px solid #00ff99;
  padding: 2.5rem 2.2rem;
  font-family: 'Fira Code', monospace;
  color: #b6ffb6;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

body.light-mode .awards-certs {
  background: #fff;
  border: 2.5px solid var(--card-border);
  color: #222;
  box-shadow: 0 0 8px 2px #e0e0e0, 0 0 32px 8px #e0e0e044;
}

.awards-title {
  color: var(--accent);
  font-size: 1.25rem;
  margin-bottom: 1rem;
  font-family: 'Fira Code', monospace;
  letter-spacing: 1px;
}

.awards-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7em 2em;
}

.awards-list li {
  font-size: 1.05rem;
  color: var(--text-color);
  background: rgba(0, 255, 153, 0.07);
  border-radius: 8px;
  padding: 0.6em 1em;
  margin-bottom: 0.2em;
  display: flex;
  align-items: center;
  gap: 0.7em;
  box-shadow: 0 2px 8px 0 rgba(0, 255, 153, 0.08);
  font-family: 'Fira Code', monospace;
  transition: background 0.2s, box-shadow 0.2s;
}

.award-icon {
  font-size: 1.3em;
  filter: drop-shadow(0 0 6px var(--accent));
}

.awards-list li:hover {
  background: rgba(0, 255, 153, 0.18);
  box-shadow: 0 0 16px 2px var(--accent);
}

@media (max-width: 700px) {
  .awards-list {
    grid-template-columns: 1fr;
    gap: 0.7em;
  }
}

#matrix-rain {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  background: #10131a;
  opacity: 0.85;
}

body.light-mode .cert-intro-terminal {
  background: #fff;
  border: 2px solid var(--card-border);
  color: #222;
  box-shadow: 0 0 8px 2px #e0e0e0, 0 0 32px 8px #e0e0e044;
}

body.light-mode .about-container {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 0 8px 2px #e0e0e0, 0 0 32px 8px #e0e0e044;
}

/* --- Responsive Styles for Mobile Devices --- */
@media (max-width: 600px) {
  header {
    height: auto;
    min-height: var(--nav-height);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  }

  .nav-container {
    flex-direction: column;
    align-items: flex-start;
    padding: 0.7em 1em;
    height: auto;
  }

  .logo {
    margin-bottom: 0.5em;
  }

  nav ul {
    flex-direction: column;
    gap: 0.5em;
    width: 100%;
    font-size: 1.1rem;
    align-items: flex-start;
    padding-left: 0;
  }

  nav ul li {
    width: 100%;
  }

  nav ul li a {
    padding: 0.7em 0;
    width: 100%;
    display: block;
  }

  #theme-toggle {
    align-self: flex-end;
    margin-top: 0.5em;
  }

  #hero {
    padding-top: calc(var(--nav-height) + 1em);
    min-height: 80vh;
  }

  .hero-title {
    font-size: 1.4rem;
  }

  .hero-subtitle {
    font-size: 1rem;
  }

  .cta-buttons {
    flex-direction: column;
    gap: 0.7em;
  }

  .about-container {
    grid-template-columns: 1fr;
    gap: 1.2em;
    padding: 1em 0.5em;
  }

  .about-image img {
    width: 120px;
    height: 120px;
  }

  .frosted-glass {
    padding: 1em;
  }

  .metrics-container {
    flex-direction: column;
    gap: 1em;
    padding: 0.5em;
    max-width: 100%;
  }

  .glass-box.metric-block {
    min-width: 0;
    width: 100%;
    padding: 1em;
  }

  .awards-certs {
    padding: 1em 0.5em;
    max-width: 100%;
  }

  .awards-list {
    grid-template-columns: 1fr;
    gap: 0.7em;
  }

  #projects,
  #education,
  #experience,
  #skills,
  #contact {
    padding: 2em 0.5em;
  }

  .skills-wrapper {
    grid-template-columns: 1fr;
    gap: 1em;
  }

  .timeline {
    padding-left: 0.5em;
  }

  .timeline-content {
    padding: 0.7em 1em;
  }

  .contact-content {
    padding: 0.5em;
    gap: 1em;
  }

  #contact-form {
    gap: 0.7em;
  }

  .form-row {
    flex-direction: column;
    gap: 0.7em;
  }

  .terminal-body,
  .cert-intro-terminal,
  .contact-panel-terminal {
    padding: 1em 0.5em;
    font-size: 1em;
    min-width: 0;
    max-width: 100%;
  }

  .terminal-box-individual {
    padding: 1em 0.5em;
    font-size: 1em;
    min-width: 0;
    max-width: 100%;
  }

  .section-title {
    font-size: 1.2rem;
    margin-bottom: 1em;
  }

  footer {
    font-size: 0.7rem;
    padding: 1em 0;
  }
}

/* --- Hamburger Menu Styles --- */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 38px;
  height: 38px;
  cursor: pointer;
  background: none;
  border: none;
  z-index: 200;
}

.hamburger span {
  display: block;
  width: 28px;
  height: 4px;
  margin: 4px 0;
  background: var(--accent);
  border-radius: 2px;
  transition: 0.3s;
}

@media (max-width: 600px) {
  .hamburger {
    display: flex;
    position: absolute;
    top: 12px;
    right: 18px;
  }

  nav ul {
    display: none;
    flex-direction: column;
    background: var(--bg-secondary);
    position: absolute;
    top: var(--nav-height);
    left: 0;
    width: 100vw;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    padding: 1em 0;
    z-index: 150;
  }

  nav ul.open {
    display: flex;
  }

  .nav-container {
    position: relative;
  }
}