/* Base, Typography, Theme */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root{
  --bg:#ffffff; --fg:#0d0d0d; --muted:#555; --ring:#111; --accent:#111;
  --card:#fafafa; --border:#d9d9d9; --shadow:0 10px 30px rgba(0,0,0,.08);
}
html { scroll-behavior: smooth; }
body { font-family: "Poppins", sans-serif; color:var(--fg); background:var(--bg); line-height:1.6; }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline:2px solid #8ab4ff; outline-offset:2px; }

.section{ padding:80px 7vw; }
.section-compact{ padding:60px 7vw; }
.title{ font-size:clamp(1.8rem, 2.5vw, 3rem); text-align:center; margin:10px 0 24px; }
.lede{ max-width:72ch; margin:0 auto 28px; text-align:center; color:var(--muted); }
.mt-lg{ margin-top:48px; }

/* Header and Nav */
.site-header { position: sticky; top:0; z-index:50; background:rgba(255,255,255,.8); backdrop-filter: blur(10px); border-bottom:1px solid #f0f0f0;}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:14px 7vw; }
.brand{ display:flex; align-items:center; gap:10px; }
.my-logo{ height:48px; width:auto; border-radius:8px; }
.brand-text{ font-weight:600; font-size:1.2rem; }
.nav-links{ display:flex; gap:24px; list-style:none; }
.nav-links a{ position:relative; padding:6px 2px; }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:#000; transition:width .25s; }
.nav-links a:hover::after{ width:100%; }

/* Hamburger */
.hamburger{ display:none; width:40px; height:32px; background:transparent; border:0; cursor:pointer; position:relative; }
.hamburger span{ position:absolute; left:8px; right:8px; height:2px; background:#111; transition:transform .25s, opacity .25s, top .25s; }
.hamburger span:nth-child(1){ top:9px; }
.hamburger span:nth-child(2){ top:16px; }
.hamburger span:nth-child(3){ top:23px; }
.hamburger.is-open span:nth-child(1){ top:16px; transform:rotate(45deg); }
.hamburger.is-open span:nth-child(2){ opacity:0; }
.hamburger.is-open span:nth-child(3){ top:16px; transform:rotate(-45deg); }
.mobile-menu{ position:absolute; inset:60px 7vw auto auto; background:#fff; border:1px solid #eee; border-radius:12px; box-shadow:var(--shadow); display:flex; flex-direction:column; overflow:hidden; }
.mobile-menu a{ padding:12px 16px; border-bottom:1px solid #f5f5f5; }
.mobile-menu a:last-child{ border-bottom:0; }

/* Hero with 3D */
.hero{ position:relative; min-height:92vh; display:grid; place-items:center; overflow:hidden; }
#hero-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.hero-content{ position:relative; z-index:1; display:flex; gap:48px; align-items:center; flex-wrap:wrap; justify-content:center; padding:20px; }
.section__text{text-align:center;}
.section__text__p1{ color:var(--muted); }
.section__text__p2{ margin:.25rem 0 1rem; color:var(--muted); }
.btn-container{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.btn{ font-weight:600; padding:.9rem 1.2rem; border-radius:999px; border:1px solid #333; cursor:pointer; transition:transform .2s, background .2s, color .2s, border-color .2s; }
.btn:hover{ transform:translateY(-1px); }
.btn-color-1{ background:#111; color:#fff; border-color:#111; }
.btn-color-1.outline{ background:transparent; color:#111; }
.btn-color-2{ background:transparent; color:#111; border-color:#333; }
.text-link{ color:#111; border-bottom:1px solid #111; }
.scroll-down {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0; /* remove extra space from button */
}

.scroll-down img {
  width: 50px;   /* adjust arrow size */
  height: 50px;  /* keep it square */
}


/* About preview */
.section-container{ display:grid; grid-template-columns: 320px 1fr; gap:40px; align-items:center; }
.about-pic{ border-radius:20px; }
.about-containers{ display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:20px; margin:20px 0; }
.details-container{ padding:18px; background:#fff; border:1px solid var(--border); border-radius:16px; text-align:center; box-shadow:var(--shadow); }
.icon{ height:24px; width:24px; }

/* Skills */
.skills-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px; }
.skill-card{ display:flex; gap:14px; align-items:center; padding:14px; background:var(--card); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); transition: transform .2s; }
.skill-card:hover{ transform: translateY(-2px); }
.progress{ --h:8px; background:#eee; border-radius:999px; height:var(--h); width:220px; position:relative; overflow:hidden; }
.progress span{ position:absolute; left:0; top:0; bottom:0; width:var(--val); background:#111; border-radius:999px; transform-origin:left; transform:scaleX(0); animation:fill 1.2s forwards; }
@keyframes fill{ to{ transform:scaleX(1);} }

/* Projects */
.filters{ display:flex; gap:10px; justify-content:center; margin-bottom:20px; flex-wrap:wrap; }
.chip{ padding:8px 14px; border:1px solid #333; border-radius:999px; background:#fff; cursor:pointer; font-weight:500; }
.chip.is-active{ background:#111; color:#fff; }
.cards{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:18px; }
.card{ background:#fff; border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column; transition: transform .25s, box-shadow .25s; }
.card:hover{ transform: translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,.12); }
.card-media img{ aspect-ratio: 16/10; object-fit:cover; }
.card-body{ padding:16px; display:flex; flex-direction:column; gap:10px; }
.card-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* Modals */
.modal{ position:fixed; inset:0; background:rgba(0,0,0,.5); display:none; align-items:center; justify-content:center; padding:20px; z-index:60; }
.modal.is-open{ display:flex; }
.modal-dialog{ max-width:680px; width:100%; background:#fff; border-radius:16px; padding:22px; box-shadow:var(--shadow); }
.modal-close{ background:transparent; border:0; font-size:28px; position:absolute; right:28px; top:22px; cursor:pointer; }
.modal-list{ padding-left:18px; }
.modal-list li{ margin-left:14px; }

/* Contact (shared) */
.contact-info-upper-container{ display:flex; justify-content:center; align-items:center; gap:18px; border:1px solid var(--border); border-radius:16px; padding:12px; background:#fff; box-shadow:var(--shadow); }
.contact-info-container{ display:flex; align-items:center; gap:8px; }
.email-icon{ height:28px; }

/* Contact page */
.contact-grid{ display:grid; grid-template-columns: minmax(0,1fr) 520px; gap:20px; }
.card.form{ background:#fff; border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); padding:18px; display:grid; gap:10px; }
.card.form input, .card.form textarea{ width:100%; padding:10px 12px; border:1px solid #ccc; border-radius:10px; font:inherit; }
.form-actions{ display:flex; gap:10px; align-items:center; }
#form-status{ min-height:24px; font-size:.95rem; color:#0b7a0b; }
.map-card{ background:#fff; border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); padding:12px; display:grid; gap:12px; }
.map{ height:380px; width:100%; border-radius:12px; }
.socials{ display:flex; gap:10px; }

/* Timeline */
.timeline{ position:relative; margin:24px auto; max-width:900px; }
.timeline::before{ content:""; position:absolute; left:calc(50% - 1px); width:2px; top:0; bottom:0; background:#eee; }
.timeline-item{ position:relative; display:grid; grid-template-columns: 1fr 1fr; gap:24px; margin:28px 0; }
.timeline-dot{ position:absolute; left:calc(50% - 6px); top:10px; width:12px; height:12px; background:#111; border-radius:50%; }
.timeline-card{ background:#fff; border:1px solid var(--border); box-shadow:var(--shadow); border-radius:14px; padding:16px; }
.timeline-item:nth-child(odd) .timeline-card{ grid-column:1; }
.timeline-item:nth-child(even) .timeline-card{ grid-column:2; }

/* Loader */
#loader{ position:fixed; inset:0; display:grid; place-items:center; background:#fff; z-index:100; }
.spinner{ width:42px; height:42px; border-radius:50%; border:3px solid #1112; border-top-color:#111; animation:spin .8s linear infinite; }
.loader-text{ margin-top:12px; color:#666; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Page transitions */
#page-transition{ position:fixed; inset:0; pointer-events:none; background:#111; transform:translateY(100%); z-index:90; }

/* Custom cursor */
#cursor, #cursor-outline{ position:fixed; top:0; left:0; pointer-events:none; border-radius:50%; transform:translate(-50%,-50%); z-index:120; }
#cursor{ width:6px; height:6px; background:#111; }
#cursor-outline{ width:28px; height:28px; border:1px solid #111; mix-blend-mode: difference; }

/* Utilities */
/* Container for layout */
.section__pic-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 40px auto;
}

/* 3D-style glowing square box */
.profile-box {
  width: 180px;
  height: 180px;
  border-radius: 16px; /* subtle rounded corners */
  overflow: hidden;
  background: linear-gradient(145deg, #1e1e1e, #2c2c2c); /* dark techy gradient */
  border: 2px solid rgba(255, 255, 255, 0.15);
  box-shadow:
    0 0 15px rgba(255, 255, 255, 0.2), /* subtle glow */
    0 10px 30px rgba(0, 0, 0, 0.5); /* depth shadow */
  position: relative;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* Hover effect for aesthetics */
.profile-box:hover {
  transform: rotateX(5deg) rotateY(5deg) scale(1.05);
  box-shadow:
    0 0 25px rgba(255, 255, 255, 0.5),
    0 15px 40px rgba(0, 0, 0, 0.6);
}

/* Image inside the box */
.profile-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px; /* match the box corners */
  display: block;
}

/* Optional animated neon border glow */
@keyframes glow {
  0%, 100% { box-shadow: 0 0 20px rgba(0,255,255,0.4), 0 0 30px rgba(0,255,255,0.2); }
  50% { box-shadow: 0 0 40px rgba(0,255,255,0.6), 0 0 50px rgba(0,255,255,0.3); }
}

.profile-box::after {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: 18px;
  pointer-events: none;
  animation: glow 2.5s infinite alternate;
}


.text-container{ color:var(--muted); }
.btn-row{ display:flex; gap:12px; justify-content:center; margin-top:18px; }
footer{ padding:40px 7vw; text-align:center; color:#777; }
#socials-container {
  display: flex;
  gap: 16px; /* space between icons */
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

#socials-container .icon {
  width: 40px;
  height: 40px;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Hover effect: slight zoom and glow */
#socials-container .icon:hover {
  transform: scale(1.15) rotate(5deg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
/* Social buttons only */
.socials .btn-color-2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px; /* space for optional icons later */
  padding: 12px 25px;
  margin: 5px;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  background: linear-gradient(135deg, #08020f, #02050b);
  border: none;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.socials .btn-color-2:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  background: linear-gradient(135deg, #35383e, #3b383e); /* hover gradient flip */
}

.socials .btn-color-2:active {
  transform: translateY(-1px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.section__pic-container {
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1200px; /* enables 3D effect */
}

#profile-3d {
  width: 250px;
  height: 250px;
  margin: auto;
}
#profile-3d canvas {
  border-radius: 16px; /* same style as your profile */
  box-shadow: 0 10px 20px rgba(0,0,0,0.25);
}




/* Chatbot */
/* ===== Chat widget theme vars (add to style.css) ===== */
:root {
  --chat-accent: #6C5CE7;
  --chat-accent-2: #4D5BFF;
  --chat-text-dark: #E6EEF8;   /* for dark mode */
  --chat-text-light: #0b1220;  /* for light mode */
  --chat-muted: #98A0B3;
  --particle-color-dark: #ffffff; /* white particles on dark bg */
  --particle-color-light: #0b1220; /* dark particles on light bg */
  --chat-particle-color: var(--particle-color-dark); /* active particle color */
  --page-bg: #0f1724;
}

/* body light-mode flips colors */
body.light-mode {
  --chat-particle-color: var(--particle-color-light);
  --page-bg: #f7fafc;
  --chat-text: var(--chat-text-light);
}
body:not(.light-mode) {
  --chat-text: var(--chat-text-dark);
}

/* ensure svg strokes follow current color */
#mini-chat-widget svg { stroke: currentColor !important; color: var(--chat-text) !important; }

/* ===== Chat widget core styles (add to style.css) ===== */
.chat-bubble {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 9999;
  width: 72px;
  height: 72px;
  border-radius: 100%;
  outline: none;
border: 2px solid rgba(255,255,255,0.55); /* soft white edge */


  /* 3D glass + soft depth */
  background: radial-gradient(circle at 30% 30%,  #e2e2e2),
              linear-gradient(135deg, #ffffff, #ffffff);
  box-shadow:
    0 18px 35px rgba(0,0,0,0.35),          /* main drop shadow */
    inset 0 4px 8px rgba(255, 255, 255, 0.742),/* top inner light */
    inset 0 -4px 12px rgba(0,0,0,0.25);     /* bottom shading */

  display: flex;
  align-items: center;
  justify-content: center;

  transform-style: preserve-3d;
  cursor: pointer;

  /* smooth floating interaction */
  transition:
    transform 0.35s cubic-bezier(.2,.9,.3,1),
    box-shadow 0.35s ease;
}

/* hover 3D lift */
.chat-bubble:hover {
  transform: translateY(-10px) scale(1.06)
             rotateX(12deg) rotateY(-12deg);
  box-shadow:
    0 25px 50px rgba(0,0,0,0.45),
    inset 0 6px 10px rgba(255, 255, 255, 0.35),
    inset 0 -6px 14px rgba(0,0,0,0.3);
}

/* pressed click effect */
.chat-bubble:active {
  transform: translateY(-3px) scale(0.96);
  box-shadow:
    0 12px 24px rgba(0,0,0,0.35),
    inset 0 3px 5px rgba(255,255,255,0.2),
    inset 0 -3px 6px rgba(0,0,0,0.3);
}


.chat-ring { position:absolute; width:120%; height:120%; border-radius:50%; left:-10%; top:-10%;
  pointer-events:none; background: radial-gradient(circle at center, rgba(108,92,231,0.12), transparent 35%); animation: ring 3.8s infinite; }
@keyframes ring{ 0%{ transform:scale(.9); opacity:.85 } 60%{ transform:scale(1.12); opacity:.18 } 100%{ transform:scale(1.2); opacity:0 } }
body.light-mode .chat-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
}
.chatbot-avatar {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 10px;
}
.bubble-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  transform: translateZ(20px);
}

.chat-card {
  position: fixed;
  right: 28px;
  bottom: 110px;
  width: 360px;
  max-width: calc(100vw - 56px);
  border-radius: 16px;
  /* Dark mode background */
background: rgba(20, 20, 30, 0.97);
backdrop-filter: blur(20px);

  color: var(--chat-text);
  box-shadow: 0 18px 50px rgba(2,6,23,0.6);
  transform-origin: bottom right;
  transform: translateY(8px) scale(.98);
  opacity: 0; pointer-events: none;
  transition: transform .36s cubic-bezier(.2,.9,.3,1), opacity .36s;
  z-index: 9998;
}
.chat-card.open { transform: translateY(0) scale(1); opacity:1; pointer-events:auto; }

.chat-header { display:flex; gap:12px; align-items:center; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,0.03); }
.avatar { width:44px;height:44px;border-radius:10px; display:flex;align-items:center;justify-content:center; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); }
.header-text { font-size:14px; color:var(--chat-text); }
.header-sub { font-size:12px; color:var(--chat-muted); margin-top:2px; }

.chat-body { padding:12px; max-height:320px; overflow:auto; display:flex; flex-direction:column; gap:10px; background:transparent; }
.msg { max-width:80%; padding:10px 12px; border-radius:12px; font-size:13px; line-height:1.25; }
.msg.bot { align-self:flex-start; background: rgba(255,255,255,0.02); color:var(--chat-text); }
.msg.user { align-self:flex-end; background: linear-gradient(90deg, rgba(108,92,231,0.16), rgba(77,91,255,0.12)); color:white; }

.quick-actions { display:flex; gap:8px; padding:10px; border-top:1px solid rgba(255,255,255,0.02); background:transparent; }
.quick-actions button{ padding:8px 10px; border-radius:10px; border:none; background: rgba(255,255,255,0.02); color:var(--chat-text); cursor:pointer; }

.chat-input { display:flex; gap:8px; padding:12px; border-top:1px solid rgba(255,255,255,0.02); }
.chat-input input { flex:1; padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,0.03); background: rgba(255,255,255,0.01); color:var(--chat-text); }
.chat-input button { padding:10px 12px; border-radius:10px; border:none; background: linear-gradient(90deg, var(--chat-accent), var(--chat-accent-2)); color:white; cursor:pointer; }

.mini-btn { width:34px; height:34px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; background: rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.02); cursor:pointer; }

/* responsive */
@media (max-width:420px){ .chat-card{ right:12px; left:12px; width:auto; bottom:96px; } .chat-bubble{ right:18px; bottom:18px; } }
/* Mobile: ensure bubble sits on top of navbar and below it (use --navbar-height set by JS) */
@media (max-width: 768px) {
  .chat-bubble {
    top: calc(var(--navbar-height, 53px) + 8px); /* fallback 56px if JS hasn't run */
    bottom: auto;
    right: 16px;
    transform: scale(0.9);
    z-index: 99999 !important;           /* must be above navbar */
  }

  .chat-card {
    top: calc(var(--navbar-height, 56px) + 72px); /* opens below bubble */
    bottom: auto;
    right: 12px;
    left: auto;
    width: calc(100vw - 24px);
    max-width: none;
    z-index: 99998 !important;
  }
}

:root {
  --page-bg: #0f0f15;
  --text-color: #ffffff;
  --muted-text: #bbbbbb;

  --card-bg: rgba(255,255,255,0.06);

  --particle-color: #ffffff;

  --sun-opacity: 0;
  --moon-opacity: 1;
}

/* Light mode */
body.light-mode {
  --page-bg: #f4f4f7;
  --text-color: #0b0b0c;
  --muted-text: #3c3c3c;

  --card-bg: rgba(255,255,255,0.9);

  --particle-color: #0d0d12;

  --sun-opacity: 1;
  --moon-opacity: 0;
}
body {
  background: var(--page-bg);
  color: var(--text-color);
}
svg { stroke: currentColor !important; color: currentColor !important; }
.theme-toggle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  cursor: pointer;

  background: var(--card-bg);
  backdrop-filter: blur(16px);

  display: flex;
  align-items: center;
  justify-content: center;

  transition: background 0.3s ease;
  margin-left: 12px;
}

.theme-toggle svg {
  width: 22px;
  height: 22px;
  position: absolute;
  transition: opacity .35s ease, transform .35s ease;
}

/* Sun / Moon toggle */
.theme-toggle .sun { opacity: var(--sun-opacity); transform: rotate(var(--sun-opacity)*360deg); }
.theme-toggle .moon { opacity: var(--moon-opacity); transform: rotate(var(--moon-opacity)*360deg); }

/* ----------------------------
   Force section text to follow theme
   (Place at end of style.css)
   ---------------------------- */

#skills, #projects, .section, .skills-grid, .cards {
  color: var(--text-color) !important;
}

/* Specific elements commonly used */
.section__text__p1,
.title,
.skills-grid .skill-card h3,
.skills-grid .skill-card p,
.skill-card h3,
.skill-card p,
.card h3,
.card p,
.card .card-actions a,
.card .card-actions .btn,
.filters .chip,
.filters .chip.is-active,
.filters .chip:hover {
  color: var(--text-color) !important;
}

/* Ensure progress labels and small text follow muted color */
.skill-card .progress,
.skill-card small,
.card small,
.card .meta {
  color: var(--muted-text) !important;
}

/* Make sure links inside those sections follow theme */
#skills a, #projects a, .card a {
  color: var(--text-color) !important;
  text-decoration-color: rgba(255,255,255,0.12) !important;
}

/* SVG icons in skill cards / cards should inherit current color */
.skills-grid .icon, .card-media img, .card .icon {
  filter: none !important; /* remove filters that force color */
}
#skills svg, #projects svg, .skills-grid svg {
  stroke: currentColor !important;
  color: currentColor !important;
}
/* Fix: Skill-card titles should stay dark because card background is white */
#skills .skill-card h3 {
  color: #000000 !important;     /* dark text */
}

#skills .skill-card p {
  color: #111111 !important;     /* slightly softer dark */
}

/* Project cards always have light backgrounds → force dark text always */
#projects .card-body h3,

#projects .card-body p,
#projects .card-body a,
#projects .card-body button,
#projects .card-body .btn {
  color: #000000 !important;
}
/* Dark mode: Contact Me button should be white bg + white text */
body:not(.light-mode) .btn.btn-color-1[onclick*="contact.html"] {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
}

/* -----------------------------
   Fixed light navbar color
   Place at the end of style.css
   ----------------------------- */

/* Choose the exact gray you want here (example matches your screenshot) */
:root {
  --navbar-bg-fixed: #dedede; /* change this hex if you want a slightly lighter/darker gray */
  --navbar-text-fixed: #111111; /* text color shown on navbar */
}

/* -------------------------------------------
   About section text must always be black
   ------------------------------------------- */


/* -------------------------------------------
   About section text must always be black
   ------------------------------------------- */
#about,

#about h2,
#about h3,

#about small,
#about .timeline-card,
#about .timeline-card h3,
#about .timeline-card p,
#about .timeline-card small {
  color: #000 !important;
}

/* If timeline cards use translucent backgrounds,
   this ensures the text stays fully visible */
#about .timeline-card {
  background: rgba(255, 255, 255, 0.96) !important;
}
/* Timeline dot — adapt color based on theme */

/* Light mode → black dot */
body.light-mode #about .timeline-dot {
  background: #000 !important;
  border-color: #000 !important;
}

/* Dark mode → white dot */
body:not(.light-mode) #about .timeline-dot {
  background: #fff !important;
  border-color: #fff !important;
}
/* Timeline dot should ALWAYS be black */
#about .timeline-dot {
  background: #000 !important;
  border-color: #000 !important;
}
/* Contact section text should always be black */
#contact,
#contact * {
  color: #000 !important;
}

/* Only email + LinkedIn text (inside contact section) always black */
#contact .contact-info-container a {
  color: #000 !important;
}
/* Navbar text ALWAYS black */
header,
header * ,
.nav__container,
.nav__container * ,
.navbar,
.navbar * {
  color: #000 !important;
}
/* Dark mode → make scroll-down arrow white */
body:not(.light-mode) .scroll-down img {
  filter: brightness(0) invert(1) !important;
}

/* Light mode → keep arrow normal */
body.light-mode .scroll-down img {
  filter: none !important;
}
/* Only the contact email + LinkedIn text — always black */
.contact-info-container p a {
  color: #000 !important;
}



/* // Game css */