/* --- Global Styles & Variables --- */
        :root {
            --bg-color: #1a1d2d; /* Deeper Navy/Purple */
            --bg-color-lighter: #2a2d40; /* Slightly lighter for sections */
            --text-color: #e0e5f0; /* Soft slightly bluish white */
            --text-secondary: rgba(224, 229, 240, 0.85); /* Dimmer text for paragraphs */
            --primary-accent: #ff8c00; /* Vibrant Orange - Fire Core */
            --secondary-accent: #e65c00; /* Deeper Burnt Orange */
            --glow-color: rgba(255, 140, 0, 0.5); /* Fire Glow */
            --card-bg: rgba(42, 45, 64, 0.7); /* Semi-transparent card bg */
            --border-color: rgba(255, 140, 0, 0.3); /* Orange-tinted border */
            --danger-color: #ff6b6b;      /* Red for cancel/error */
            --font-heading: 'Merriweather', serif;
            --font-body: 'Poppins', sans-serif;
            --container-width: 1140px;
            --header-height: 70px; /* Define header height */
        }

        *, *::before, *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html {
            scroll-behavior: smooth; /* Smooth scroll for anchor links (manual) */
            font-size: 16px; /* Base font size */
        }

        body {
            font-family: var(--font-body);
            background-color: var(--bg-color);
            color: var(--text-secondary); /* Default paragraph color */
            line-height: 1.7;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            overflow-x: hidden; /* Prevent horizontal scroll issues */
             position: relative; /* Needed for absolute positioning of tour elements */
        }
         /* Disable body scroll during the tour */
        body.tour-active { overflow-y: hidden; }

        /* Removed main.blurred-for-tour CSS as the blur transition is removed */


        .container {
            width: 90%;
            max-width: var(--container-width);
            margin: 0 auto; /* Center content */
            padding: 20px 0; /* Add some vertical padding inside container */
        }

        h1, h2, h3, h4 {
            font-family: var(--font-heading);
            color: var(--primary-accent);
            margin-bottom: 0.7em;
            line-height: 1.3;
            font-weight: 700;
        }

        h1 { font-size: clamp(2.5rem, 6vw, 3.8rem); text-shadow: 2px 2px 5px rgba(0,0,0,0.7); }
        h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); text-align: center; margin-bottom: 1.5em; }
        h3 { font-size: clamp(1.3rem, 3vw, 1.6rem); color: var(--primary-accent); margin-bottom: 0.5em;}
        h4 { font-size: clamp(1.1rem, 2.5vw, 1.3rem); color: var(--text-color); margin-bottom: 0.4em; }


        a {
            color: var(--primary-accent);
            text-decoration: none;
            transition: color 0.3s ease;
        }
        a:hover {
            color: var(--secondary-accent);
        }

        img {
            max-width: 100%;
            height: auto;
            display: block;
            border-radius: 4px; /* Slight rounding */
        }

        p {
            margin-bottom: 1.2em;
            font-size: clamp(0.95rem, 1.5vw, 1.05rem);
            color: var(--text-secondary); /* Using variable */
        }

        /* --- Utilities --- */
        .text-center { text-align: center; }
        .section-padding { padding: clamp(40px, 8vh, 80px) 0; }
        .highlight { color: var(--primary-accent); font-weight: bold; }


        /* --- Header & Navigation --- */
        .main-header {
            background-color: rgba(26, 29, 45, 0.8); /* Slightly darker than body */
            padding: 12px 0;
            position: sticky;
            top: 0;
            z-index: 1000; /* Above other content */
            backdrop-filter: blur(8px); /* Frosted glass effect */
            border-bottom: 1px solid rgba(255, 140, 0, 0.15); /* Subtle accent border */
            box-shadow: 0 2px 10px rgba(0,0,0,0.3);
            height: var(--header-height); /* Set height using variable */
             display: flex; /* Use flex for internal layout */
             align-items: center;
        }

        .main-header .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 15px; /* Padding left/right */
             width: 100%; /* Make container full width */
        }

        .logo {
            font-family: var(--font-heading);
            font-size: clamp(1.5rem, 3vw, 1.9rem);
            font-weight: 700;
            color: var(--text-color);
        }
        .logo .highlight {
            display: inline-block; /* Prevents wrap */
            margin-left: 0.1em;
        }
        .logo i { /* Optional icon */
             font-size: 0.8em;
             margin-right: 0.3em;
             color: var(--primary-accent);
        }

        .main-nav ul {
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }

        .main-nav li {
            margin-left: clamp(10px, 2vw, 25px);
        }
         .main-nav li:first-child { margin-left: 0; }

        .main-nav a {
            font-weight: 700; /* Bold nav links */
            font-family: var(--font-body);
            font-size: clamp(0.85rem, 1.5vw, 1rem);
            padding: 8px 12px;
            border-radius: 4px;
            transition: background-color 0.3s ease, color 0.3s ease;
            letter-spacing: 0.5px;
             color: var(--text-color); /* Default nav link color */
        }
        .main-nav a:hover, .main-nav a.active { /* Add active class via JS if needed */
            background-color: rgba(255, 140, 0, 0.1); /* Subtle hover/active bg */
            color: var(--primary-accent); /* Accent color */
        }

        /* --- Tour Button & Controls Styling (Adapted to theme) --- */
        .tour-controls { display: flex; gap: 1rem; align-items: center; }

        /* Hide tour controls when dropdown menu is open */
        .dropdown-menu.active ~ .tour-controls,
        .dropdown-overlay.active ~ .tour-controls {
            display: none !important;
        }

        #start-tour-btn, #cancel-tour-btn {
            padding: 0.6rem 1.2rem; font-size: 0.9rem; font-weight: 600; border-radius: 4px; cursor: pointer;
            display: flex; align-items: center; gap: 0.5rem; transition: background-color 0.3s, color 0.3s, opacity 0.3s;
            font-family: var(--font-body); /* Use body font for button */
        }
        #start-tour-btn { background-color: var(--primary-accent); color: var(--bg-color); border: none; }
        #start-tour-btn:hover:not(:disabled) { background-color: var(--secondary-accent); color: white; }
        #cancel-tour-btn { background-color: transparent; color: var(--danger-color); border: 1px solid var(--danger-color); display: none; }
        #cancel-tour-btn:hover:not(:disabled) { background-color: rgba(255, 107, 107, 0.1); }
        .tour-controls .btn:disabled { opacity: 0.6; cursor: not-allowed; }
        /* --- Mobile Nav Toggle --- */
        .nav-toggle {
             display: none; /* Hidden by default */
             background: none;
             border: none;
             color: var(--text-color);
             font-size: 1.8rem;
             cursor: pointer;
             z-index: 1001; /* Above nav when collapsed */
        }


        /* --- Hero Section (#home) --- */
        .hero {
            min-height: 90vh; /* Almost full viewport */
            display: flex;
            flex-direction: column; /* Stack content and fire area */
            align-items: center;
            justify-content: center;
            text-align: center;
            position: relative;
            overflow: hidden;
            padding: 60px 20px 120px 20px; /* Extra padding bottom for fire area */
            background-color: var(--bg-color); /* Base color */
             /* Add the parallax background */
            background-image: url('./images/subtle-code-texture.jpg'); /* Replace with your subtle tech/abstract bg image */
            background-size: cover;
            background-attachment: fixed; /* Creates basic parallax effect */
            background-position: center center;
            /* Ensure height includes padding for scrollto offset calculation */
            padding-top: var(--header-height); /* Add header height padding */
            min-height: calc(90vh + var(--header-height)); /* Adjust min-height */

        }
        /* Overlay to darken background and add gradient */
        .hero::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: linear-gradient(to bottom, rgba(26, 29, 45, 0.6), rgba(26, 29, 45, 0.95));
            z-index: 1;
        }


        .hero-content {
            position: relative;
            z-index: 10; /* Above fire and overlay */
            max-width: 800px;
             margin-bottom: 2rem; /* Space above fire visually */
        }

        .hero h1 {
            margin-bottom: 0.3em;
        }

        .hero p.subtitle {
            font-size: clamp(1.1rem, 2.5vw, 1.4rem);
            margin-bottom: 1.8em;
            max-width: 650px;
            margin-left: auto;
            margin-right: auto;
            color: rgba(224, 229, 240, 0.9);
            font-weight: 300;
            letter-spacing: 0.5px;
        }

         .hero .cta-button {
            display: inline-block;
            padding: 14px 35px;
            background: linear-gradient(to right, var(--secondary-accent), var(--primary-accent));
            color: #fff; /* White text on button */
            font-weight: bold;
            font-family: var(--font-body);
            font-size: clamp(1rem, 2vw, 1.15rem);
            border-radius: 30px; /* Pill shape */
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(255, 140, 0, 0.3);
            text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
            letter-spacing: 1px;
         }
         .hero .cta-button:hover {
            transform: translateY(-3px) scale(1.03);
            box-shadow: 0 8px 20px rgba(255, 140, 0, 0.4);
         }


        /* --- Fire Display Area (Positioned within Hero, lower) --- */
        .fire-display-area {
            position: absolute;
            bottom: -60px; /* Overlap bottom edge */
            left: 50%;
            transform: translateX(-50%) scale(1);
            width: 400px;
            height: 400px;
            z-index: 5; /* Above overlay, below content */
            pointer-events: none; /* Allow clicks/interaction "through" it */
            filter: brightness(1);
            /* border: 1px dashed white; */ /* Debug */
        }


        /* --- Main Content Sections --- */
        main {
          flex-grow: 1; /* Make main content take available space */
          background-color: var(--bg-color-lighter); /* Slightly lighter bg for content */
          z-index: 2; /* Ensure content scrolls over fixed hero bg */
          position: relative; /* Needed for z-index stacking */
        }

        section {
          border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* Subtle horizontal dividers */
        }
        section:last-of-type { border-bottom: none; } /* No border after the last section */


        /* --- About Section --- */
        #about .container {
            display: flex;
            flex-wrap: wrap;
            gap: clamp(40px, 6vw, 80px);
            align-items: center;
            padding: 20px 0;
        }

        .about-content {
            display: flex;
            flex-wrap: wrap;
            gap: clamp(40px, 6vw, 80px);
            align-items: center;
            justify-content: space-between;
            width: 100%;
        }

        .about-text {
            flex: 1 1 500px;
            min-width: 300px;
            order: 1;
        }

        .about-image {
            flex: 0 1 400px;
            margin: 0 auto;
            position: relative;
            order: 2;
        }

        .about-image::before {
            content: '';
            position: absolute;
            top: -10px;
            left: -10px;
            right: -10px;
            bottom: -10px;
            border: 2px solid var(--primary-accent);
            border-radius: 50%;
            animation: pulse 2s infinite;
        }

        .about-image img {
            border-radius: 50%;
            border: 5px solid var(--border-color);
            box-shadow: 0 0 25px var(--glow-color);
            width: 100%;
            height: auto;
            position: relative;
            z-index: 1;
            transition: transform 0.3s ease;
        }

        .about-image:hover img {
            transform: scale(1.02);
        }

        @keyframes pulse {
            0% { transform: scale(1); opacity: 0.5; }
            50% { transform: scale(1.05); opacity: 0.2; }
            100% { transform: scale(1); opacity: 0.5; }
        }

        .about-text p {
            font-size: clamp(1rem, 1.2vw, 1.1rem);
            line-height: 1.8;
            margin-bottom: 1.5em;
            color: var(--text-secondary);
            text-align: left;
        }

        .about-text p:last-child {
            margin-bottom: 0;
        }

        .about-text .highlight {
            color: var(--primary-accent);
            font-weight: 600;
            display: inline-block;
            position: relative;
        }

        /* Responsive adjustments */
        @media (max-width: 992px) {
            .about-content {
                flex-direction: column;
                text-align: center;
            }
            
            .about-text {
                order: 2;
            }
            
            .about-image {
                order: 1;
                max-width: 300px;
            }
            
            .about-text p {
                text-align: center;
            }
        }

        /* --- Skills Section --- */
        #skills { background-color: rgba(0,0,0,0.1); } /* Subtle visual difference */
        .skills-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            justify-content: center;
        }
        .skill-category {
            background-color: var(--card-bg);
            padding: 25px 30px;
            border-radius: 8px;
            flex: 1 1 300px; /* Grow, shrink, base width for responsive grid */
            border: 1px solid rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(5px); /* Frosted glass on cards */
        }
        .skill-category h3 {
            text-align: center;
            margin-bottom: 1.5em;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }
        .skill-category h3 i { color: var(--text-color); font-size: 0.9em; }

        .skills-list {
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            justify-content: center; /* Center icons */
        }
        .skills-list li {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            text-align: center;
            font-size: 0.85rem;
            width: 80px; /* Fixed width for alignment */
            transition: transform 0.2s ease;
        }
        .skills-list li:hover {
            transform: translateY(-5px);
        }
        .skills-list i {
            font-size: 2.5rem; /* Icon size */
            color: var(--primary-accent);
            background: linear-gradient(145deg, var(--bg-color-lighter), var(--bg-color));
            padding: 15px;
            border-radius: 50%;
            width: 60px; height: 60px; /* Fixed size */
            display: flex; align-items: center; justify-content: center;
            box-shadow: inset 0 0 10px rgba(0,0,0,0.3), 0 2px 5px rgba(0,0,0,0.2);
            transition: color 0.3s ease, box-shadow 0.3s ease;
        }
         .skills-list li:hover i {
            color: var(--secondary-accent);
            box-shadow: inset 0 0 12px rgba(0,0,0,0.4), 0 4px 8px rgba(0,0,0,0.3), 0 0 15px var(--glow-color);
         }


        /* --- 3D Model Section (#tech-showcase) --- */
        #tech-showcase { text-align: center; }
        model-viewer {
            width: 100%;
            max-width: 400px; /* Control size */
            height: 350px;
            margin: 1em auto; /* Center the model viewer */
            border-radius: 8px;
            background-color: transparent; /* Let section bg show */
            /* Custom styling for model viewer internal elements */
             --mv-progress-bar-color: var(--primary-accent);
             --mv-poster-color: var(--bg-color);
        }
         /* Style for the attribution text within model-viewer */
        #tech-showcase .attribution {
            font-size: 0.75rem;
            margin-top: 5px;
            opacity: 0.7;
            color: var(--text-secondary); /* Use secondary text color */
        }
        #tech-showcase .attribution a { color: inherit; }


        /* --- Projects Section --- */
        .projects-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 35px;
            perspective: 1000px; /* Perspective for 3D hover effect */
        }

        .project-card {
            background-color: var(--card-bg);
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
            transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease;
            border: 1px solid rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(5px);
            display: flex;
            flex-direction: column;
            position: relative; /* For absolute links or details */
            transform-style: preserve-3d; /* Enable 3D transforms for children */
        }
        .project-card:hover {
            transform: translateY(-10px) rotateX(5deg) rotateY(-3deg) scale(1.02);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6), 0 0 20px var(--glow-color);
        }

        .project-card-image {
            height: 220px;
            overflow: hidden;
            position: relative;
        }
         .project-card-image img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Cover the area, might crop */
            transition: transform 0.5s ease;
        }
        .project-card:hover .project-card-image img {
            transform: scale(1.08); /* Zoom effect on image hover */
        }
        /* Optional overlay on image */
        .project-card-image::after {
            content: ''; position: absolute; top:0; left:0; right:0; bottom:0;
            background: linear-gradient(to top, rgba(26, 29, 45, 0.7), transparent);
            opacity: 0; transition: opacity 0.4s ease;
        }
        .project-card:hover .project-card-image::after { opacity: 1;}


        .project-card-content {
            padding: 20px 25px;
            flex-grow: 1; /* Make content take remaining space */
            display: flex;
            flex-direction: column;
        }
        .project-card-content h4 { margin-top: 0; color: var(--primary-accent); }
        .project-card-content p {
             font-size: 0.9rem;
             color: rgba(224, 229, 240, 0.8);
             flex-grow: 1; /* Push tech/links down */
             margin-bottom: 15px;
        }

        .project-tech {
             margin-bottom: 15px;
             /* Use flex for tech badges */
             display: flex;
             flex-wrap: wrap;
             gap: 5px; /* Space between badges */
        }
        .project-tech span {
            display: inline-block;
            background-color: rgba(255, 140, 0, 0.15); /* Light orange background */
            color: var(--primary-accent); /* Orange text */
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 0.75rem;
            font-weight: bold;
            white-space: nowrap; /* Prevent breaking */
        }

        .project-links {
            display: flex;
            gap: 15px;
            margin-top: auto; /* Pushes links to bottom */
        }
        .project-links a {
            color: var(--text-color); /* White/light text */
            font-size: 1.3rem;
            transition: color 0.3s ease, transform 0.2s ease;
        }
        .project-links a:hover {
            color: var(--primary-accent); /* Accent color on hover */
            transform: scale(1.1);
        }

         /* --- Education & Certifications Section --- */
        #education { background-color: rgba(0,0,0,0.1); } /* Subtle difference */
        .education-item { /* Individual items get tour-anim-item */
            background-color: var(--card-bg); padding: 2rem; border-radius: 8px;
            margin-bottom: 2rem; border-left: 5px solid var(--primary-accent); /* Use accent */
            display: flex; align-items: center; gap: 1.5rem; border: 1px solid rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(5px);
        }
         .education-item:last-child { margin-bottom: 0; } /* No bottom margin on last item in section */
        .education-icon { font-size: 2.5rem; color: var(--primary-accent); }
        .education-details h3 { color: var(--heading-color); font-size: 1.4rem; margin-bottom: 0.3rem; }
        .education-details p { margin-bottom: 0.3rem; color: var(--text-color); }
        .education-details p em { color: var(--text-secondary); font-style: normal; }

         /* --- Experience Section --- */
        #experience { background-color: rgba(0,0,0,0.1); } /* Subtle difference */
        .experience-item { /* Individual items get tour-anim-item */
             background-color: var(--card-bg);
             padding: 25px 30px;
             border-radius: 8px;
             border: 1px solid rgba(255, 255, 255, 0.08);
             backdrop-filter: blur(5px);
             margin-bottom: 20px;
        }
         .experience-item:last-child { margin-bottom: 0; }
         .experience-item h3 { margin-bottom: 0.5em; color: var(--text-color);}
         .experience-item p { font-size: 0.95rem; margin-bottom: 0.8em; color: rgba(224, 229, 240, 0.9); }
         .experience-item p strong { color: var(--primary-accent); font-weight: bold; }
         .experience-item ul {
             list-style: disc;
             padding-left: 25px;
             font-size: 0.9rem;
             color: rgba(224, 229, 240, 0.8);
         }
         .experience-item li { margin-bottom: 0.5em; }


        /* --- Contact Section --- */
        #contact { background-color: var(--bg-color-lighter); } /* Match main bg */
        .contact-form {
            max-width: 700px;
            margin: 20px auto;
            background-color: var(--card-bg);
            padding: clamp(25px, 5vw, 40px);
            border-radius: 8px;
            border: 1px solid rgba(255, 255, 255, 0.08);
             backdrop-filter: blur(5px);
             box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        }
        .input-group { margin-bottom: 20px; }
        .input-group label {
            display: block;
            margin-bottom: 8px;
            color: var(--primary-accent);
            font-weight: bold;
            font-size: 0.9rem;
        }
        .input-group input, .input-group textarea {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid rgba(224, 229, 240, 0.2);
            background-color: rgba(26, 29, 45, 0.8); /* Darker input */
            color: var(--text-color);
            border-radius: 5px;
            font-family: var(--font-body);
            font-size: 1rem;
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }
         .input-group input:focus, .input-group textarea:focus {
            outline: none;
            border-color: var(--primary-accent);
            box-shadow: 0 0 0 3px var(--glow-color); /* Orange glow focus */
         }
         .input-group textarea { min-height: 130px; resize: vertical; }

         .contact-form button[type="submit"] {
             display: block;
             width: 100%;
             padding: 12px 25px;
             background: linear-gradient(to right, var(--secondary-accent), var(--primary-accent));
             color: #fff;
             font-weight: bold;
             font-size: 1.1rem;
             border-radius: 5px;
             border: none;
             cursor: pointer;
             transition: all 0.3s ease;
             box-shadow: 0 4px 10px rgba(255, 140, 0, 0.2);
             margin-top: 10px;
         }
          .contact-form button[type="submit"]:hover {
             transform: translateY(-2px);
             box-shadow: 0 6px 15px rgba(255, 140, 0, 0.3);
          }

          /* Form Status Message */
          #form-status {
              margin-top: 15px;
              text-align: center;
              font-weight: bold;
              min-height: 1.2em; /* Reserve space */
              font-size: 0.95rem;
          }
          #form-status.success { color: var(--primary-accent); }
          #form-status.error { color: var(--danger-color); }


        /* --- Resume Download Section --- */
         #resume-download { text-align: center; background-color: rgba(0,0,0,0.1); }
        /* Removed empty ruleset for #resume-download .cta-button */


        /* --- Footer --- */
        .main-footer {
            background-color: var(--bg-color); /* Match darkest bg */
            color: rgba(224, 229, 240, 0.6);
            text-align: center;
            padding: 30px 0;
            margin-top: auto; /* Push to bottom */
            border-top: 1px solid rgba(255, 255, 255, 0.05);
        }
         .main-footer p { font-size: 0.9rem; margin-bottom: 0.5em; }
         .footer-links { margin-bottom: 1em; }
         .footer-links a {
             color: rgba(224, 229, 240, 0.6);
             margin: 0 10px;
             font-size: 1.4rem;
             transition: color 0.3s ease;
         }
          .footer-links a:hover {
             color: var(--primary-accent);
          }
          .attribution {
            font-size: 0.75rem;
            margin-top: 15px;
            opacity: 0.5;
            color: rgba(224, 229, 240, 0.4);
          }
          .attribution a { color: inherit; text-decoration: underline;}


        /* --- Anime Fire CSS (Enhanced) --- */
        /* --- Candle Base with Enhanced Realism and Decay --- */
        .log-stack { 
            position: absolute; 
            bottom: 40px; /* Adjusted position */
            left: 50%; 
            transform: translateX(-50%); 
            width: 60px; /* Slightly narrower for more elegant candle */
            height: 140px; /* Taller candle */
            z-index: 1;
            perspective: 1000px;
        }

        .log { 
            position: absolute;
            background: linear-gradient(180deg,
                rgba(255, 255, 255, 0.95) 0%,
                rgba(245, 245, 245, 0.9) 20%,
                rgba(235, 235, 235, 0.95) 60%,
                rgba(225, 225, 225, 1) 100%
            );

        }


        .log1 { 
            width: 50px; /* Candle width */
            height: 120px; /* Candle height */
            bottom: 50px; /* Position above the fire */
            left: 5px;
            z-index: 1;
            /* Enhanced wax texture with realistic gradients */
            background: linear-gradient(180deg,
                rgba(255, 255, 255, 0.95) 0%,
                rgba(245, 245, 245, 0.9) 20%,
                rgba(235, 235, 235, 0.95) 60%,
                rgba(225, 225, 225, 1) 100%
            );
            /* Improved candle texture and shadows */
            box-shadow: 
                inset -2px 0 4px rgba(0, 0, 0, 0.1),
                inset 2px 0 4px rgba(0, 0, 0, 0.1),
                inset 0 3px 8px rgba(255, 255, 255, 0.8),
                0 4px 15px rgba(0, 0, 0, 0.2);
            /* Add subtle wax drip effect */
            border: 1px solid rgba(255, 255, 255, 0.8);
            overflow: hidden;
        }

        /* Wax drips effect */
        .log1::before {
            content: '';
            position: absolute;
            top: 0;
            left: -2px;
            right: -2px;
            height: 15px;
            background: linear-gradient(180deg, 
                rgba(255, 255, 255, 0.9) 0%,
                rgba(255, 255, 255, 0.7) 50%,
                rgba(255, 255, 255, 0.4) 100%
            );
            border-radius: 50% 50% 45% 45%;
            filter: blur(1px);
            animation: waxDrip 10s ease-in-out infinite;
        }



        /* Enhanced candle wick with glow */
        .log1::after {
            content: '';
            position: absolute;
            width: 3px;
            height: 10px;
            background: linear-gradient(to bottom, #444, #111);
            top: -8px;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 1px;
            box-shadow: 
                0 0 2px rgba(0, 0, 0, 0.8),
                0 0 4px rgba(255, 165, 0, 0.5);
            animation: wickGlow 2s ease-in-out infinite;
        }

        @keyframes wickGlow {
            0%, 100% { box-shadow: 0 0 2px rgba(0, 0, 0, 0.8), 0 0 4px rgba(255, 165, 0, 0.5); }
            50% { box-shadow: 0 0 3px rgba(0, 0, 0, 0.9), 0 0 6px rgba(255, 165, 0, 0.7); }
        }

        /* Hide second log */
        .log2 { display: none; }

        /* Adjusted Fire Container positioning */
        .fire-container { 
            position: absolute; 
            bottom: 190px; /* Adjusted to better align with wick */
            left: 50%; 
            transform: translateX(-50%); 
            width: 80px; /* Narrower width for more focused flame */
            height: 160px; 
            filter: contrast(1.2) brightness(1.1); 
            z-index: 2;
        }

        /* Adjust ember positions relative to flame */
        .embers { 
            position: absolute; 
            bottom: 100px; /* Adjusted to start from flame base */
            left: 50%; 
            transform: translateX(-50%); 
            width: 100px;
            height: 12px; 
            z-index: 12;
            pointer-events: none;
        }

        .ember {
            position: absolute;
            width: 3px;
            height: 3px;
            background-color: #ffae00;
            border-radius: 50%;
            box-shadow: 0 0 5px 2px rgba(255, 165, 0, 0.6);
            animation: float 3s ease-in-out infinite;
            opacity: 0;
        }

        .e1 { left: 40%; animation-delay: 0s; }
        .e2 { left: 60%; animation-delay: 1s; }
        .e3 { left: 45%; animation-delay: 2s; }
        .e4 { left: 55%; animation-delay: 1.5s; }

        @keyframes float {
            0% {
                transform: translateY(0) scale(1);
                opacity: 1;
            }
            100% {
                transform: translateY(-100px) scale(0.5);
                opacity: 0;
            }
        }

        /* Adjust flame positioning and appearance */
        .fire { 
            position: absolute; 
            bottom: 40px; /* Adjusted to align perfectly with wick */
            left: 50%; 
            transform: translateX(-50%); 
            width: 100%; 
            height: 100%; 
            filter: blur(0.5px); 
        }

        .flame { 
            position: absolute; 
            bottom: 0; 
            left: 50%; 
            width: 16px; /* Narrower base */
            height: 50px; 
            border-radius: 50% 50% 20% 20% / 60% 60% 30% 30%; 
            background: radial-gradient(ellipse at bottom, 
                #ffffff 0%, 
                #ffffa1 20%, 
                #ffa500cc 40%, 
                #ff4500aa 60%, 
                rgba(50, 0, 0, 0) 100%
            );
            transform-origin: bottom center; 
            opacity: 0.9;
            z-index: 10; 
            box-shadow: 
                0 0 15px 5px rgba(255, 165, 0, 0.4),
                0 0 30px 8px rgba(255, 140, 0, 0.2);
            animation: flicker 3s ease-in-out infinite;
        }

        /* Individual flame variations with improved positioning */
        .f1 { height: 55px; width: 18px; transform: translateX(-52%) rotate(-2deg); animation-duration: 2.5s; }
        .f2 { height: 45px; width: 14px; transform: translateX(-48%) rotate(2deg); animation-duration: 2.7s; animation-delay: 0.3s; }
        .f3 { height: 60px; width: 20px; transform: translateX(-50%); animation-duration: 2.9s; animation-delay: 0.7s; }
        .f4 { height: 50px; width: 16px; transform: translateX(-51%) rotate(-1deg); animation-duration: 2.6s; animation-delay: 0.5s; }
        .f5 { height: 48px; width: 15px; transform: translateX(-49%) rotate(1deg); animation-duration: 2.8s; animation-delay: 0.2s; }

        @keyframes flicker {
            0%, 100% { 
                transform: translateX(-50%) scaleY(1) rotate(0deg);
                opacity: 0.9;
            }
            25% { 
                transform: translateX(-51%) scaleY(1.1) rotate(-1deg);
                opacity: 1;
            }
            50% { 
                transform: translateX(-49%) scaleY(0.9) rotate(1deg);
                opacity: 0.8;
            }
            75% { 
                transform: translateX(-50%) scaleY(1.05) rotate(-0.5deg);
                opacity: 0.95;
            }
        }

        /* Sparks with improved positioning */
        .sparks { 
            position: absolute; 
            bottom: 120px; /* Adjusted to start above flame */
            left: 50%; 
            transform: translateX(-50%); 
            width: 60px; /* Narrower area for more focused sparks */
            height: 100px; 
            z-index: 15; 
            pointer-events: none;
        }

        .spark {
            position: absolute;
            width: 2px;
            height: 2px;
            background: #ffffa1;
            border-radius: 50%;
            opacity: 0;
            animation: sparkRise 2s ease-out infinite;
        }

        .s1 { left: 45%; animation-delay: 0s; }
        .s2 { left: 55%; animation-delay: 0.4s; }
        .s3 { left: 48%; animation-delay: 0.8s; }
        .s4 { left: 52%; animation-delay: 1.2s; }
        .s5 { left: 50%; animation-delay: 1.6s; }

        @keyframes sparkRise {
            0% {
                transform: translateY(0) scale(1);
                opacity: 1;
            }
            100% {
                transform: translateY(-50px) scale(0.5);
                opacity: 0;
            }
        }

        /* --- Interactive Tour Narration & Overlay (Adapted to theme) --- */
        .narration-box {
            position: fixed; bottom: 30px; left: 30px;
            background: rgba(42, 45, 64, 0.95); /* Use card bg with high opacity */
            color: var(--text-color);
            padding: 1rem 1.5rem; border-radius: 8px; max-width: 400px;
            font-size: 0.95rem; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
            border-left: 4px solid var(--primary-accent); /* Accent color border */
            z-index: 1002; /* Ensure it's above other content and header */
            opacity: 0; transform: translateY(20px); pointer-events: none; /* Initially hidden and non-interactive */
            transition: opacity 0.5s ease, transform 0.5s ease; /* Keep CSS transition for hide/show */
        }
        .narration-box.visible { opacity: 1; transform: translateY(0); pointer-events: auto; } /* Visible state */
        #narration-text { margin: 0; line-height: 1.5; }

        /* Removed .transition-overlay CSS as the element is removed */


        /* --- Responsive Design --- */
        @media (max-width: 992px) {
            .container { width: 92%; }
            .fire-display-area {
                transform: translateX(-50%) scale(0.9);
                bottom: -70px;
            }
            .about-text { flex-basis: 100%; order: 2; text-align: center;} /* Stack About text below image */
            .about-image { flex-basis: 100%; order: 1; margin-bottom: 30px; max-width: 280px;} /* Stack image above text */
             .projects-grid { gap: 25px; } /* Adjust project card gap */
             .experience-item { padding: 20px 25px; } /* Adjust experience padding */
             .education-item { padding: 20px 25px;}
        }

        @media (max-width: 768px) {
             /* Mobile Nav Styles */
            .main-header .container { flex-wrap: wrap; } /* Allow logo and toggle to wrap */
            .logo { flex-grow: 1; } /* Allow logo to take space */
            .nav-toggle { display: block; /* Show hamburger toggle */ }
            .main-nav {
                display: none; /* Hide normal nav */
                position: absolute;
                top: var(--header-height); /* Position below header */
                left: 0;
                width: 100%;
                background-color: rgba(26, 29, 45, 0.98); /* Almost opaque dark bg */
                padding: 20px 0;
                box-shadow: 0 5px 10px rgba(0,0,0,0.3);
                z-index: 999; /* Below header, above content */
            }
             .main-nav.active { display: block; } /* Show when active */
            .main-nav ul { flex-direction: column; align-items: center; }
            .main-nav li { margin: 10px 0; margin-left: 0;}
            .main-nav a { padding: 10px 20px; } /* Larger touch area */


             .hero { min-height: 80vh; padding-bottom: 100px; padding-top: var(--header-height); min-height: calc(80vh + var(--header-height)); }
             .fire-display-area {
                transform: translateX(-50%) scale(0.75);
                bottom: -60px;
                width: 350px; height: 350px;
             }
             .skills-grid { gap: 15px; }
             .skill-category { flex-basis: 100%; } /* Full width categories */
             .skills-list li { width: auto; min-width: 70px; } /* Auto width for items, min-width */
             #tech-showcase { padding: 20px 0; }
             model-viewer { height: 300px; }
             .projects-grid { grid-template-columns: 1fr; /* Single column for projects */ }
             .contact-form { padding: 20px;} /* Reduce contact form padding */

            /* Adjust narration box position and size for smaller screens */
            .narration-box { left: 15px; right: 15px; bottom: 15px; max-width: none; width: calc(100% - 30px); font-size: 0.9rem; }
        }

        @media (max-width: 480px) {
            html { font-size: 15px; } /* Slightly smaller base font */
             .hero { min-height: 70vh; padding-bottom: 80px; padding-top: var(--header-height); min-height: calc(70vh + var(--header-height)); }
            .fire-display-area {
                transform: translateX(-50%) scale(0.6);
                bottom: -50px;
                width: 300px; height: 300px;
            }
             .skills-list i { font-size: 2rem; width: 50px; height: 50px; padding: 12px;}
             .skills-list li { width: 60px; font-size: 0.7rem;} /* Reduce size further */
             .project-card-image { height: 180px; }
             .project-card-content { padding: 15px 20px; }
             model-viewer { height: 250px; }

            /* Adjust narration box position if header height + controls become larger */
            /* This calculation might need fine-tuning based on actual header height on wrap */
            /* Example: if header wraps, it takes up more height, push narration box down */
             .narration-box { bottom: calc(15px + var(--header-height)); /* Example: 15px from bottom + header height */ }
             /* Test this on a real small device to see how the header wraps and adjust accordingly */
        }





             /* Dropdown Menu Styles */

        /* Make logo button-like but maintain appearance */
        .logo.dropdown-toggle {
            background: none;
            border: none;
            color: inherit;
            font-family: inherit;
            font-size: 1.8rem;
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 0;
            text-decoration: none;
            transition: all 0.3s ease;
        }

        /* Responsive font sizes for logo */
        @media (max-width: 768px) {
            .logo.dropdown-toggle {
                font-size: 1.6rem;
            }
        }

        @media (max-width: 480px) {
            .logo.dropdown-toggle {
                font-size: 1.4rem;
            }
        }

        .logo.dropdown-toggle:hover {
            transform: translateY(-2px);
        }

        .dropdown-icon {
            font-size: 0.8em;
            transition: transform 0.3s ease;
        }

        .logo.dropdown-toggle[aria-expanded="true"] .dropdown-icon {
            transform: rotate(180deg);
        }

        /* Dropdown Overlay */
        .dropdown-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(2px);
            z-index: 998;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        .dropdown-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        /* Dropdown Menu */
        .dropdown-menu {
            position: fixed;
            top: 0;
            left: 0;
            width: 50%;
            max-width: 400px;
            min-width: 300px;
            height: 100vh;
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            border-right: 1px solid rgba(255, 255, 255, 0.1);
            transform: translateX(-100%);
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 999;
            overflow-y: auto;
            box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
        }

        .dropdown-menu.active {
            transform: translateX(0);
        }

        .dropdown-content {
            padding: 2rem 0;
            display: flex;
            flex-direction: column;
        }

        .dropdown-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1rem 2rem;
            color: #ffffff;
            text-decoration: none;
            transition: all 0.3s ease;
            border-left: 3px solid transparent;
            position: relative;
            overflow: hidden;
        }

        .dropdown-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 0;
            height: 100%;
            background: linear-gradient(90deg, rgba(255, 107, 107, 0.1) 0%, transparent 100%);
            transition: width 0.3s ease;
        }

        .dropdown-item:hover::before {
            width: 100%;
        }

        .dropdown-item:hover {
            background: rgba(255, 107, 107, 0.1);
            border-left-color: #ff6b6b;
            transform: translateX(5px);
        }

        .dropdown-item i {
            font-size: 1.2em;
            width: 20px;
            text-align: center;
            color: #ff6b6b;
        }

        .dropdown-item span {
            font-weight: 500;
            font-size: 1.1em;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .dropdown-menu {
                width: 60%;
                max-width: none;
                min-width: 280px;
            }

            .dropdown-item {
                padding: 0.8rem 1.5rem;
            }

            .dropdown-item span {
                font-size: 1em;
            }
        }

        @media (max-width: 480px) {
            .dropdown-menu {
                width: 70%;
                min-width: 250px;
            }

            .dropdown-item {
                padding: 0.7rem 1.2rem;
            }

            .dropdown-item i {
                font-size: 1.1em;
            }

            .dropdown-item span {
                font-size: 0.95em;
            }
        }

        /* Smooth scrolling for dropdown navigation */
        html {
            scroll-behavior: smooth;
        }

        /* Animation for dropdown items */
        .dropdown-menu.active .dropdown-item {
            animation: slideInLeft 0.3s ease forwards;
        }

        .dropdown-item:nth-child(1) {
            animation-delay: 0.1s;
        }

        .dropdown-item:nth-child(2) {
            animation-delay: 0.15s;
        }

        .dropdown-item:nth-child(3) {
            animation-delay: 0.2s;
        }

        .dropdown-item:nth-child(4) {
            animation-delay: 0.25s;
        }

        .dropdown-item:nth-child(5) {
            animation-delay: 0.3s;
        }

        .dropdown-item:nth-child(6) {
            animation-delay: 0.35s;
        }

        .dropdown-item:nth-child(7) {
            animation-delay: 0.4s;
        }

        .dropdown-item:nth-child(8) {
            animation-delay: 0.45s;
        }

        .dropdown-item:nth-child(9) {
            animation-delay: 0.5s;
        }

        @keyframes slideInLeft {
            from {
                opacity: 0;
                transform: translateX(-20px);
            }

            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        /* Ensure dropdown doesn't interfere with existing layout */
        .main-header {
            position: relative;
        }

        .main-header .container {
            position: relative;
        }

        /* Tour controls positioning adjustment */
        .tour-controls {
            position: relative;
            z-index: 1000;
        }