/* your styles go here */

/* Navigation hover color */
.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: #fbd214 !important;
}

/* Remove dark overlay on hero background image */
.hero::before {
  display: none;
}

/* ===========================
   Dark Mode Toggle Button
   =========================== */
.dark-toggle-btn {
  background: transparent;
  border: 1px solid rgba(120, 120, 120, 0.4);
  color: inherit;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  flex-shrink: 0;
}

.dark-toggle-btn:hover {
  background: rgba(120, 120, 120, 0.15);
}

/* ===========================
   Dark Mode Styles
   =========================== */
body.dark-mode {
  background-color: #121212;
  color: #e0e0e0;
}

body.dark-mode .navbar {
  background-color: #1a1a1a !important;
  border-bottom: 1px solid #2e2e2e;
}

body.dark-mode .navbar .nav-link {
  color: #c0c0c0 !important;
}

body.dark-mode .navbar .nav-link:hover,
body.dark-mode .navbar .nav-link:focus,
body.dark-mode .navbar .nav-link.active {
  color: #fbd214 !important;
}

body.dark-mode .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.2);
}

body.dark-mode .navbar-toggler-icon {
  filter: invert(1);
}

body.dark-mode section {
  background-color: #121212;
}

body.dark-mode .bg-light {
  background-color: #1e1e1e !important;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
  color: #f0f0f0;
}

body.dark-mode p {
  color: #c8c8c8;
}

body.dark-mode .text-muted {
  color: #888888 !important;
}

body.dark-mode .text-shadow {
  color: #c8c8c8;
}

body.dark-mode .timeline-item {
  border-left-color: #3a3a3a;
}

body.dark-mode .timeline-arrow {
  border-right-color: #2a2a2a !important;
}

body.dark-mode footer {
  background-color: #1a1a1a;
  color: #c0c0c0;
}

body.dark-mode footer .copyrights {
  background-color: #111111;
}

body.dark-mode .border-top {
  border-color: #2e2e2e !important;
}

body.dark-mode .social-link {
  color: #c0c0c0;
  background-color: #2e2e2e;
}

body.dark-mode .social-link:hover {
  color: #ffffff;
  background-color: #444444;
}

body.dark-mode .dark-toggle-btn {
  color: #f0d060;
  border-color: rgba(240, 208, 96, 0.5);
}

body.dark-mode .dark-toggle-btn:hover {
  background: rgba(240, 208, 96, 0.12);
}

body.dark-mode a:not(.nav-link):not(.social-link):not(.text-primary):not([class]) {
  color: #a0c4ff;
}