/* light-mode.css */

/* General background & text */
body.light-mode {
    background-color: #fdfdfd;
    color: #222222;
}

/* Header / Navigation */
/* Navbar Light Mode */
body.light-mode nav {
    background-color: #ffffff; /* white background */
    color: #000000; /* black text by default */
}

body.light-mode nav a {
    color: #000000; /* black links */
}

body.light-mode nav .logo {
    color: #000000; /* black logo text */
}

body.light-mode nav .hamburger div {
    background-color: #000000; /* black hamburger lines */
}

/* If nav has hover effects */
body.light-mode nav a:hover {
    color: #007BFF; /* optional: blue hover for links */
}

/* Light mode: Mobile menu (hamburger) */
body.light-mode nav .nav-links {
    background-color:#f5f5f5; /* White background */
}

body.light-mode nav .nav-links a {
    color: #000000; /* Black links */
}

body.light-mode nav .nav-links a:hover {
    color: #007BFF; /* Hover color */
}
body.light-mode nav .nav-links .dropdown-content{
     background-color: white;
}

body.light-mode nav .nav-links .dropdown > a {
    color: #000;   /* dark text for light mode */
}

body.light-mode nav .nav-links .dropdown > a:hover {
    color: #007BFF; /* accent hover color */
}


/* Hero Section */
body.light-mode .hero {
    background-color: #f8f8f8;
    color: #222222;
}

body.light-mode .hero h1 span {
    color: #007BFF; /* Example accent color */
}

/* About Section */
body.light-mode .about {
    background-color: #ffffff;
    color: #222222;
}

body.light-mode .about-btn {
    background-color: #007BFF;
    color: #ffffff;
}

/* Skills Section */
body.light-mode .skills {
    background-color: #f8f8f8;
    color: #222222;
}

body.light-mode .skill-box {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
}

/* Projects Section */
body.light-mode .projects {
    background-color: #ffffff;
    color: #222222;
}

body.light-mode .project-card {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
}

/* Timeline (Education & Experience) */
body.light-mode .timeline-item {
    background-color: #ffffff;
    border-left: 3px solid #007BFF;
    color: #222222;
}

/* Gallery Section */
body.light-mode .gallery {
    background-color: #f8f8f8;
    color: #222222;
}

body.light-mode .gallery-item {
    background-color: #ffffff;
    border: 1px solid #ddd;
}

/* Services Section */
body.light-mode .services {
    background-color: #ffffff;
    color: #222222;
}

body.light-mode .service-card {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
}

/* Checkout / Resume Section */
body.light-mode .checkout {
    background-color: #f8f8f8;
    color: #222222;
}

body.light-mode .cta-button {
    background-color: #007BFF;
    color: #ffffff;
}

/* Blog Section */
body.light-mode .blog {
    background-color: #ffffff;
    color: #222222;
}

body.light-mode .blog-card {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
}

/* Contact Form */
body.light-mode .contact {
    background-color: #f8f8f8;
    color: #222222;
}

body.light-mode .contact-form input,
body.light-mode .contact-form textarea,
body.light-mode .contact-form select {
    background-color: #ffffff;
    color: #222222;
    border: 1px solid #ccc;
}

body.light-mode .submit-btn {
    background-color: #007BFF;
    color: #ffffff;
}

/* Footer */
body.light-mode footer {
    background-color: #ffffff;
    color: #222222;
}

body.light-mode footer a {
    color: #007BFF;
}

/* Tech icons */
body.light-mode .tech-icon {
    color: #007BFF;
}

/* Optional: adjust links */
body.light-mode a {
    color: #007BFF;
}

body.light-mode a:hover {
    color: #0056b3;
}

/* Default navbar (dark mode) */
nav {
    background-color: #fdfdfd;
    color: #fff;
    transition: background-color 0.3s, color 0.3s;
}

/* Light mode navbar */
body.light-mode nav {
    background-color: #f5f5f5;  /* light background */
    color: #222;                 /* dark text */
}

/* Nav links */
nav .nav-links a {
    color: #fff;
    transition: color 0.3s;
}

body.light-mode nav .nav-links a {
    color: rgb(3, 3, 3); /* dark text for links in light mode */
}

/* Light mode skills glow */
body.light-mode .skill-box {
    background-color: #f9f9f9; /* light background */
    
}

body.light-mode .skill-name,
body.light-mode .skill-icon {
    color: #00bfff; /* neon color matches light background */
    
}

/* Hamburger lines */
nav .hamburger div {
    background-color: #fff;
    transition: background-color 0.3s;
}

body.light-mode nav .hamburger div {
    background-color: #222; /* dark lines for light mode */
}

/* Logo */
nav .logo {
    color: #fff;
    transition: color 0.3s;
}

body.light-mode nav .logo {
    color: #222;
}
/* Light mode adjustments for services */
body.light-mode .services {
    background-color: #f9f9f9; /* lighter background for services */
    color: #222; /* darker text for contrast */
}

body.light-mode .service-card {
    background-color: #fff; /* card background */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* subtle shadow */
    transition: all 0.3s ease;
}

body.light-mode .service-card h3 {
    color: #007acc; /* nice accent color for titles */
    font-weight: 600;
    text-shadow: none; /* remove dark mode shadows */
}

body.light-mode .service-card p {
    color: #444; /* readable description text */
}

body.light-mode .service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
/* Hero section text in light mode */
body.light-mode .hero .hero-content p {
    color: #333; /* dark gray for better contrast */
    text-shadow: none; /* remove any dark-mode shadow if present */
}