:root {
    --transition-speed: 0.6s;
    --timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* === Base Body Styles === */
body {
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
    background-color: #e0e5ec; /* light background */
    color: #000;
}
body.dark-mode {
    background-color: #1a1a2e; /* dark background */
    color: #e4e4e4;
}

/* === Fancy Dark Mode Toggle === */
.theme-switch {
    width: 70px;
    height: 38px;
    position: relative;
    display: inline-block;
    margin-left: 10px;
}

.theme-switch input {
    display: none; /* hide the checkbox */
}

/* The main track */
.track {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #87CEEB, #a3d8f4);
    border-radius: 60px;
    cursor: pointer;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.2), 0 5px 15px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: background var(--transition-speed) ease;
}

/* The thumb */
.thumb {
    position: absolute;
    width: 30px;
    height: 30px;
    top: 4px;
    left: 4px;
    border-radius: 50%;
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    z-index: 2;
    transition: transform var(--transition-speed) var(--timing-function);
    background: transparent;
    overflow: hidden;
}

/* Sun and Moon */
.sun, .moon {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transition: opacity var(--transition-speed) ease, transform var(--transition-speed) ease;
}

.sun {
    background: radial-gradient(circle, #FFD700, #FFA500);
    box-shadow: 0 0 20px #FFD700;
    opacity: 1;
    transform: scale(1);
}

.moon {
    background: radial-gradient(circle, #f5f3ce, #c9c7a7);
    box-shadow: 0 0 15px #f5f3ce;
    opacity: 0;
    transform: scale(0.8);
}
.moon::before, .moon::after {
    content: '';
    position: absolute;
    background: rgba(0,0,0,0.1);
    border-radius: 50%;
}
.moon::before { width: 10px; height: 10px; top: 10px; left: 25px; }
.moon::after { width: 15px; height: 15px; top: 25px; left: 15px; }

/* Clouds */
.clouds {
    opacity: 1;
    transition: opacity var(--transition-speed) ease;
    animation: drift 20s linear infinite;
}
.cloud {
    position: absolute;
    background: white;
    border-radius: 50px;
    filter: opacity(0.8);
}
.cloud:nth-child(1) { width: 40px; height: 20px; top: 15px; left: -30%; }
.cloud:nth-child(2) { width: 50px; height: 25px; top: 30px; left: -50%; animation-delay: -10s; }

@keyframes drift {
    from { transform: translateX(0); }
    to { transform: translateX(200px); }
}

/* Stars */
.stars {
    opacity: 0;
    transition: opacity var(--transition-speed) ease;
}
.star {
    position: absolute;
    background: white;
    border-radius: 50%;
    animation: twinkle 2s infinite;
}
.star:nth-child(1) { width: 2px; height: 2px; top: 15%; left: 20%; animation-delay: -0.5s; }
.star:nth-child(2) { width: 3px; height: 3px; top: 30%; left: 80%; animation-delay: -1s; }
.star:nth-child(3) { width: 2px; height: 2px; top: 45%; left: 50%; animation-delay: -1.5s; }
.star:nth-child(4) { width: 2px; height: 2px; top: 10%; left: 60%; }

@keyframes twinkle {
    50% { opacity: 0.5; transform: scale(0.8); }
}

/* === Toggle Checked State === */
#darkmode-toggle {
    display: none; /* hide checkbox */
}

#darkmode-toggle:checked + .track {
    background: linear-gradient(to bottom, #0d1117, #1a1a2e);
}
#darkmode-toggle:checked + .track .thumb {
    transform: translateX(32px);
}
#darkmode-toggle:checked + .track .sun {
    opacity: 0;
    transform: scale(0.8) rotate(-45deg);
}
#darkmode-toggle:checked + .track .moon {
    opacity: 1;
    transform: scale(1);
}
#darkmode-toggle:checked + .track .clouds {
    opacity: 0;
}
#darkmode-toggle:checked + .track .stars {
    opacity: 1;
    transition-delay: 0.2s;
}

/* === Dark Mode Overrides === */
body.dark-mode header { background: #1e1e1e !important; border-bottom: 1px solid #333 !important; }
body.dark-mode .navbar ul li a { color: #e4e4e4 !important; }
body.dark-mode .navbar ul li a:hover,
body.dark-mode .navbar ul li a.active { color: #00bcd4 !important; }
body.dark-mode .home { background: #121212 !important; color: #e4e4e4 !important; }
body.dark-mode .about { background: #121212 !important; color: #e4e4e4 !important; }
body.dark-mode .skills { background: #1a1a1a !important; color: #e4e4e4 !important; }
body.dark-mode .education { background: #121212 !important; }
body.dark-mode .education .box { background: #1e1e1e !important; border: 1px solid #333 !important; color: #e4e4e4 !important; }
body.dark-mode .experience { background: #121212 !important; }
body.dark-mode .experience .content { background: #1e1e1e !important; border: 1px solid #333 !important; color: #e4e4e4 !important; }
body.dark-mode .work { background: #1a1a1a !important; color: #e4e4e4 !important; }
body.dark-mode .certification { background: #121212 !important; color: #e4e4e4 !important; }
body.dark-mode .contact { background: #1a1a1a !important; color: #e4e4e4 !important; }
body.dark-mode input, body.dark-mode textarea { background: #222 !important; color: #e4e4e4 !important; border: 1px solid #444 !important; }
body.dark-mode .footer { background: #1e1e1e !important; color: #e4e4e4 !important; }
body.dark-mode #scroll-top { background: #333 !important; color: #fff !important; border: 1px solid #555 !important; }
/* Light mode default */
body {
  background: #ffffff;
  color: #111111;
}

/* Dark mode */
body.dark-mode {
  background: #111111;
  color: #ffffff;
}

/* Special fixes */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode p,
body.dark-mode a,
body.dark-mode span {
  color: #ffffff !important;
}
/* Force years inside education section to be white in dark mode */
body.dark-mode .education .box .content h4 {
    color: #ffffff !important;
}
/* ===== Footer Fix (Dark Mode Only) ===== */
body.dark-mode .footer .contact-info a,
body.dark-mode .footer .contact-info i,
body.dark-mode .footer .quick-links a {
    color: #00e5ff;   /* Neon blue like in 1st screenshot */
}

body.dark-mode .footer .designed-by a {
    color: #00e5ff;
    font-weight: 500;
}



/* ===== Certificates Section (Dark Mode) ===== */
body.dark-mode .certificate-card {
    background: #111 !important;
    color: #fff !important;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

body.dark-mode .certificate-card:hover {
    transform: translateY(-5px);
}

body.dark-mode .certificate-card h3 {
    color: #fff !important;
    font-weight: 600;
}

body.dark-mode .certificate-card p {
    color: #bbb !important;
}

body.dark-mode .certificate-card .btn-view {
    background: #000 !important;
    color: #fff !important;
    border: none;
    padding: 6px 14px;
    border-radius: 6px;
    transition: 0.3s;
}

body.dark-mode .certificate-card .btn-view:hover {
    background: #00e5ff !important;
    color: #000 !important;
}
/* Make footer & contact links blue in dark mode */
body.dark-mode .footer a,
body.dark-mode .footer i,
body.dark-mode .footer .contact-info a,
body.dark-mode .footer .quick-links a,
body.dark-mode .footer .designed-by a {
  color: #00e5ff !important;
}

body.dark-mode .footer a:hover,
body.dark-mode .footer .quick-links a:hover,
body.dark-mode .footer .designed-by a:hover {
  color: #5be1ff !important;
}
/* Special fixes (leave links out) */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode p,
body.dark-mode span {
  color: #ffffff !important;
}
/* === CONTACT: make the inner card dark in dark mode === */
body.dark-mode section.contact .row,
body.dark-mode .contact .row,
body.dark-mode .contact .container,
body.dark-mode .contact .content,
body.dark-mode .contact .box,
body.dark-mode .contact .card,
body.dark-mode .contact .wrapper {
  background: #161616 !important;      /* dark card */
  border: 1px solid #262626 !important; /* subtle border */
  border-radius: 16px !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.6) !important;
}

/* Inputs inside contact (robust selectors) */
body.dark-mode .contact input,
body.dark-mode .contact textarea,
body.dark-mode .contact .input-box input,
body.dark-mode .contact .input-box textarea,
body.dark-mode .contact .inputBox input,
body.dark-mode .contact .inputBox textarea {
  background: #222 !important;
  border: 1px solid #3a3a3a !important;
  color: #eaeaea !important;
}

body.dark-mode .contact input::placeholder,
body.dark-mode .contact textarea::placeholder {
  color: #9aa0a6 !important;
}

/* Submit button (dark with blue glow on hover) */
body.dark-mode .contact .btn,
body.dark-mode .contact button[type="submit"] {
  background: #0f0f10 !important;
  color: #ffffff !important;
  border: 1px solid #2a2a2a !important;
  border-radius: 8px !important;
  box-shadow: 0 0 12px rgba(0,229,255,.25) !important;
}

body.dark-mode .contact .btn:hover,
body.dark-mode .contact button[type="submit"]:hover {
  background: #00e5ff !important;
  color: #000 !important;
  box-shadow: 0 0 22px rgba(0,229,255,.6) !important;
}
/* Force override for dark mode project cards */
body.dark-mode .work .box-container .box {
  background-color: #1a1a1a !important; /* dark background */
  color: #fff !important; /* white text */
}

/* Title */
body.dark-mode .work .box-container .box h3 {
  color: #fff !important;
}

/* Subtext */
body.dark-mode .work .box-container .box p {
  color: #bfbfbf !important; /* light gray */
}

/* Buttons */
body.dark-mode .work .box-container .box .btn {
  background: #2a2a2a !important;
  color: #fff !important;
  border: 1px solid #444 !important;
}

body.dark-mode .work .box-container .box .btn:hover {
  background: #00e5ff !important; 
  color: #000 !important;
}
/* Force override for dark mode project cards */
body.dark-mode .work .box-container .box {
  background-color: #1a1a1a !important; /* dark background */
  color: #fff !important; /* white text */
}

/* Title */
body.dark-mode .work .box-container .box h3 {
  color: #fff !important;
}

/* Subtext */
body.dark-mode .work .box-container .box p {
  color: #bfbfbf !important; /* light gray */
}

/* Buttons */
body.dark-mode .work .box-container .box .btn {
  background: #2a2a2a !important;
  color: #fff !important;
  border: 1px solid #444 !important;
}

body.dark-mode .work .box-container .box .btn:hover {
  background: #00e5ff !important; 
  color: #000 !important;
}
/* ===== Certification Earned Cards (Dark Mode Fix with Hover) ===== */
body.dark-mode .certification .box,
body.dark-mode .certificate-card {
    background: #1a1a1a !important;
    border: 1px solid #333 !important;
    color: #ffffff !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

body.dark-mode .certification .box:hover,
body.dark-mode .certificate-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 6px 20px rgba(0, 229, 255, 0.3); /* neon cyan glow */
}

body.dark-mode .certification .box h3,
body.dark-mode .certificate-card h3 {
    color: #ffffff !important;
    font-weight: 600;
}

body.dark-mode .certification .box p,
body.dark-mode .certificate-card p {
    color: #ffffff !important;
}
/* Default (Light mode) */
#menu {
  color: #2b0a3d;   /* Dark purple for light mode */
  font-size: 28px;  /* Adjust size if needed */
  cursor: pointer;
  transition: color 0.3s ease;
}

/* Dark mode */
body.dark-mode #menu {
  color: #ffffff;   /* White for dark mode */
}