/* General Body Styles */
body {
    font-family: 'Consolas', monospace; /* A common monospace font that fits cyberpunk */
    background: var(--dark-bg); /* Use variable */
    color: var(--light-grey); /* Use variable */
    margin: 0;
    padding: 0;
    line-height: 1.6;
    overflow-x: hidden; /* Prevent horizontal scroll from glitch effects */
    position: relative; /* For glitch and scanline overlays */
    cursor: url('favicon-removebg-preview.cur'), auto;
    transition: background-color 0.5s ease, color 0.5s ease; /* Smooth transition for theme change */
}

/* Neon Colors - Dark Mode Defaults */
:root {
    --neon-pink: #ff00ff;
    --neon-blue: #00ffff;
    --dark-bg: #0d0d1a;
    --medium-bg: #1a1a2e;
    --light-grey: #e0e0e0;
    --glitch-bg-from: rgba(0, 255, 255, 0.05); /* Cyan */
    --glitch-bg-to: rgba(255, 0, 255, 0.05); /* Magenta */
    --container-border: rgba(0, 255, 255, 0.2);
    --container-shadow: rgba(0, 255, 255, 0.3);
    --form-border: rgba(255, 0, 255, 0.2);
    --form-shadow: rgba(255, 0, 255, 0.2);
    --input-bg: rgba(0, 0, 0, 0.4);
    --input-border: var(--neon-blue);
    --input-focus-shadow: rgba(255, 0, 255, 0.5);
    --submit-button-shadow: rgba(255, 0, 255, 0.5);
    --submit-button-hover-shadow: rgba(255, 0, 255, 0.7);
}

/* Light Mode Variables */
body.light-mode {
    --neon-pink: #cc00cc; /* Slightly darker pink for contrast */
    --neon-blue: #009999; /* Slightly darker blue for contrast */
    --dark-bg: #f0f0f0; /* Light background */
    --medium-bg: #ffffff; /* White background for container */
    --light-grey: #333333; /* Dark text */
    --glitch-bg-from: rgba(0, 255, 255, 0.02); /* Very subtle light glitch effect */
    --glitch-bg-to: rgba(255, 0, 255, 0.02);
    --container-border: rgba(0, 153, 153, 0.2); /* Teal border */
    --container-shadow: rgba(0, 153, 153, 0.1); /* Subtle teal shadow */
    --form-border: rgba(204, 0, 204, 0.2); /* Purple border */
    --form-shadow: rgba(204, 0, 204, 0.1); /* Subtle purple shadow */
    --input-bg: rgba(255, 255, 255, 0.8); /* Lighter input background */
    --input-border: var(--neon-blue);
    --input-focus-shadow: rgba(204, 0, 204, 0.3);
    --submit-button-shadow: rgba(204, 0, 204, 0.3);
    --submit-button-hover-shadow: rgba(204, 0, 204, 0.5);
}

/* Background Effects */
.glitch-overlay, .scanline-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Allows clicks to pass through */
    z-index: -1; /* Place behind content */
}

.glitch-overlay {
    background: linear-gradient(var(--glitch-bg-from), var(--glitch-bg-to)); /* Use variables */
    animation: background-glitch 10s infinite alternate;
}

@keyframes background-glitch {
    0% { transform: translate(0, 0); }
    25% { transform: translate(1px, -1px); }
    50% { transform: translate(-1px, 1px); }
    75% { transform: translate(1px, 1px); }
    100% { transform: translate(-1px, -1px); }
}

.scanline-overlay {
    background: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 1px,
        rgba(0, 0, 0, 0.1) 1px,
                                          rgba(0, 0, 0, 0.1) 2px
    );
    animation: scanline-shimmer 0.3s infinite linear;
}

@keyframes scanline-shimmer {
    from { background-position: 0 0; }
    to { background-position: 0 100%; }
}

body.scanline-off .scanline-overlay {
    display: none;
}

/* Main Layout */
.main-header {
    text-align: center;
    padding: 20px;
    position: relative;
    z-index: 2; /* Ensure header is above overlays and content */
    display: flex; /* To align logo and buttons */
    justify-content: space-between; /* Space out items */
    align-items: center; /* Vertically align items */
    padding: 20px 40px; /* Add some horizontal padding */
}

/* Updated logo style for img tag */
#site-logo {
display: block; /* Ensure it takes up its own line */
/* margin: 0 auto; Removed margin auto because of flexbox */
max-width: 250px; /* Adjust max-width as needed */
height: auto;
filter: drop-shadow(0 0 8px var(--neon-pink)) drop-shadow(0 0 15px var(--neon-pink)); /* Initial glow */
transition: filter 0.3s ease; /* Smooth transition for hover effect */
animation: shimmer 3s infinite ease-in-out; /* Apply shimmer */
}

/* Shimmer animation specifically for the image logo */
@keyframes shimmer {
    0% { filter: drop-shadow(0 0 8px var(--neon-pink)) drop-shadow(0 0 15px var(--neon-pink)); }
    50% { filter: drop-shadow(0 0 12px var(--neon-pink)) drop-shadow(0 0 25px var(--neon-pink)); }
    100% { filter: drop-shadow(0 0 8px var(--neon-pink)) drop-shadow(0 0 15px var(--neon-pink)); }
}

#site-logo:hover {
filter: drop-shadow(0 0 15px var(--neon-blue)) drop-shadow(0 0 30px var(--neon-blue)); /* Stronger glow on hover */
}

/* Theme Toggle Button Style */
#theme-toggle {
background-color: var(--neon-blue);
color: var(--dark-bg);
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 1rem;
font-weight: bold;
text-shadow: none; /* No text shadow for buttons by default */
box-shadow: 0 0 10px var(--neon-blue);
transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
margin-left: 20px; /* Space from logo */
}

#theme-toggle:hover {
background-color: var(--neon-pink);
box-shadow: 0 0 15px var(--neon-pink);
color: var(--dark-bg);
}


.container {
    max-width: 900px;
    margin: 40px auto;
    padding: 0 20px;
    background-color: var(--medium-bg); /* Use variable */
    border: 1px solid var(--container-border); /* Use variable */
    box-shadow: 0 0 20px var(--container-shadow); /* Use variable */
    border-radius: 8px;
    padding: 40px;
    position: relative;
    z-index: 1; /* Ensure content is above overlays */
    transition: background-color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease; /* Smooth transition */
}

/* Text Styling */
h1, h2, h3, h4, h5, h6 {
    color: var(--neon-blue); /* Use variable */
    text-shadow: 0 0 5px var(--neon-blue), 0 0 10px var(--neon-blue); /* Use variable */
    margin-bottom: 20px;
    font-weight: bold;
    transition: color 0.5s ease, text-shadow 0.5s ease; /* Smooth transition */
}

.tagline {
    font-size: 2.2rem;
    text-align: center;
    color: var(--neon-blue); /* Use variable */
    text-shadow: 0 0 5px var(--neon-blue), 0 0 10px var(--neon-blue); /* Use variable */
    margin-bottom: 15px;
    transition: color 0.5s ease, text-shadow 0.5s ease; /* Smooth transition */
}

.subtitle {
    font-size: 1.5rem;
    text-align: center;
    color: var(--light-grey); /* Use variable */
    margin-bottom: 30px;
    font-style: italic;
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.5);
    transition: color 0.5s ease; /* Smooth transition */
}

.info-section p, .info-section ul {
    font-size: 1.1rem;
    margin-bottom: 15px;
    color: var(--light-grey); /* Use variable */
    transition: color 0.5s ease; /* Smooth transition */
}

.key-points li {
    margin-bottom: 10px;
    list-style: none; /* Remove default bullet points */
    display: flex;
    align-items: center;
}

.key-points li i {
    margin-right: 10px;
    font-size: 1.2rem;
}

.neon-pink {
    color: var(--neon-pink);
    text-shadow: 0 0 5px var(--neon-pink);
    transition: color 0.5s ease, text-shadow 0.5s ease; /* Smooth transition */
}

.neon-blue {
    color: var(--neon-blue);
    text-shadow: 0 0 5px var(--neon-blue);
    transition: color 0.5s ease, text-shadow 0.5s ease; /* Smooth transition */
}

.call-to-action {
    font-size: 1.3rem;
    text-align: center;
    margin-top: 40px;
    color: var(--neon-pink); /* Use variable */
    font-weight: bold;
    text-shadow: 0 0 5px var(--neon-pink), 0 0 10px var(--neon-pink); /* Use variable */
    transition: color 0.5s ease, text-shadow 0.5s ease; /* Smooth transition */
}

/* Glitch Effect for Text */
.glitch {
    position: relative;
    display: inline-block; /* Essential for glitch effect on h1 */
    color: var(--neon-blue); /* Ensure text color is tied to theme */
}

.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--medium-bg); /* Ensure glitch overlays match current background */
    overflow: hidden;
    color: var(--neon-blue); /* Ensure color matches the main text */
    transition: background-color 0.5s ease; /* Smooth transition for glitch background */
}

.glitch::before {
    left: 2px;
    text-shadow: -2px 0 var(--neon-pink);
    animation: glitch-anim-1 2s infinite alternate-reverse;
}

.glitch::after {
    left: -2px;
    text-shadow: -2px 0 var(--neon-blue);
    animation: glitch-anim-2 2s infinite alternate-reverse;
}

@keyframes glitch-anim-1 {
    0% { clip: rect(20px, 9999px, 50px, 0); }
    25% { clip: rect(70px, 9999px, 100px, 0); }
    50% { clip: rect(30px, 9999px, 80px, 0); }
    75% { clip: rect(90px, 9999px, 120px, 0); }
    100% { clip: rect(0px, 9999px, 30px, 0); }
}

@keyframes glitch-anim-2 {
    0% { clip: rect(10px, 9999px, 40px, 0); }
    25% { clip: rect(60px, 9999px, 90px, 0); }
    50% { clip: rect(20px, 9999px, 70px, 0); }
    75% { clip: rect(80px, 9999px, 110px, 0); }
    100% { clip: rect(5px, 9999px, 35px, 0); }
}

/* Contact Form Styles */
.contact-section {
    margin-top: 50px;
}

.section-title {
    text-align: center;
    margin-bottom: 30px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: var(--dark-bg); /* Use variable */
    padding: 30px;
    border-radius: 8px;
    border: 1px solid var(--form-border); /* Use variable */
    box-shadow: 0 0 15px var(--form-shadow); /* Use variable */
    transition: background-color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease; /* Smooth transition */
}

.form-group label {
    color: var(--neon-blue); /* Use variable */
    text-shadow: 0 0 3px var(--neon-blue); /* Use variable */
    display: block;
    margin-bottom: 5px;
    transition: color 0.5s ease, text-shadow 0.5s ease; /* Smooth transition */
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
    width: calc(100% - 22px); /* Account for padding and border */
    padding: 10px;
    border: 1px solid var(--input-border); /* Use variable */
    background-color: var(--input-bg); /* Use variable */
    color: var(--light-grey); /* Use variable */
    border-radius: 4px;
    font-size: 1rem;
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--neon-pink); /* Use variable */
    box-shadow: 0 0 8px var(--input-focus-shadow); /* Use variable */
}

.submit-button {
    background-color: var(--neon-pink); /* Use variable */
    color: var(--dark-bg); /* Use variable */
    border: none;
    padding: 12px 25px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 0 10px var(--submit-button-shadow); /* Use variable */
    transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, filter 0.3s ease; /* Smooth transition */
}

.submit-button:hover {
    background-color: var(--neon-pink); /* Keep the same variable, let the color be defined by the root */
    filter: brightness(1.2); /* A subtle brightness increase for hover */
    box-shadow: 0 0 15px var(--submit-button-hover-shadow); /* Use variable */
}

.form-message {
    padding: 10px;
    border-radius: 4px;
    margin-top: 15px;
    font-weight: bold;
    text-align: center;
    display: none; /* Hidden by default, shown by JS */
}

.form-message.success {
    background-color: rgba(0, 255, 0, 0.1);
    color: #00ff00;
    border: 1px solid #00ff00;
    text-shadow: 0 0 5px rgba(0, 255, 0, 0.7);
}

.form-message.error {
    background-color: rgba(255, 0, 0, 0.1);
    color: #ff0000;
    border: 1px solid #ff0000;
    text-shadow: 0 0 5px rgba(255, 0, 0, 0.7);
}

/* Footer */
.main-footer {
    text-align: center;
    padding: 30px 20px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.9rem;
    margin-top: 40px;
    transition: color 0.5s ease; /* Smooth transition */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .container {
        margin: 20px auto;
        padding: 20px;
    }

    .tagline {
        font-size: 1.8rem;
    }

    .subtitle {
        font-size: 1.2rem;
    }

    .info-section p, .info-section ul {
        font-size: 1rem;
    }

    .main-header {
        flex-direction: column;
        padding: 20px;
    }

    #site-logo {
    margin-bottom: 20px;
    }

    #theme-toggle {
    margin-left: 0;
    margin-top: 10px;
    }
}

/* Add this to your styles.css */

.main-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 25px; /* Space between navigation items */
}

.main-nav a {
    color: var(--light-grey);
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.main-nav a:hover {
    color: var(--neon-pink);
    text-shadow: 0 0 8px var(--neon-pink), 0 0 15px var(--neon-pink);
}

/* Adjust header for navigation */
.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    position: relative;
    z-index: 2;
}

/* Responsive adjustments for header and nav */
@media (max-width: 768px) {
    .main-header {
        flex-direction: column;
        padding: 20px;
    }

    .main-nav ul {
        flex-direction: column;
        gap: 10px;
        margin-top: 20px;
        text-align: center;
    }

    .main-nav a {
        padding: 5px 0;
    }

    #site-logo {
    margin-bottom: 20px;
    }

    #theme-toggle,
    .main-header button:last-of-type { /* Adjust spacing for buttons */
        margin-left: 0;
        margin-top: 10px;
    }
}

/* Add to styles.css (at the end or in an appropriate section) */

/* Specific styles for the About page */
.about-section {
    padding: 20px 0;
}

.about-content h3 {
    margin-top: 30px;
    margin-bottom: 15px;
    font-size: 1.6rem;
    color: var(--neon-blue); /* Use consistent neon blue */
    text-shadow: 0 0 4px var(--neon-blue), 0 0 8px var(--neon-blue);
    transition: color 0.5s ease, text-shadow 0.5s ease;
}

.about-content p {
    margin-bottom: 15px;
    line-height: 1.8;
}

.about-content ul.key-points {
    margin-left: 20px; /* Indent lists */
    list-style: none; /* Remove default bullets */
    padding-left: 0;
}

.about-content ul.key-points li {
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start; /* Align icon and text at the top */
}

.about-content ul.key-points li i {
    margin-right: 10px;
    font-size: 1.3rem;
    margin-top: 2px; /* Slight adjustment for icon alignment */
}

.founder-info {
    margin-top: 20px;
    padding: 15px;
    border: 1px solid var(--container-border);
    border-radius: 8px;
    background-color: var(--dark-bg); /* Use dark-bg for card-like sections */
    box-shadow: 0 0 10px var(--container-shadow);
    transition: background-color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}

.founder-tagline {
    font-style: italic;
    font-weight: bold;
    color: var(--neon-pink);
    text-shadow: 0 0 3px var(--neon-pink);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

.founder-tagline i {
    margin-right: 10px;
    font-size: 1.4rem;
}

/* Neon Link Style */
.neon-link {
    color: var(--neon-blue);
    text-decoration: none;
    text-shadow: 0 0 5px var(--neon-blue);
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.neon-link:hover {
    color: var(--neon-pink);
    text-shadow: 0 0 8px var(--neon-pink), 0 0 15px var(--neon-pink);
}


/* Verbal Glitchcore / Dynamic Highlight Styling */
.highlight-cyan {
    color: var(--dark-bg); /* Dark text on highlight */
    background-color: var(--neon-blue); /* Cyan background */
    padding: 2px 5px;
    border-radius: 3px;
    display: inline-block;
    box-shadow: 0 0 8px var(--neon-blue), 0 0 15px var(--neon-blue);
    transition: background-color 0.5s ease, color 0.5s ease, box-shadow 0.5s ease;
    /* Initial state for slow load/reveal effect */
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out, background-color 0.5s ease, color 0.5s ease, box-shadow 0.5s ease;
}

.highlight-magenta {
    color: var(--dark-bg); /* Dark text on highlight */
    background-color: var(--neon-pink); /* Magenta background */
    padding: 2px 5px;
    border-radius: 3px;
    display: inline-block;
    box-shadow: 0 0 8px var(--neon-pink), 0 0 15px var(--neon-pink);
    transition: background-color 0.5s ease, color 0.5s ease, box-shadow 0.5s ease;
    /* Initial state for slow load/reveal effect */
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out, background-color 0.5s ease, color 0.5s ease, box-shadow 0.5s ease;
}

/* Specific highlight styles for light mode */
body.light-mode .highlight-cyan {
    background-color: var(--neon-blue); /* Cyan background */
    color: var(--medium-bg); /* White text on highlight */
    box-shadow: 0 0 5px var(--neon-blue); /* Subtle shadow */
    text-shadow: none; /* No text shadow on highlighted text */
}

body.light-mode .highlight-magenta {
    background-color: var(--neon-pink); /* Magenta background */
    color: var(--medium-bg); /* White text on highlight */
    box-shadow: 0 0 5px var(--neon-pink); /* Subtle shadow */
    text-shadow: none; /* No text shadow on highlighted text */
}

/* Class to reveal the highlight after delay */
.highlight-visible {
    opacity: 1;
    transform: scale(1);
}

/* Projects Section Styling */
.projects-section {
    padding: 20px 0;
}

.projects-grid {
    display: grid;
    /* Responsive columns: starts with 1fr, then min 250px up to 4 columns */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px; /* Space between grid items */
    padding: 20px;
}

.project-item {
    background-color: var(--dark-bg); /* Use dark-bg for the card background */
    border: 1px solid var(--container-border);
    border-radius: 8px;
    overflow: hidden; /* Ensures image corners are rounded with parent */
    text-decoration: none; /* Remove underline from the link */
    color: var(--light-grey); /* Default text color for the card */
    position: relative; /* For pop-out effect and potentially feature overlay */
    box-shadow: 0 0 10px var(--container-shadow);
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out, background-color 0.5s ease, border-color 0.5s ease;
    display: flex; /* Flex container for internal content */
    flex-direction: column; /* Stack image and info vertically */
}

.project-item:hover {
    transform: translateY(-5px) scale(1.02); /* Pop out effect */
    box-shadow: 0 5px 20px var(--neon-pink); /* Stronger shadow on hover */
}

.project-item img {
    width: 100%;
    height: 200px; /* Fixed height for image to give a consistent look, will make them look 'not same size' due to content below */
    object-fit: cover; /* Cover the area, cropping if necessary */
    display: block;
    border-bottom: 1px solid var(--container-border);
    transition: transform 0.3s ease-in-out;
}

.project-item:hover img {
    transform: scale(1.05); /* Slight zoom on image on hover */
}

.project-info {
    padding: 15px;
    flex-grow: 1; /* Allows this section to take up available space */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Push features down if content is short */
    position: relative; /* For features to hide/show */
}

.project-name {
    font-size: 1.4rem;
    color: var(--neon-blue);
    text-shadow: 0 0 3px var(--neon-blue);
    margin-top: 0;
    margin-bottom: 10px;
    text-align: center;
    transition: color 0.5s ease, text-shadow 0.5s ease;
}

.project-features {
    font-size: 0.95rem;
    color: var(--light-grey);
    line-height: 1.5;
    margin-top: auto; /* Pushes features to the bottom of the project-info flex container */
    opacity: 0; /* Hidden by default */
    max-height: 0; /* Hidden by default */
    overflow: hidden; /* Hide overflow content */
    transition: opacity 0.3s ease-out, max-height 0.3s ease-out; /* Smooth transition */
}

.project-item:hover .project-features {
    opacity: 1; /* Show on hover */
    max-height: 100px; /* Or a value large enough to show all text, e.g., content-based max-height */
}

.project-features span {
    font-weight: bold;
    color: var(--neon-pink);
    text-shadow: 0 0 2px var(--neon-pink);
    transition: color 0.5s ease, text-shadow 0.5s ease;
}

/* Light Mode Adjustments for Project Cards */
body.light-mode .project-item {
    background-color: var(--medium-bg); /* Lighter background */
    border-color: var(--container-border);
    box-shadow: 0 0 10px var(--container-shadow);
}

body.light-mode .project-item:hover {
    box-shadow: 0 5px 20px var(--neon-pink); /* Subtle glow for light mode hover */
}

/* Responsive adjustments for projects grid */
@media (max-width: 768px) {
    .projects-grid {
        grid-template-columns: 1fr; /* Single column on smaller screens */
        padding: 10px;
        gap: 20px;
    }
}

/* Project Detail Page Styling */
.project-detail-section {
    padding: 20px 0;
}

.project-overview {
    text-align: center;
    margin-bottom: 40px;
}

.project-tagline {
    font-size: 1.3rem;
    color: var(--neon-pink);
    font-style: italic;
    text-shadow: 0 0 5px var(--neon-pink);
    transition: color 0.5s ease, text-shadow 0.5s ease;
}

.project-image-results {
    margin: 40px auto;
    max-width: 90%;
    border: 2px solid var(--neon-blue);
    box-shadow: 0 0 25px var(--neon-blue);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.project-image-results img {
    width: 100%;
    height: auto;
    display: block;
}

.project-image-results .image-caption {
    text-align: center;
    font-size: 0.9rem;
    color: var(--light-grey);
    padding: 10px;
    background-color: var(--medium-bg);
    transition: background-color 0.5s ease, color 0.5s ease;
}

.project-info-blocks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 50px;
    margin-bottom: 50px;
}

.project-info-blocks .info-block {
    background-color: var(--dark-bg);
    padding: 25px;
    border-radius: 8px;
    border: 1px solid var(--form-border); /* Re-using form border for consistency */
    box-shadow: 0 0 15px var(--form-shadow);
    transition: background-color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}

.project-info-blocks .info-block p,
.project-info-blocks .info-block ul {
    font-size: 1rem;
    color: var(--light-grey);
    line-height: 1.7;
}

.project-live-link {
    text-align: center;
    margin-top: 60px;
    margin-bottom: 40px;
    padding: 30px;
    background-color: var(--dark-bg);
    border: 1px solid var(--neon-pink);
    box-shadow: 0 0 20px var(--neon-pink);
    border-radius: 8px;
    transition: background-color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}

.live-project-button {
    display: inline-block;
    background-color: var(--neon-pink);
    color: var(--dark-bg);
    border: none;
    padding: 12px 30px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 0 10px var(--neon-pink);
    transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, filter 0.3s ease;
    margin-top: 20px;
    text-decoration: none; /* Remove underline */
}

.live-project-button i {
    margin-right: 10px;
}

.live-project-button:hover {
    filter: brightness(1.2);
    box-shadow: 0 0 15px var(--neon-blue), 0 0 25px var(--neon-blue); /* Stronger glow with blue */
    background-color: var(--neon-blue);
    color: var(--dark-bg);
}

.small-text {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 10px;
    transition: color 0.5s ease;
}

.back-to-projects-container {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 30px;
}

.back-button {
    display: inline-block;
    font-size: 1.1rem;
    padding: 10px 20px;
    border: 1px solid var(--neon-blue);
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    color: var(--neon-blue); /* Default neon blue */
    box-shadow: 0 0 8px var(--neon-blue);
}

.back-button i {
    margin-right: 8px;
}

.back-button:hover {
    background-color: var(--neon-blue);
    color: var(--dark-bg); /* Text becomes dark on hover */
    box-shadow: 0 0 15px var(--neon-pink);
    border-color: var(--neon-pink);
}

/* Light Mode Adjustments for Project Detail Page */
body.light-mode .project-image-results {
    border-color: var(--neon-pink); /* Light mode uses pink border */
    box-shadow: 0 0 15px var(--neon-pink); /* Subtle pink glow */
}

body.light-mode .project-image-results .image-caption {
    background-color: var(--light-grey); /* Lighter background */
    color: var(--light-grey);
}

body.light-mode .project-info-blocks .info-block {
    background-color: var(--medium-bg); /* Lighter background */
    border-color: var(--form-border);
    box-shadow: 0 0 10px var(--form-shadow);
}

body.light-mode .project-live-link {
    background-color: var(--medium-bg);
    border-color: var(--neon-blue);
    box-shadow: 0 0 15px var(--neon-blue);
}

body.light-mode .live-project-button {
    background-color: var(--neon-blue);
    color: var(--medium-bg);
    box-shadow: 0 0 8px var(--neon-blue);
}

body.light-mode .live-project-button:hover {
    background-color: var(--neon-pink);
    color: var(--medium-bg);
    box-shadow: 0 0 15px var(--neon-pink);
}

/* Responsive adjustments for project detail */
@media (max-width: 768px) {
    .project-info-blocks {
        grid-template-columns: 1fr; /* Stack info blocks on mobile */
        gap: 20px;
    }

    .project-image-results {
        max-width: 100%;
        margin: 20px auto;
    }

    .live-project-button {
        padding: 10px 20px;
        font-size: 1rem;
    }
}

/* Contact Page Enhancements */
.direct-contact-options {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 40px;
    background-color: var(--dark-bg);
    padding: 25px;
    border-radius: 8px;
    border: 1px solid rgba(0, 255, 255, 0.2); /* Subtle neon blue border */
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.2); /* Neon blue glow */
    transition: background-color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}

.direct-contact-options p {
    font-size: 1.15rem;
    margin-bottom: 15px;
    color: var(--light-grey);
    display: flex; /* For icon and text alignment */
    align-items: center;
    justify-content: center; /* Center the content within the flex item */
    gap: 10px; /* Space between icon and text */
}

.direct-contact-options p:last-child {
    margin-bottom: 0; /* No bottom margin for the last paragraph */
}

.direct-contact-options i {
    font-size: 1.7rem; /* Larger icons */
    text-shadow: 0 0 5px currentColor; /* Glow based on icon color */
}

.neon-link {
    color: var(--neon-pink);
    text-decoration: none;
    text-shadow: 0 0 5px var(--neon-pink);
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.neon-link:hover {
    color: var(--neon-blue);
    text-shadow: 0 0 8px var(--neon-blue), 0 0 15px var(--neon-blue);
}

.muted-text {
    color: rgba(255, 255, 255, 0.5); /* Semi-transparent white for "Coming Soon" */
    font-style: italic;
    font-size: 0.9em;
    transition: color 0.5s ease;
}

/* Light Mode Adjustments for Direct Contact Options */
body.light-mode .direct-contact-options {
    background-color: var(--medium-bg); /* Lighter background */
    border-color: rgba(255, 0, 255, 0.3); /* Pink border in light mode */
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.3); /* Pink glow in light mode */
}

body.light-mode .neon-link {
    color: var(--neon-blue); /* Blue in light mode */
    text-shadow: 0 0 5px var(--neon-blue);
}

body.light-mode .neon-link:hover {
    color: var(--neon-pink); /* Pink on hover in light mode */
    text-shadow: 0 0 8px var(--neon-pink), 0 0 15px var(--neon-pink);
}

body.light-mode .muted-text {
    color: rgba(0, 0, 0, 0.5); /* Darker muted text in light mode */
}

/* Responsive adjustments for direct contact options */
@media (max-width: 480px) {
    .direct-contact-options p {
        flex-direction: column; /* Stack icon and text on very small screens */
        gap: 5px;
        text-align: center;
    }
}

/* 404 Page Specific Styling */
.page-404-content {
    text-align: center;
    padding: 60px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--header-height) - var(--footer-height)); /* Ensure content pushes footer down */
    /* Assuming --header-height and --footer-height are defined or you approximate */
}

.404-heading {
    font-size: 4rem; /* Larger for impact */
    margin-bottom: 20px;
    color: var(--neon-pink); /* Use a vibrant color */
    text-shadow: 0 0 15px var(--neon-pink), 0 0 25px var(--neon-pink);
    transition: color 0.5s ease, text-shadow 0.5s ease;
}

.404-subheading {
    font-size: 2rem;
    color: var(--neon-blue);
    text-shadow: 0 0 10px var(--neon-blue);
    margin-bottom: 30px;
    transition: color 0.5s ease, text-shadow 0.5s ease;
}

.404-message {
    font-size: 1.1rem;
    color: var(--light-grey);
    max-width: 600px;
    margin: 0 auto 20px auto; /* Center paragraph and add bottom margin */
    line-height: 1.8;
}

.404-actions {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on small screens */
    gap: 20px; /* Space between buttons */
    justify-content: center;
}

.neon-button-404 {
    display: inline-flex; /* Use flex to align icon and text */
    align-items: center;
    justify-content: center;
    background-color: transparent; /* Start transparent */
    color: var(--neon-blue);
    border: 2px solid var(--neon-blue);
    padding: 15px 30px;
    border-radius: 5px;
    font-size: 1.1rem;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none; /* Remove underline for links */
    cursor: pointer;
    box-shadow: 0 0 10px var(--neon-blue);
    transition: all 0.3s ease-in-out;
}

.neon-button-404 i {
    margin-right: 10px;
    font-size: 1.2em; /* Make icon slightly larger */
    text-shadow: 0 0 5px currentColor;
}

.neon-button-404:hover {
    background-color: var(--neon-blue); /* Fill with blue on hover */
    color: var(--dark-bg); /* Text becomes dark */
    border-color: var(--neon-pink); /* Border shifts to pink */
    box-shadow: 0 0 15px var(--neon-blue), 0 0 25px var(--neon-pink); /* Combined glow */
    transform: translateY(-3px) scale(1.02);
}

/* Light Mode Adjustments for 404 Page */
body.light-mode .404-heading {
    color: var(--neon-blue); /* Blue in light mode */
    text-shadow: 0 0 15px var(--neon-blue), 0 0 25px var(--neon-blue);
}

body.light-mode .404-subheading {
    color: var(--neon-pink); /* Pink in light mode */
    text-shadow: 0 0 10px var(--neon-pink);
}

body.light-mode .neon-button-404 {
    color: var(--neon-pink); /* Pink border/text in light mode */
    border-color: var(--neon-pink);
    box-shadow: 0 0 10px var(--neon-pink);
}

body.light-mode .neon-button-404:hover {
    background-color: var(--neon-pink);
    color: var(--medium-bg); /* Lighter bg for text */
    border-color: var(--neon-blue);
    box-shadow: 0 0 15px var(--neon-pink), 0 0 25px var(--neon-blue);
}

/* Responsive adjustments for 404 page */
@media (max-width: 768px) {
    .404-heading {
        font-size: 3rem;
    }
    .404-subheading {
        font-size: 1.5rem;
    }
    .404-message {
        font-size: 1rem;
    }
    .neon-button-404 {
        width: 100%; /* Full width buttons on small screens */
        padding: 12px 20px;
        font-size: 1rem;
    }
}

/* Process Section CTA Button */
.process-section-cta {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 60px; /* Space before next sections/footer */
}

/* Base button style (can be shared with other buttons) */
.neon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    color: var(--neon-blue); /* Default button color */
    border: 2px solid var(--neon-blue);
    padding: 15px 30px;
    border-radius: 5px;
    font-size: 1.1rem;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 0 10px var(--neon-blue);
    transition: all 0.3s ease-in-out;
}

.neon-button:hover {
    background-color: var(--neon-blue);
    color: var(--dark-bg);
    border-color: var(--neon-pink);
    box-shadow: 0 0 15px var(--neon-blue), 0 0 25px var(--neon-pink);
    transform: translateY(-3px) scale(1.02);
}

body.light-mode .neon-button {
    color: var(--neon-pink);
    border-color: var(--neon-pink);
    box-shadow: 0 0 10px var(--neon-pink);
}

body.light-mode .neon-button:hover {
    background-color: var(--neon-pink);
    color: var(--medium-bg);
    border-color: var(--neon-blue);
    box-shadow: 0 0 15px var(--neon-pink), 0 0 25px var(--neon-blue);
}


/* Modal Overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Dark, semi-transparent background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* On top of everything */
    opacity: 1; /* Default to visible for transition, will be controlled by JS 'hidden' class */
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.hidden {
    opacity: 0;
    visibility: hidden;
}

/* Modal Content */
.modal-content {
    background-color: var(--dark-bg);
    padding: 40px;
    border-radius: 10px;
    border: 2px solid var(--neon-blue);
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.4);
    max-width: 700px;
    width: 90%; /* Responsive width */
    max-height: 90vh; /* Max height to prevent overflow on small screens */
    overflow-y: auto; /* Enable scrolling for long content */
    position: relative;
    transform: scale(1);
    transition: transform 0.3s ease-out, background-color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}

.modal-overlay.hidden .modal-content {
    transform: scale(0.95); /* Slight scale down when hidden for transition */
}


/* Modal Title */
.modal-title {
    font-size: 2.5rem;
    color: var(--neon-pink);
    text-shadow: 0 0 10px var(--neon-pink);
    margin-bottom: 30px;
    text-align: center;
}

/* Process List Styling */
.process-list {
    list-style: none; /* Remove default list bullets */
    padding: 0;
    margin: 0;
}

.process-list li {
    background-color: var(--medium-bg);
    padding: 20px;
    margin-bottom: 20px;
    border-left: 5px solid var(--neon-blue);
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.1);
    transition: background-color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}

.process-list li:last-child {
    margin-bottom: 0;
}

.process-list li strong {
    font-size: 1.3rem;
    color: var(--neon-blue);
    display: flex; /* For icon alignment */
    align-items: center;
    margin-bottom: 10px;
    text-shadow: 0 0 5px var(--neon-blue);
    transition: color 0.5s ease, text-shadow 0.5s ease;
}

.process-list li strong i {
    margin-right: 10px;
    font-size: 1.5rem;
    text-shadow: 0 0 5px currentColor;
}

.process-list li p {
    font-size: 1rem;
    color: var(--light-grey);
    line-height: 1.7;
}

/* Modal Close Button */
.modal-close-button {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: none;
    font-size: 2rem;
    color: var(--neon-pink);
    cursor: pointer;
    transition: color 0.3s ease, text-shadow 0.3s ease;
    text-shadow: 0 0 5px var(--neon-pink);
}

.modal-close-button:hover {
    color: var(--neon-blue);
    text-shadow: 0 0 10px var(--neon-blue);
}

/* Light Mode Adjustments for Modal */
body.light-mode .modal-content {
    background-color: var(--medium-bg);
    border-color: var(--neon-pink);
    box-shadow: 0 0 30px rgba(255, 0, 255, 0.4);
}

body.light-mode .modal-title {
    color: var(--neon-blue);
    text-shadow: 0 0 10px var(--neon-blue);
}

body.light-mode .process-list li {
    background-color: rgba(0, 0, 0, 0.1); /* Lighter background in light mode */
    border-left-color: var(--neon-pink);
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.1);
}

body.light-mode .process-list li strong {
    color: var(--neon-pink);
    text-shadow: 0 0 5px var(--neon-pink);
}

body.light-mode .modal-close-button {
    color: var(--neon-blue);
    text-shadow: 0 0 5px var(--neon-blue);
}

body.light-mode .modal-close-button:hover {
    color: var(--neon-pink);
    text-shadow: 0 0 10px var(--neon-pink);
}

/* Responsive adjustments for modal */
@media (max-width: 768px) {
    .modal-content {
        padding: 30px 20px;
        margin: 20px; /* Add some margin on smaller screens */
    }

    .modal-title {
        font-size: 2rem;
    }

    .process-list li strong {
        font-size: 1.2rem;
    }
    .process-list li p {
        font-size: 0.95rem;
    }
}

/* Testimonials Section */
.testimonials-container {
    display: grid; /* Use CSS Grid for layout */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive columns */
    gap: 30px; /* Space between testimonials */
    margin-top: 40px;
    margin-bottom: 60px; /* Space above the next section */
}

.testimonial-item {
    background-color: var(--medium-bg); /* Slightly lighter background for the card */
    padding: 30px;
    border-radius: 10px;
    border: 2px solid var(--neon-blue); /* Neon border */
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.2); /* Subtle glow */
    transition: all 0.3s ease-in-out;
}

.testimonial-item:hover {
    transform: translateY(-5px); /* Lift effect on hover */
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.4), 0 0 30px rgba(255, 0, 255, 0.3); /* Enhanced glow */
    border-color: var(--neon-pink); /* Border color change on hover */
}

.testimonial-quote {
    font-size: 1.15rem;
    line-height: 1.8;
    color: var(--light-grey); /* Lighter text for readability */
    margin-bottom: 20px;
    font-style: italic; /* Emphasize the quote */
    position: relative;
    padding-left: 20px; /* Space for quote icon */
}

/* Add a subtle quote icon or symbol before the quote */
.testimonial-quote::before {
    content: '“'; /* Fancy opening quote */
    font-family: 'Georgia', serif; /* A classic serif for quotes */
    font-size: 3rem;
    color: var(--neon-pink);
    position: absolute;
    left: 0;
    top: -10px;
    line-height: 1;
    text-shadow: 0 0 8px var(--neon-pink);
}

.testimonial-author {
    font-size: 1rem;
    font-weight: bold;
    color: var(--neon-blue); /* Neon color for author */
    text-align: right; /* Align author to the right */
    text-shadow: 0 0 5px var(--neon-blue);
}

/* Light Mode Adjustments for Testimonials */
body.light-mode .testimonial-item {
    background-color: rgba(0, 0, 0, 0.1); /* Slightly transparent dark bg in light mode */
    border-color: var(--neon-pink); /* Pink border in light mode */
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.2); /* Pink glow */
}

body.light-mode .testimonial-item:hover {
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.4), 0 0 30px rgba(0, 255, 255, 0.3); /* Blue/pink glow */
    border-color: var(--neon-blue); /* Blue border on hover in light mode */
}

body.light-mode .testimonial-quote::before {
    color: var(--neon-blue); /* Blue quote icon in light mode */
    text-shadow: 0 0 8px var(--neon-blue);
}

body.light-mode .testimonial-author {
    color: var(--neon-pink); /* Pink author in light mode */
    text-shadow: 0 0 5px var(--neon-pink);
}

/* Responsive adjustments for testimonials */
@media (max-width: 768px) {
    .testimonials-container {
        grid-template-columns: 1fr; /* Stack testimonials on small screens */
    }
    .testimonial-item {
        padding: 25px;
    }
    .testimonial-quote {
        font-size: 1.05rem;
    }
}

/* CTA Button Containers for index.html */
.cta-button-container,
.cta-button-container-mid {
    text-align: center; /* Center the buttons */
    margin-top: 40px;   /* Space above */
    margin-bottom: 40px; /* Space below */
}

/* Adjust margin for the mid-section button if needed */
.cta-button-container-mid {
    margin-top: 25px;
    margin-bottom: 25px;
}

/* NEW: Magenta Neon Button Styles */
.neon-button-magenta {
    display: inline-block;
    padding: 12px 25px;
    margin: 10px 0;
    font-size: 1.1rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--neon-pink); /* Magenta text */
    background: transparent;
    border: 2px solid var(--neon-pink); /* Magenta border */
    border-radius: 5px;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 0 10px var(--neon-pink); /* Magenta glow */
}

.neon-button-magenta:hover {
    background-color: var(--neon-pink); /* Fills with magenta on hover */
    color: var(--dark-bg); /* Text becomes dark */
    border-color: var(--neon-blue); /* Border shifts to blue */
    box-shadow: 0 0 15px var(--neon-pink), 0 0 25px var(--neon-blue); /* Combined glow */
    transform: translateY(-3px) scale(1.02);
}

/* Light Mode Adjustments for Magenta Buttons */
body.light-mode .neon-button-magenta {
    color: var(--neon-blue); /* Blue in light mode */
    border-color: var(--neon-blue);
    box-shadow: 0 0 10px var(--neon-blue);
}

body.light-mode .neon-button-magenta:hover {
    background-color: var(--neon-blue); /* Blue in light mode */
    color: var(--medium-bg);
    border-color: var(--neon-pink);
    box-shadow: 0 0 15px var(--neon-blue), 0 0 25px var(--neon-pink);
}

/* PDF Download Section */
.download-pdf-section {
    padding-top: 40px; /* Space above the section */
    padding-bottom: 60px; /* Space below before the footer */
    text-align: center; /* Center content within the section */
}

.download-pdf-section .subsection-title {
    margin-bottom: 15px;
}

.download-pdf-section p {
    margin-bottom: 25px;
}

/* Container for the PDF button */
.cta-button-container-pdf {
    margin-top: 30px;
    margin-bottom: 20px;
}

/* Project Detail - Technologies Used List */
.tech-list {
    list-style: none; /* Remove default bullet points */
    padding: 0;
    margin-top: 20px;
}

.tech-list li {
    margin-bottom: 10px;
    font-size: 1.05rem;
    color: var(--light-grey);
}

.tech-list li i {
    margin-right: 10px;
    font-size: 1.2rem;
    text-shadow: 0 0 5px var(--neon-blue), 0 0 10px var(--neon-pink); /* Dual glow */
}

/* Light Mode Adjustment for tech icons */
body.light-mode .tech-list li i {
    text-shadow: 0 0 5px var(--neon-pink), 0 0 10px var(--neon-blue); /* Swap glow colors */
}