:root {
  /* Color Palette */
  --bg-dark: #050a08;
  --bg-dark-secondary: #0a1f18;
  --primary: #10b981;
  /* Emerald */
  --primary-glow: rgba(16, 185, 129, 0.4);
  --secondary: #d9f99d;
  /* Lime */
  --text-main: #f1f5f9;
  --text-muted: #94a3b8;
  --glass-bg: rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.05);
  --card-hover: rgba(255, 255, 255, 0.06);
  --glass-nav-bg: rgba(5, 10, 8, 0.6);
  --glass-nav-border: rgba(255, 255, 255, 0.08);
  --nav-text-hover: #fff;
  --nav-pill-active: rgba(255, 255, 255, 0.1);
  --icon-filter: invert(1);
  --logo-filter: drop-shadow(0 0 5px rgba(16, 185, 129, 0.5));
  --heading-gradient: linear-gradient(to right, #fff, #94a3b8);
  --social-filter: invert(1);
  --footer-bg: rgba(5, 10, 8, 0.8);
  /* Glassy dark */

  /* Typography */
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-theme="light"] {
  --bg-dark: #f8fafc;
  --bg-dark-secondary: #ffffff;
  --primary: #059669;
  /* Slightly darker emerald for white bg */
  --primary-glow: rgba(5, 150, 105, 0.3);
  --secondary: #65a30d;
  /* Darker Lime */
  --text-main: #0f172a;
  --text-muted: #475569;
  --glass-bg: rgba(5, 150, 105, 0.05);
  --glass-border: rgba(0, 0, 0, 0.1);
  --card-hover: rgba(5, 150, 105, 0.08);

  /* Navbar Light Mode Overrides */
  --glass-nav-bg: rgba(255, 255, 255, 0.85);
  /* White glass */
  --glass-nav-border: rgba(0, 0, 0, 0.1);
  --nav-text-hover: #059669;
  /* Emerald hover */
  --nav-pill-active: rgba(5, 150, 105, 0.1);
  --icon-filter: none;
  /* Dark icons for light mode (if they were white). But wait, existing icons are white, so no filter = white on white.
       If icons are white, we need to invert them to black. */
  --logo-filter: invert(1);
  /* Invert white logo to black */

  /* Content Overrides */
  --heading-gradient: linear-gradient(to right, #0f172a, #059669);
  --social-filter: none;
  /* Icons are black by default, so none = black */
  --footer-bg: rgba(255, 255, 255, 0.5);
  /* Glassy white for footer */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-body);
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background-color: var(--bg-dark);
  color: var(--text-main);
  overflow-x: hidden;
  line-height: 1.6;
  transition: background-color 0.5s ease, color 0.5s ease;
}



/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-dark);
}

::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--secondary);
}

/* Typography Utilities */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  color: var(--text-main);
  font-weight: 700;
  line-height: 1.2;
}

.seo h1 {
  display: none;
}

p {
  color: var(--text-muted);
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition-fast);
}

/* Background Atmosphere */
.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  overflow: hidden;
}

.glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.4;
  animation: float 20s infinite ease-in-out;
}

.orb-1 {
  top: -10%;
  left: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, var(--primary), transparent);
}

.orb-2 {
  bottom: -10%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, #064e3b, transparent);
  animation-delay: -5s;
}

@keyframes float {

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

  50% {
    transform: translate(30px, 50px);
  }
}

/* Navigation Styles */
nav {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 800px;
  padding: 0.8rem 1.5rem;
  background: var(--glass-nav-bg);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid var(--glass-nav-border);
  border-radius: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

nav.scrolled {
  top: 10px;
  padding: 0.6rem 1.2rem;
  background: var(--glass-nav-bg);
  /* Check if we want more opacity on scroll? */
}

.nav-brand img {
  height: 35px;
  width: auto;
  filter: var(--logo-filter);
}

.nav-links {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  position: relative;
  /* Removed background/padding here, will rely on nav or individual styles if needed,
       or we can keep it for just the links pill */
  background: var(--glass-bg);
  /* Use generic glass variable */
  padding: 5px;
  border-radius: 30px;
}

.nav-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 1rem;
}

/* Sliding Indicator Logic */
.nav-links a {
  position: relative;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
  padding: 8px 16px;
  border-radius: 20px;
  z-index: 2;
  transition: color 0.3s ease;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--nav-text-hover);
}

.nav-links a.active {
  background: var(--nav-pill-active);
  box-shadow: none;
  /* Simplify for variable compatibility or use var */
}

/* Theme Toggle */
.theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: background 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-toggle:hover {
  background: var(--card-hover);
}

.theme-toggle img {
  width: 20px;
  filter: var(--icon-filter);
  transition: transform 0.5s ease;
}

.theme-toggle:hover img {
  transform: rotate(180deg);
}

/* Mobile Toggle */
.toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1002;
  padding: 5px;
  position: relative;
  width: 28px;
  height: 28px;
}

.toggle img {
  width: 28px;
  filter: var(--icon-filter);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.toggle .close-icon {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-90deg);
}

.toggle.active .menu-icon {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg);
}

.toggle.active .close-icon {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0);
}

/* Tablet Optimization (Keep Desktop Menu) */
@media (max-width: 1024px) and (min-width: 769px) {
  nav {
    width: 95%;
    max-width: 95%;
    /* override the 800px limit */
    padding: 0.6rem 1rem;
  }

  .nav-links {
    gap: 0.2rem;
    /* Reduce gap */
  }

  .nav-links a {
    padding: 6px 10px;
    /* Smaller pills */
    font-size: 0.85rem;
  }
}

/* Mobile Menu Overlay (Phones Only) */
@media (max-width: 768px) {
  nav {
    width: 95%;
    padding: 0.8rem 1.2rem;
  }

  .nav-controls {
    margin-left: auto;
    /* Push controls to the right */
  }

  .nav-links {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(5, 10, 8, 0.98);
    backdrop-filter: blur(20px);
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    padding: 0;
    margin: 0;
    /* Reset */
    border-radius: 0;
    clip-path: circle(0% at 90% 50px);
    transition: clip-path 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    z-index: 1001;
  }

  .nav-links.active {
    clip-path: circle(150% at 90% 50px);
  }

  .nav-links a {
    font-size: 2rem;
    font-family: var(--font-heading);
    font-weight: 700;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
  }

  .nav-links.active a {
    opacity: 1;
    transform: translateY(0);
  }

  /* Staggered animation delays for mobile links */
  .nav-links.active a:nth-child(1) {
    transition-delay: 0.1s;
  }

  .nav-links.active a:nth-child(2) {
    transition-delay: 0.2s;
  }

  .nav-links.active a:nth-child(3) {
    transition-delay: 0.3s;
  }

  .nav-links.active a:nth-child(4) {
    transition-delay: 0.4s;
  }

  .nav-links.active a:nth-child(5) {
    transition-delay: 0.5s;
  }

  .toggle {
    display: block;
  }
}

/* Tablet Layout Refinements */
@media (max-width: 900px) {
  .hero-section-heading {
    font-size: 3rem;
  }

  .welcome {
    flex-direction: column-reverse;
    text-align: center;
    gap: 2rem;
    padding-top: 2rem;
  }

  .hero-section-left {
    max-width: 100%;
    margin: 0 auto;
    align-items: center;
    /* Center align things because of column layout */
  }

  .hero-actions {
    justify-content: center;
  }

  .hero-section-right {
    margin-bottom: 2rem;
  }

  .my-image {
    width: 320px;
    height: 320px;
    margin: 0 auto;
  }
}

/* Layout */
.container {
  padding-top: 100px;
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Hero Section */
.welcome {
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2rem 0;
}

.hero-section-left {
  flex: 1;
  max-width: 600px;
}

.hero-section-heading {
  font-size: 4rem;
  background: var(--heading-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.5rem;
}

.hero-section-sub-heading {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: var(--primary);
}

.hero-section-description {
  font-size: 1.1rem;
  max-width: 500px;
  margin-bottom: 2.5rem;
}

.hero-actions {
  display: flex;
  gap: 1rem;
}

.btn {
  padding: 0.8rem 2rem;
  border-radius: 50px;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: var(--transition-smooth);
  border: 1px solid transparent;
}

.btn-primary {
  background: var(--primary);
  color: #fff;
  /* Ensure white text on emerald button even in light mode, or use var if needed */
}

/* Fix text contrast in light mode for primary button if primary color is dark enough */
[data-theme="light"] .btn-primary {
  color: #fff;
}


.btn-primary:hover {
  background: var(--secondary);
  box-shadow: 0 0 20px var(--primary-glow);
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  border-color: var(--text-muted);
  color: var(--text-main);
}

.btn-outline:hover {
  border-color: var(--primary);
  /* highlight border on hover */
  background: var(--glass-bg);
  color: var(--text-main);
}

.hero-section-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* Stack image and indicator */
  align-items: center;
  justify-content: center;
  position: relative;
  gap: 3rem;
  /* Space between image and indicator */
}

/* ... existing my-image CSS ... */
.my-image {
  position: relative;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  padding: 10px;
  background: linear-gradient(45deg, var(--primary), transparent);
}

.my-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  /* Fix head cut-off */
  border-radius: 50%;
  background: var(--bg-dark);
}

/* ... handles ... */
.handles {
  display: flex;
  gap: 1.5rem;
  margin-top: 2rem;
}

.handles img {
  width: 24px;
  height: 24px;
  opacity: 0.7;
  transition: var(--transition-fast);
  filter: var(--social-filter);
}

.handles img:hover {
  opacity: 1;
  transform: scale(1.1);
}

/* Scroll Indication */
.scroll-indicator {
  /* Removed absolute positioning to prevent overlap */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0.7;
}

/* About Section */
.about-section {
  padding: 6rem 0;
  max-width: 1000px;
  margin: 0 auto;
}

.about-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rem;
  text-align: center;
}

.about-text {
  max-width: 800px;
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--text-muted);
}

.about-text .highlight {
  color: var(--primary);
  font-weight: 600;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  width: 100%;
}

.stat-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  padding: 2rem;
  border-radius: 16px;
  text-align: center;
  transition: var(--transition-smooth);
}

.stat-card:hover {
  transform: translateY(-5px);
  border-color: var(--primary);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3);
}

.stat-number {
  font-size: 3rem;
  font-weight: 800;
  font-family: var(--font-heading);
  background: var(--heading-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.5rem;
  display: inline-block;
  /* details for gradient text */
}

/* Fix for gradient text display inline block issue if needed,
   but h2 usually block. We wrapped 100k in span for gradient to work on number only?
   Actually if h2 has gradient, the whole text has it.
   Let's ensure h2 in stat card gets it.
*/
.stat-card h2 {
  font-size: 3rem;
  font-weight: 800;
  font-family: var(--font-heading);
  background: var(--heading-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.5rem;
}

.stat-label {
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 1px;
}

.mouse {
  width: 26px;
  height: 40px;
  border: 2px solid var(--text-muted);
  border-radius: 20px;
  position: relative;
}

.wheel {
  width: 4px;
  height: 8px;
  background: var(--text-main);
  border-radius: 2px;
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  animation: scroll 1.5s infinite;
}

@keyframes scroll {
  0% {
    transform: translate(-50%, 0);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, 15px);
    opacity: 0;
  }
}

/* Skills Section */
.skills-section {
  padding: 6rem 0;
}

.section-title {
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 1rem;
}

.section-desc {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 4rem;
}

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

.skill-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  padding: 2rem;
  border-radius: 16px;
  text-align: center;
  transition: var(--transition-smooth);
}

.skill-card:hover,
.skill-card.wave-active {
  /* Add wave-active selector */
  background: var(--card-hover);
  transform: translateY(-5px);
  border-color: var(--primary);
}

.skill-card img {
  width: 50px;
  height: 50px;
  margin-bottom: 1rem;
  filter: grayscale(100%);
  transition: var(--transition-fast);
}

.skill-card:hover img,
.skill-card.wave-active img {
  /* Add wave-active selector */
  filter: grayscale(0);
  transform: scale(1.1);
  /* Optional: add explicit scale if desired or rely on card transform */
}

/* Projects Section */
.projects-section {
  padding: 6rem 0;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2.5rem;
}

.project-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  overflow: hidden;
  transition: var(--transition-smooth);
}

.project-card:hover {
  transform: translateY(-8px);
  border-color: var(--primary-glow);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}

.project-image-container {
  height: 220px;
  overflow: hidden;
  position: relative;
}

.project-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.project-card:hover .project-image {
  transform: scale(1.05);
}

.project-info {
  padding: 2rem;
}

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

.tag {
  font-size: 0.75rem;
  background: rgba(16, 185, 129, 0.1);
  color: var(--primary);
  padding: 0.3rem 0.8rem;
  border-radius: 50px;
}

.read-more-link {
  color: var(--text-main);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

.read-more-link:hover {
  color: var(--primary);
}

/* Experience & Education */
.experience-section,
.education {
  padding: 6rem 0;
}

.timeline {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 2px;
  background: var(--glass-border);
}

.timeline-item {
  padding-left: 2rem;
  margin-bottom: 3rem;
  position: relative;
}

.timeline-item::after {
  content: '';
  position: absolute;
  left: -4px;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 10px var(--primary);
}

.timeline-date {
  font-family: var(--font-heading);
  color: var(--primary);
  font-weight: 600;
  margin-bottom: 0.5rem;
  display: block;
}

.education-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}

.edu-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 2rem;
  transition: var(--transition-smooth);
}

.edu-card:hover {
  border-color: var(--secondary);
  transform: translateY(-5px);
}

.edu-card h3 {
  margin-bottom: 0.5rem;
  color: var(--text-main);
}

.edu-card h4 {
  color: var(--primary);
  font-weight: 500;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.edu-card p {
  font-size: 0.95rem;
}

/* Services */
.services-section {
  padding: 6rem 0;
}

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

.service-card {
  background: linear-gradient(145deg, var(--glass-bg), transparent);
  border: 1px solid var(--glass-border);
  padding: 2.5rem;
  border-radius: 20px;
  transition: var(--transition-smooth);
}

.service-card:hover {
  background: var(--glass-bg);
  border-color: var(--primary);
}

.service-icon {
  width: 60px;
  height: 60px;
  background: rgba(16, 185, 129, 0.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.service-icon img {
  width: 30px;
  height: 30px;
  filter: invert(1);
  /* Assuming black icons */
}

/* Footer */
footer {
  border-top: 1px solid var(--glass-border);
  background: var(--footer-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 4rem 0 2rem;
  margin-top: 4rem;
  position: relative;
  overflow: hidden;
  /* For any potential glow effects */
}

/* Optional: Add a subtle glow to footer in dark mode */
footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  opacity: 0.3;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 3rem;
  margin-bottom: 3rem;
  position: relative;
  z-index: 1;
}

/* Testimonials */
.testimonials-section,
.contact-section {
  padding: 6rem 0;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.testimonial-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  padding: 2.5rem;
  border-radius: 20px;
  position: relative;
  transition: var(--transition-smooth);
}

.testimonial-card:hover {
  transform: translateY(-5px);
  border-color: var(--primary);
}

.quote-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 1.5rem;
  opacity: 0.5;
  /* You can add a background image of a quote here or use ::before content for a big quote mark */
}

/* Fallback quote using CSS if image fails or for cleaner look */
.quote-icon::before {
  content: '❝';
  font-size: 3rem;
  color: var(--primary);
  line-height: 1;
}

.testimonial-text {
  font-style: italic;
  color: var(--text-main);
  margin-bottom: 2rem;
  line-height: 1.6;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.author-pic {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(45deg, #10b981, #d9f99d);
  /* Fallback gradient */
}

.author-info h4 {
  font-size: 1rem;
  color: var(--text-main);
  margin-bottom: 0.2rem;
}

.author-info p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
}

/* Contact Section */
.contact-container {
  display: flex;
  flex-wrap: wrap;
  gap: 4rem;
  max-width: 1100px;
  margin: 0 auto;
  background: var(--glass-bg);
  /* Optional wrapper card */
  padding: 3rem;
  border-radius: 24px;
  border: 1px solid var(--glass-border);
}

.contact-info-left {
  flex: 1;
  min-width: 300px;
}

.contact-info-left h3 {
  font-size: 2rem;
  margin-bottom: 1rem;
  background: var(--heading-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.contact-info-left>p {
  color: var(--text-muted);
  margin-bottom: 2.5rem;
  line-height: 1.6;
}

.contact-details-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-bottom: 3rem;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.icon-box {
  width: 50px;
  height: 50px;
  background: rgba(16, 185, 129, 0.1);
  /* Primary tint */
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-box img {
  width: 24px;
  height: 24px;
  filter: invert(1);
  /* Assuming black icons for dark theme */
}

[data-theme="light"] .icon-box img {
  filter: none;
  /* Black icons */
}

.contact-item h5 {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 0.2rem;
}

.contact-item p {
  font-size: 1rem;
  color: var(--text-main);
  margin: 0;
}

/* Form */
.contact-form-right {
  flex: 1.5;
  min-width: 300px;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--text-main);
  font-size: 0.9rem;
  font-weight: 500;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 1rem;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: 1rem;
  transition: var(--transition-fast);
}

[data-theme="light"] .form-group input,
[data-theme="light"] .form-group textarea {
  background: rgba(0, 0, 0, 0.03);
  /* Subtle dark fill for light mode */
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--glass-bg);
}

.submit-btn {
  width: 100%;
  margin-top: 1rem;
}

/* New Footer (Simplified) */
footer {
  border-top: none;
  /* Handled by glass effect or removed */
  background: transparent;
  padding: 2rem 0;
  margin-top: 0;
}

.footer-bottom {
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-muted);
  border-top: 1px solid var(--glass-border);
  padding-top: 2rem;
}

/* Responsive */
@media (max-width: 768px) {

  /* Previous adjustments merged into the 900px block or kept generic for tablet/mobile */
  /* Only keeping mobile-specific overrides */
  .nav-links {
    display: none;
    /* Mobile menu logic needs JS to toggle */
    position: absolute;
    top: 80px;
    left: 0;
    width: 100%;
    background: var(--bg-dark-secondary);
    flex-direction: column;
    padding: 2rem;
    border-radius: 20px;
  }

  .nav-links.active {
    display: flex;
  }

  .toggle {
    display: block;
  }

  .welcome {
    flex-direction: column-reverse;
    text-align: center;
    gap: 3rem;
  }

  .hero-section-heading {
    font-size: 2.5rem;
  }

  .hero-actions {
    justify-content: center;
  }

  .my-image {
    width: 300px;
    height: 300px;
  }

  .timeline::before {
    left: 0;
  }

  .timeline-item {
    padding-left: 1.5rem;
  }
}

/* Small Mobile Refinements */
@media (max-width: 380px) {
  nav {
    padding: 0.6rem 1rem;
  }

  .nav-brand img {
    height: 30px;
  }

  .hero-section-heading {
    font-size: 2rem;
  }

  .my-image {
    width: 250px;
    height: 250px;
  }

  .btn {
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
  }
}

/* Toast Popup Notification */
#toast {
  visibility: hidden;
  min-width: 320px;
  background: rgba(5, 10, 8, 0.95);
  /* Deep dark background */
  border: 1px solid var(--primary);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
  color: #fff;
  text-align: center;
  border-radius: 16px;
  padding: 1.5rem 2rem;
  position: fixed;
  z-index: 10000;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  backdrop-filter: blur(12px);
  font-weight: 500;
  font-size: 1.1rem;
}

[data-theme="light"] #toast {
  background: rgba(255, 255, 255, 0.95);
  color: var(--text-heading);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

#toast.show {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Inline Style Replacements */
.padding-0 {
  padding: 0 !important;
}

.quote-placeholder {
  opacity: 0;
  width: 100%;
  height: 100%;
}

.author-pic-david {
  background: linear-gradient(45deg, #60a5fa, #3b82f6);
}

.author-pic-emily {
  background: linear-gradient(45deg, #f472b6, #db2777);
}