/* ===== Base Styles (Light Mode) ===== */
body {
  background-color: #ffffff;
  color: #111111;
  transition: background 0.3s, color 0.3s;
  font-family: 'Segoe UI', sans-serif;
  line-height: 1.6;
  padding-top: 0px; /* Fixed header height offset */
}

/* ===== Toggle Button ===== */
.theme-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  background-color: #ffffff;
  border: none;
  color: #000000;
  padding: 10px 16px;
  border-radius: 30px;
  cursor: pointer;
  font-weight: bold;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  z-index: 9999;
}

/* ===== Dark Mode Base ===== */
body.dark-mode {
  background-color: #0d1117;
  color: #c9d1d9;
}

body.dark-mode .theme-toggle {
  background-color: #222;
  color: #ffffff;
  box-shadow: 0 0 12px #58a6ff;
}

/* ===== Header ===== */
body.dark-mode .site-header {
  background: linear-gradient(135deg, #000428, #004e92);
  color: #ffffff;
}


/* ===== Underline Animation ===== */
@keyframes underlineSlide {
  0% { transform: scaleX(0.6); opacity: 0.7; }
  100% { transform: scaleX(1); opacity: 1; }
}

/* ===== About Section ===== */
body.dark-mode .about-section {
  background-color: #0d1117;
  color: #e0e0e0;
}
body.dark-mode .about-section h1,
body.dark-mode .about-section h2 {
  color: #58a6ff;
}

/* ===== Services Section ===== */
body.dark-mode .services-section {
  background-color: #0d1117;
  color: #e0e0e0;
}
body.dark-mode .service-box {
  background: #1a1a1a;
  color: #ccc;
}
body.dark-mode .service-box:hover {
  background: #222;
}

/* ===== Portfolio Section ===== */
body.dark-mode .portfolio-section {
  background-color: #0d1117;
  color: #e0e0e0;
}
body.dark-mode .portfolio-item {
  background: #1e1e1e;
  color: #ccc;
}
body.dark-mode .portfolio-item:hover {
  background: #2a2a2a;
}

/* ===== Footer ===== */
body.dark-mode .footer {
  background: linear-gradient(135deg, #0d1117, #161b22);
  color: #e0e0e0;
  transition: background 0.3s ease, color 0.3s ease;
}
body.dark-mode .footer-links span {
  color: rgba(255, 255, 255, 0.3);
}
body.dark-mode .footer-links a {
  color: #ddd;
  text-shadow: 0 0 6px rgba(255,255,255,0.2);
}
body.dark-mode .footer-links a:hover {
  color: #58a6ff;
}
body.dark-mode .footer-links a::after {
  background-color: #58a6ff;
}

/* ===== Social Icons ===== */
body.dark-mode .footer-links .facebook {
  color: #1877f2;
  text-shadow: 0 0 10px #1877f2;
}
body.dark-mode .footer-links .facebook::after {
  background-color: #1877f2;
}
body.dark-mode .footer-links .facebook:hover {
  color: #1877f2;
}

body.dark-mode .footer-links .instagram {
  background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 10px rgba(255, 100, 200, 0.7);
}
body.dark-mode .footer-links .instagram::after {
  background: linear-gradient(90deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
}

body.dark-mode .footer-links .twitter {
  color: #ffffff;
  text-shadow: 0 0 10px #ffffff;
}
body.dark-mode .footer-links .twitter::after {
  background-color: #ffffff;
}
body.dark-mode .footer-links .twitter:hover {
  color: #ffffff;
}

body.dark-mode .footer-links .linkedin {
  color: #0077b5;
  text-shadow: 0 0 10px #0077b5;
}
body.dark-mode .footer-links .linkedin::after {
  background-color: #0077b5;
}
body.dark-mode .footer-links .linkedin:hover {
  color: #0077b5;
}

body.dark-mode .footer-links .youtube {
  color: #ff0000;
  text-shadow: 0 0 10px #ff0000;
}
body.dark-mode .footer-links .youtube::after {
  background-color: #ff0000;
}
body.dark-mode .footer-links .youtube:hover {
  color: #ff0000;
}

/* ========= Dark Mode ========= */
body.dark-mode {
  background: linear-gradient(to bottom, #0a0a23, #121530, #0f1a2c);
  color: #e0e0e0;
}

/* Header */
body.dark-mode .main-header {
  background: linear-gradient(90deg, #0d0d1e, #0b1c33);
  border-bottom: 2px solid #0ff;
}
body.dark-mode .main-header .company-name {
  color: #00ffc8;
}

/* Theme Button */
body.dark-mode .theme-toggle {
  background: linear-gradient(to right, #1a1a40, #0d0d33);
  color: #fff;
  border: 1px solid #00f0ff;
  box-shadow: 0 0 10px #00f0ff;
}

/* Highlights */
body.dark-mode .highlights-section {
  background: #111a2e;
}
body.dark-mode .highlight-card {
  background: #1b263b;
  color: #f0f0f0;
}
body.dark-mode .highlight-card h3 {
  color: #00bfff;
}
body.dark-mode .btn-demo {
  background-color: #0077ff;
}
body.dark-mode .btn-demo:hover {
  background-color: #0052cc;
}
body.dark-mode .particle-button {
  background: #f5f5f5;
  color: #222;
}
body.dark-mode .more-service-button .hero-btn {
  background: linear-gradient(to right, #111, #222);
  box-shadow: 0 0 12px #00ffe0;
}

/* Footer */
body.dark-mode .footer {
  background: linear-gradient(to right, #0a0a2a, #0f0f3a);
  color: #bbb;
}
body.dark-mode .footer a {
  color: #66ccff;
}
body.dark-mode .footer a:hover {
  text-decoration: underline;
}