/* ==============================
   🌗 Theme Toggle Button
============================== */
.theme-toggle-btn {
  background: none;
  border: none;
  cursor: pointer;
  margin-left: 10px;
  padding: 8px 8px 8px 16px;
  position: absolute;
  font-size: 25px;
  right: 20px;
  z-index: 1000;
}

/* 🌙 Dark Mode (activated when body has .dark class) */
body.dark {
    background-color: #1d2a35;
    color: #ffffff;
}

/* 🔳 Main containers in dark */
body.dark nav,
body.dark .container,
body.dark .card {
    background-color: #1d2a35;
    color: #ffffff;
    box-shadow: 0 3px 4px #474849;
}

/* 🔘 Theme Toggle Icon (Moon/Sun) */
body.dark .theme-toggle-btn i,
body.dark .menu-btn i {
    color: #ffffff;
}

/* 🌐 Navigation links */
body.dark nav ul li a,
body.dark .contact-page p,
body.dark .contact-info a,
body.dark .social-links a {
    color: #ffffff;
}

body.dark nav ul li a.active,
body.dark nav ul li a:hover,
body.dark .contact-info a:hover,
body.dark .social-links a:hover {
    color: #ffcc00;
    background: none;
}

/* 📱 Mobile Navigation Background */
@media (max-width: 920px) {
    body.dark nav ul {
        background: #081508;
    }
}