/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

/* Basic Reset / Global Styles */
html {
    scroll-behavior: smooth; /* Optional: Smooth scrolling */
    overflow-x: hidden; /* Prevent horizontal scrolling at document level */
    overflow-y: auto; /* Allow vertical scrolling */
}

body, h1, h2, h3, p, ul, li, a {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif; /* Changed to Montserrat */
    box-sizing: border-box;
}

body {
    line-height: 1.6;
    color: #555; /* Slightly softer text color */
    background-color: #343a40; /* Match right panel background color */
    overflow-x: hidden; /* Prevent horizontal scrolling */
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

.main-wrapper {
    display: flex;
    position: relative; /* For absolute positioning of social panel */
    width: 100%;
    height: 100vh;
    overflow-x: hidden; /* Prevent horizontal scrolling */
    overflow-y: hidden; /* Prevent vertical scrolling at the wrapper level */
}

/* Fixed Left Panel */
.left-panel {
    flex: 0 0 40%; /* Increased from 33% to 40% */
    max-width: 40%; /* Increased from 33% to 40% */
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #343a40; /* Match main background */
    overflow: hidden; /* Prevent scrollbars if content overflows */
    position: relative; /* For overlay positioning */
    z-index: 1; /* Keep below navigation */
}

.left-panel .profile-pic {
    width: 100%; /* Full width of panel */
    height: 100%; /* Full height of panel */
    object-fit: cover; /* Cover the area, maintain aspect ratio */
    filter: none; /* Remove all filters */
    opacity: 1; /* Full opacity */
}

/* Profile info at bottom left */
.profile-info {
    position: absolute;
    bottom: 30px;
    left: 30px;
    z-index: 20; /* Above the overlay */
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Text shadow for legibility */
    max-width: 80%; /* Limit width */
}

.profile-info h1 {
    font-size: 1.8em; /* Smaller size */
    margin-bottom: 5px;
    color: #e05263; /* Red color matching section headers */
}

.profile-info .subtitle {
    font-size: 0.9em; /* Smaller size */
    color: #adb5bd; /* Light gray */
    margin-bottom: 5px;
}

.profile-info p {
    font-size: 0.8em; /* Smaller size */
    color: #ced4da; /* Very light gray */
}

/* Overlay for left panel */
.left-panel::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6); /* Darker overlay */
    z-index: 10; /* Above image but below other content */
    /* Add gradient to increase contrast at bottom for text */
    background: linear-gradient(to bottom, 
        rgba(0, 0, 0, 0.5) 0%, 
        rgba(0, 0, 0, 0.5) 70%, 
        rgba(0, 0, 0, 0.8) 100%);
}

/* Scrollable Right Panel - Add padding to the top */
.right-panel {
    flex: 1; /* Takes up remaining space */
    margin-left: 0; /* Removed left margin completely */
    margin-right: 5%; /* Space for social panel - reduced to 5% */
    height: 100vh;
    overflow-y: auto; /* Enable vertical scrolling */
    overflow-x: hidden; /* Prevent horizontal scrolling */
    position: relative; /* Needed for absolute/fixed positioning of children like nav */
    background-color: #343a40; /* Dark gray background */
    color: #f8f9fa; /* Light text for contrast */
    width: 55%; /* Explicitly set width */
    max-width: 55%; /* Ensure it doesn't exceed this width */
    padding-top: 60px; /* Add padding to account for fixed navigation */
}

/* Fixed Social Media Panel on Right */
.social-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 5%; /* Reduced from 10% to 5% */
    height: 100vh;
    background-color: #212529; /* Dark background */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Align content to bottom */
    align-items: center;
    z-index: 900;
    padding-bottom: 30px; /* Reduced space at bottom */
    padding-top: 0; /* Reset padding */
}

/* Container for social icons */
.social-icons {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 15px; /* Further reduced space below the vertical text */
}

/* Vertical "Contact" text */
.social-panel .vertical-text {
    position: relative; /* Changed from absolute to be part of the flex flow */
    writing-mode: vertical-lr; /* Vertical left-to-right for top-to-bottom reading */
    text-orientation: mixed;
    color: #adb5bd;
    font-size: 0.85rem; /* Slightly smaller font */
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 0; /* Remove bottom margin */
}

.social-panel a {
    color: #adb5bd; /* Light gray */
    font-size: 24px;
    margin: 12px 0; /* Reduced vertical margin */
    transition: color 0.3s ease, transform 0.3s ease;
}

.social-panel a:hover {
    color: #f8f9fa; /* White on hover */
    transform: scale(1.1);
}

/* Copyright text */
.copyright {
    text-align: center;
    padding: 30px 0;
    color: #6c757d;
    font-size: 0.9em;
}

/* Floating Navigation */
nav.main-nav {
    position: fixed; /* Remains fixed */
    top: 20px; /* Add top padding/margin (increased from 0px) */
    /* Position relative to right panel */
    left: 40%; /* Align with left edge of right panel (after 40% profile panel) */
    width: calc(55% - 0px); /* Width of right panel (60% - 5% right social panel) */
    /* Remove previous positioning and width calculations */
    background-color: #343a40; /* Exactly match right panel background */
    z-index: 1000;
    padding: 8px 0; /* Add some vertical padding */
    border-bottom: none; /* Remove bottom border for floating look */
    box-shadow: none; /* Removed shadow */
    border-radius: 0; /* No rounded corners */
    display: flex; /* Add flexbox for layout */
    justify-content: flex-end; /* Flush items to the right */
    align-items: center; /* Vertically center items */
    box-sizing: border-box; /* Include padding in width calculation */
    overflow: hidden; /* Prevent overflow */
}

/* Adjust nav links container */
nav.main-nav .nav-links {
    display: flex;
    width: auto; /* Only take needed width */
    gap: 0; /* Remove gap */
    list-style: none;
    align-items: center; /* Ensure vertical centering */
    height: 100%; /* Take full height of nav */
    margin: 0; /* Remove any margin */
    margin-right: 30px; /* Add some right margin */
    justify-content: flex-end; /* Space items to the right */
}

nav.main-nav .nav-links li {
    display: flex; /* Use flexbox */
    align-items: center; /* Center vertically */
    height: 100%; /* Full height */
    flex: 0 0 auto; /* Don't stretch */
    text-align: center;
}

nav.main-nav .nav-links a {
    color: #fff; /* White text for contrast */
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    display: flex; /* Use flexbox for all nav links */
    align-items: center; /* Center content vertically */
    justify-content: center; /* Center horizontally */
    padding: 15px 20px; /* Add horizontal padding to menu items */
    width: 100%; /* Full width */
}

nav.main-nav .nav-links a:hover,
nav.main-nav .nav-links a.active {
    color: rgba(176, 196, 222, 1); /* Light steel blue on hover - matches logo mark background */
    background-color: rgba(0, 0, 0, 0.2); /* Slight background darkening on hover */
}

/* Resume Nav Button - Simplified */
.nav-download-btn {
    background-color: rgba(224, 82, 99, 0.8); /* Red color matching section headers */
    padding: 10px 15px; /* Slightly increased padding */
    border-radius: 5px; /* Rounded corners */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 15px; /* Add some space from other menu items */
    transition: all 0.3s ease;
}

.nav-download-btn i {
    margin-right: 5px; /* Smaller gap */
    font-size: 0.85em; /* Slightly smaller icon */
}

.nav-download-btn:hover {
    background-color: rgba(224, 82, 99, 1); /* Solid color on hover */
    color: white !important; /* White text */
    transform: translateY(-2px); /* Slight lift effect */
}

/* Content sections within Right Panel - Update to ensure proper spacing */
.right-panel section,
.right-panel footer {
    border-bottom: none; /* Remove borders between sections */
    margin: 0 0 40px 0; /* Remove horizontal margins, keep bottom margin */
    width: 100%;
    padding: 40px 40px; /* Symmetric padding */
    box-sizing: border-box; /* Include padding in width */
    overflow: hidden; /* Prevent content overflow */
    background-color: #343a40; /* Match right panel background */
    position: relative; /* For positioning */
}

.container {
    max-width: 100%; /* Full width */
    margin: 0; /* Remove auto margins */
    width: 100%; /* Ensure full width */
    box-sizing: border-box; /* Include padding in width */
    overflow: hidden; /* Prevent content overflow */
}

/* Hero Content Specific Styles - Adjust padding */
#home-content {
    /* Estimate nav height (~60px) + desired space */
    padding-top: 80px; /* Adjusted padding to ensure content stays below nav */
    height: calc(100vh - 100px); /* Full viewport height minus nav padding */
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Align to left */
    text-align: left;
    margin-top: 0; /* Ensure no margin at top */
}

.centered-hero {
    /* Styles for centered hero content */
}

#home-content h1 {
    font-size: 3em;
    color: #f8f9fa; /* Light text color */
    margin-bottom: 5px; /* Reduced spacing */
}

#home-content .subtitle {
    font-size: 1.4em;
    color: #6c757d; /* Medium gray color */
    margin-bottom: 15px; /* Adjust as needed */
    font-weight: 500;
}

#home-content p {
    font-size: 2em; /* Set to 2em */
    color: #adb5bd; /* Lighter gray for location */
}

/* New headline text */
.headline-text {
    max-width: 95%;
    margin-left: 0; /* Align to left */
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.headline-text p {
    font-size: 2.6em; /* Increased from 2.3em */
    line-height: 1.4;
    color: #f8f9fa; /* Light color */
    font-weight: 300; /* Lighter weight */
    max-width: 95%;
    margin-left: 0; /* Align to left */
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Highlighted text style */
.highlight {
    color: #e05263; /* Same red color as section headers */
    font-weight: 500; /* Slightly bolder than surrounding text */
    position: relative;
}

/* Additional highlight styles for specific text in about section */
#about .core-skills,
#about .off-the-clock {
    color: #e05263; /* Same red color as section headers */
    font-weight: 600; /* Slightly bolder than regular highlight */
    display: inline-block;
}

/* Add scroll margin to sections for better scroll positioning */
section[id] {
    scroll-margin-top: 80px; /* Matches nav height plus some padding */
}

/* General Section/Footer Styling */
h2 {
    text-align: left;
    margin-bottom: 30px; /* Reduced from 50px */
    font-size: 1.6em; /* Smaller size (from 2.2em) */
    color: #e05263; /* Red color for section headers */
    font-weight: 600;
    padding-top: 15px; /* Add padding to avoid content touching the top */
}

/* Remove duplicate/overriding section backgrounds */
#projects {
    background-color: #343a40 !important;
}
#cv {
    background-color: #383e44 !important;
}

#about {
    background-color: #343a40;
    margin-top: 80px;
}

#musings {
    background-color: #383e44;
}

#about p {
    margin-bottom: 20px;
    text-align: left;
    color: #adb5bd; /* Light gray for contrast */
}

/* Projects Section */
#projects .project-grid,
#musings .project-grid {
    padding: 20px 0;
}

.project-card {
    background-color: #212529;
    border-radius: 8px;
    padding: 25px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
    border-left: 3px solid #e05263;
    box-sizing: border-box;
    overflow: hidden;
    word-wrap: break-word;
    margin: 0 auto 30px auto;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    border: 1px solid rgba(180,180,180,0.08);
}

.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.3);
}

.project-card h3 {
    margin-bottom: 15px;
    color: #e05263; /* Changed from #6c757d to #e05263 (red) to match section headers */
    font-size: 1.3em;
}

.project-card h4 {
    margin-top: 20px;
    margin-bottom: 10px;
    color: #e05263; /* Red color matching section headers */
    font-size: 1.1em;
}

.project-card p {
    color: #adb5bd; /* Light gray */
    margin-bottom: 15px;
    line-height: 1.6;
}

.project-card ul, .project-card ol {
    color: #adb5bd; /* Light gray */
    margin-left: 20px;
    margin-bottom: 20px;
}

.project-card li {
    margin-bottom: 8px;
    line-height: 1.5;
}

.project-card strong {
    color: #f8f9fa; /* Light text for emphasis */
}

/* Project Screenshots */
.project-screenshots {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin: 25px 0;
    width: 100%;
    box-sizing: border-box;
}

.project-image {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
    flex: 1 1 300px;
    box-sizing: border-box;
}

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

.project-button {
    display: inline-block;
    background-color: #e05263; /* Red color matching section headers */
    color: #fff;
    padding: 12px 25px;
    border-radius: 5px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: 15px;
}

.project-button:hover {
    background-color: #d14354; /* Slightly darker red */
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(224, 82, 99, 0.3);
}

/* Expandable content styling */
.expandable-content {
    display: none;
    padding-top: 20px;
    border-top: 1px solid #495057;
    margin-top: 20px;
    width: 100%;
    box-sizing: border-box;
}

.expandable-content.expanded {
    display: block;
    animation: fadeIn 0.5s ease;
}

.expandable-content ul, 
.expandable-content ol {
    padding-left: 20px;
    box-sizing: border-box;
}

.expand-section {
    margin-top: 15px;
    text-align: center;
}

.expand-toggle {
    display: inline-flex;
    align-items: center;
    color: #adb5bd;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 8px 15px;
    border-radius: 4px;
    background-color: #343a40;
    transition: all 0.3s ease;
}

.expand-toggle:hover {
    color: #fff;
    background-color: #495057;
}

.expand-toggle i {
    margin-right: 8px;
    transition: transform 0.3s ease;
}

.expand-toggle.expanded i {
    transform: rotate(180deg);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Responsive adjustments for project cards */
@media (max-width: 992px) {
    .project-card {
        padding: 20px;
        width: 100%;
        max-width: 100%;
    }
    
    .project-screenshots {
        flex-direction: column;
        width: 100%;
    }
    
    .project-image {
        flex: 1 1 100%;
        max-width: 100%;
        margin-bottom: 10px;
    }
    
    .expandable-content img {
        max-width: 100%;
        height: auto;
    }
}

/* Resume Section */
#resume {
    background-color: #2c3034; /* Match about section */
    padding: 40px;
    width: 100%;
    text-align: center;
    box-shadow: none; /* Remove shadow */
    border: none; /* Remove border */
}

#resume p {
    color: #adb5bd; /* Light gray */
    margin-bottom: 25px;
}

.btn {
    display: inline-block;
    background-color: #007bff;
    color: #fff;
    padding: 12px 30px;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
    text-decoration: none;
    font-size: 1.05em;
}

.btn:hover {
    background-color: #0056b3;
    text-decoration: none;
    color: #fff;
}

/* Download Button Specific Styles */
.download-btn {
    background-color: rgba(72, 61, 139, 0.9); /* Match navigation color */
    padding: 15px 35px; /* Larger padding */
    border-radius: 30px; /* More rounded */
    font-size: 1.1em; /* Larger text */
    box-shadow: 0 4px 15px rgba(72, 61, 139, 0.4); /* Colored shadow */
    transition: all 0.3s ease;
    display: inline-flex; /* For better icon alignment */
    align-items: center;
    justify-content: center;
}

.download-btn i {
    margin-right: 10px; /* Space between icon and text */
    font-size: 1.2em; /* Slightly larger icon */
}

.download-btn:hover {
    background-color: rgba(72, 61, 139, 1); /* Solid color on hover */
    transform: translateY(-2px); /* Slight lift effect */
    box-shadow: 0 6px 18px rgba(72, 61, 139, 0.5); /* Enhanced shadow on hover */
}

/* Contact / Footer */
footer#contact {
    background-color: #2c3136; /* Slightly darker than other sections */
    color: #f8f9fa;
    padding: 40px;
    width: 100%;
    text-align: left;
    margin-bottom: 0;
}

footer#contact h2 {
    margin-bottom: 20px;
    color: #e05263; /* Same red color as other section headers */
    text-align: left;
}

footer#contact p {
    margin-bottom: 15px;
    max-width: 600px;
    margin-left: 0;
    margin-right: auto;
}

.email-contact {
    font-size: 1.2em;
    font-weight: 500;
    color: #007bff;
    margin: 25px 0;
}

.social-links {
    display: flex;
    justify-content: flex-start;
    list-style: none;
    padding: 0;
    margin: 30px 0 20px;
    gap: 30px;
}

.social-links li {
    padding: 0; /* Reset padding */
}

.social-links li a {
    color: #f8f9fa;
    font-size: 1.2em;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

.social-links li a:hover {
    color: #007bff;
    text-decoration: none;
}

/* Remove old styles */
/* header#home, header nav (old styles) - Removed or adjusted */
/* .hero-content (old styles) - Adjusted */
/* .profile-pic (old styles in header) - Moved to left-panel */

/* Responsive Adjustments */
@media (max-width: 992px) { /* Tablet and smaller */
    .left-panel {
        width: 100%;
        max-width: 100%;
        height: auto; /* Adjust height */
        position: static; /* No longer fixed */
        padding: 0; /* Remove padding for full width image */
    }

    .left-panel .profile-pic {
        height: 60vh; /* Example height for stacked view */
        width: 100%;
        filter: grayscale(30%) brightness(90%); /* Slightly less effect on mobile */
    }

    /* Adjust overlay on mobile */
    .left-panel::after {
        background-color: rgba(0, 0, 0, 0.3); /* Lighter overlay on mobile */
    }

    .right-panel {
        margin-left: 0; /* Remove margin */
        margin-right: 0; /* Remove margin */
        width: 100%;
        max-width: 100%; /* Allow full width on mobile */
        height: auto; /* Allow natural height */
        overflow-y: visible; /* Disable panel scrolling */
    }

    .social-panel {
        position: static;
        width: 100%;
        height: auto;
        flex-direction: row;
        padding: 20px 0;
        justify-content: center; /* Center horizontally when stacked */
    }

    .social-panel .vertical-text {
        display: none; /* Hide vertical text on mobile */
    }

    .social-icons {
        display: flex;
        flex-direction: row;
        margin-top: 0;
    }

    .social-panel a {
        margin: 0 15px;
    }

    nav.main-nav {
        position: static; /* Revert to static for stacked layout */
        width: 100%; /* Full width */
        transform: none; /* Remove transform */
        /* Reset fixed positioning offsets */
        top: auto;
        left: auto;
        right: auto;
        padding: 15px 20px;
        box-shadow: none;
        border-bottom: 1px solid #495057; /* Darker border for dark theme */
        border-radius: 0; /* Reset border-radius */
        flex-direction: column; /* Stack logo and nav links */
        gap: 10px; /* Space between logo and links */
    }

    .logo {
        margin-bottom: 5px; /* Space below logo when stacked */
    }
    
    nav.main-nav .nav-links {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap; /* Allow wrapping on small screens */
    }
    
    nav.main-nav .nav-links li {
        margin: 5px 0; /* Add vertical spacing when wrapped */
    }

    .right-panel section,
    .right-panel footer {
        padding: 60px 20px 40px 20px; /* Adjust padding */
    }

    #home-content {
        padding-top: 20px; /* Reset top padding for static nav */
        text-align: center;
        height: auto; /* Allow natural height */
        min-height: 60vh; /* Minimum height to match profile pic */
    }

    #home-content h1 {
        font-size: 2.2em; /* Smaller on mobile */
    }
    
    #home-content .subtitle {
        font-size: 1.1em; /* Smaller on mobile */
    }
    
    .headline-text p {
        font-size: 1.8em; /* Smaller on mobile */
        max-width: 100%; /* Full width on mobile */
    }

    .project-grid {
        grid-template-columns: 1fr; /* Stack projects */
    }
    
    /* Improve project cards on mobile */
    .project-card {
        padding: 20px;
        width: 100%;
        max-width: 100%;
    }
    
    .project-screenshots {
        flex-direction: column;
        width: 100%;
    }
    
    .project-image {
        flex: 1 1 100%;
        max-width: 100%;
        margin-bottom: 10px;
    }
}

@media (max-width: 768px) {
    /* Further adjustments for mobile if needed */
    h1 {
        font-size: 2em; /* Smaller on mobile */
    }
    
    h2 {
        font-size: 1.6em; /* Smaller on mobile */
    }
    
    .headline-text p {
        font-size: 1.5em; /* Even smaller on mobile */
        line-height: 1.4;
    }
    
    /* Adjust padding for better mobile spacing */
    .right-panel section {
        padding: 40px 15px;
    }
}

@media (max-width: 576px) {
    /* For very small screens */
    .logo-text {
        font-size: 16px;
    }
    
    nav.main-nav {
        padding: 12px 20px;
    }
    
    nav.main-nav .nav-links {
        flex-direction: column; /* Stack nav links on very small screens */
        align-items: center;
    }
    
    nav.main-nav .nav-links a {
        padding: 10px 15px;
    }
    
    .headline-text p {
        font-size: 1.3em; /* Smallest size for tiny screens */
    }
    
    /* Adjust timeline for better display on small screens */
    .timeline::after {
        left: 15px; /* Move line closer to edge */
    }
    
    .entry {
        padding-left: 45px; /* Reduce left padding */
        padding-right: 10px; /* Reduce right padding */
    }
}

.resume-download {
    text-align: center;
    margin-top: 60px;
}

/* Timeline Styles - Reduce width and fix horizontal scrolling */
.timeline {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 30px auto 0; /* Reduced from 40px */
    padding: 0;
    overflow: hidden; /* Prevent any overflow */
    box-sizing: border-box;
}

.timeline::after {
    content: '';
    position: absolute;
    width: 2px; /* Thinner line (from 6px) */
    background: rgba(180, 180, 180, 0.3); /* Light gray line */
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -1px; /* Adjusted for thinner line */
}

/* Branch containers - Reduce vertical spacing */
.entry {
    padding: 10px 30px; /* Reduced vertical padding from 20px to 10px */
    position: relative;
    width: 50%;
    margin-bottom: 15px; /* Reduced from 30px */
    box-sizing: border-box; /* Ensure padding is included in width */
}

.entry.left {
    left: 0;
    padding-right: 40px; /* More space for the line */
}

.entry.right {
    left: 50%;
    padding-left: 40px; /* More space for the line */
}

/* Make sure timeline entries don't cause overflow */
.entry.left, .entry.right {
    box-sizing: border-box;
    max-width: 50%;
    overflow: hidden;
}

/* Content box */
.timeline .content {
    background: #343a40; /* Match main background */
    border: 1px solid #495057; /* Add subtle border for definition */
    padding: 20px 25px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden; /* Prevent overflow */
    word-wrap: break-word; /* Allow long words to break */
}

/* Handle very long text in timeline entries */
.timeline .content h3, 
.timeline .content p {
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Circles on trunk */
.entry::after {
    content: '';
    position: absolute;
    width: 12px; /* Smaller circle (from 20px) */
    height: 12px; /* Smaller circle (from 20px) */
    background: rgba(180, 180, 180, 0.5); /* Solid light gray fill */
    border: none; /* Remove border */
    top: 25px;
    border-radius: 50%;
    z-index: 1;
}

.entry.left::after {
    right: -6px; /* Adjusted for smaller circle */
}

.entry.right::after {
    left: -6px; /* Adjusted for smaller circle */
}

/* Branch arms */
.entry::before {
    content: '';
    position: absolute;
    width: 30px;
    height: 2px; /* Thinner line (from 4px) */
    background: rgba(180, 180, 180, 0.3); /* Light gray to match timeline */
    top: 31px; /* Adjusted for centered alignment with smaller circle */
}

.entry.left::before {
    right: 0;
}

.entry.right::before {
    left: 0;
}

/* Content box */
.timeline .content h3 {
    margin-top: 0;
    font-size: 1.1rem;
    color: #f8f9fa; /* Light text */
    font-weight: 600;
}

/* Style for position titles in the timeline */
.timeline .content h3 .position {
    color: #e05263; /* Red color matching section headers */
    display: inline-block;
    margin-bottom: 3px;
}

/* Style for company names in the timeline */
.timeline .content h3 .company {
    color: #f8f9fa; /* White text */
    font-size: 0.9em;
    font-weight: 500;
    display: inline-block;
}

.timeline .content span.date {
    display: block;
    font-size: 0.85rem;
    color: #adb5bd; /* Light gray */
    margin-bottom: 12px;
}

.timeline .content p {
    color: #ced4da; /* Very light gray */
    line-height: 1.5;
    margin-bottom: 0;
}

/* Responsive adjustments */
@media (max-width: 800px) {
    /* Timeline styles for mobile are now handled in the 992px media query below */
}

/* Fade animations */
.fade-in {
    opacity: 0.2; /* Start with slight visibility instead of completely hidden */
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform; /* Performance optimization */
}

.fade-in.visible {
    opacity: 1 !important; /* Force 100% opacity */
    transform: translateY(0) !important; /* Force complete transform */
}

/* Different animation delay classes */
.delay-100 {
    transition-delay: 0.1s;
}

.delay-200 {
    transition-delay: 0.2s;
}

.delay-300 {
    transition-delay: 0.3s;
}

.delay-400 {
    transition-delay: 0.4s;
}

.delay-500 {
    transition-delay: 0.5s;
}

/* Animation for timeline entries */
.timeline .entry {
    opacity: 0.2; /* Start with slight visibility */
    transform: translateY(10px); /* Reduced from 30px for subtler effect */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, transform; /* Performance optimization */
}

.timeline .entry.visible {
    opacity: 1 !important; /* Force 100% opacity */
    transform: translateY(0) !important; /* Force complete transform */
}

.timeline .entry.left {
    transform: translateX(-20px); /* Reduced from -50px for subtler effect */
}

.timeline .entry.right {
    transform: translateX(20px); /* Reduced from 50px for subtler effect */
}

.timeline .entry.left.visible,
.timeline .entry.right.visible {
    transform: translateX(0) !important; /* Force complete transform */
}

/* Mobile hamburger menu icon and drawer */
.mobile-menu-toggle {
    display: none;
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 1500;
    cursor: pointer;
    background-color: rgba(33, 37, 41, 0.8);
    padding: 10px;
    border-radius: 5px;
}

.mobile-menu-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px 0;
    background-color: #fff;
    transition: all 0.3s ease;
}

/* Hamburger animation */
.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
}

/* Improved responsive adjustments for mobile devices */
@media (max-width: 992px) { 
    /* Show hamburger menu */
    .mobile-menu-toggle {
        display: block;
    }
    
    /* Hide regular nav, display only when active */
    nav.main-nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(33, 37, 41, 0.95);
        transform: translateY(-100%);
        transition: transform 0.3s ease-in-out;
        padding: 60px 20px 20px;
        z-index: 1200;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    nav.main-nav.active {
        transform: translateY(0);
    }
    
    nav.main-nav .nav-links {
        width: 100%;
        flex-direction: column;
        align-items: center;
        margin: 0;
    }
    
    nav.main-nav .nav-links li {
        margin: 10px 0;
        width: 100%;
        text-align: center;
    }
    
    nav.main-nav .nav-links a {
        padding: 15px;
        font-size: 1.2em;
        width: 100%;
        display: block;
    }
    
    /* Rearrange layout to display profile at top */
    .main-wrapper {
        flex-direction: column;
        height: auto;
        overflow-y: visible;
    }
    
    .left-panel {
        width: 100%;
        max-width: 100%;
        height: auto;
        position: relative;
        order: 1;
        min-height: 40vh;
        max-height: 50vh;
        display: flex;
        flex-direction: column;
    }
    
    .left-panel .profile-pic {
        height: 100%;
        width: 100%;
        object-position: center 15%; /* Focus more on face */
    }
    
    /* Adjust profile info to be more visible on mobile */
    .profile-info {
        bottom: 15px;
        left: 15px;
        max-width: 90%;
    }
    
    .right-panel {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        max-width: 100%;
        height: auto;
        overflow-y: visible;
        order: 2;
        padding-top: 20px;
    }
    
    /* Move social panel to bottom */
    .social-panel {
        position: static;
        width: 100%;
        height: auto;
        flex-direction: row;
        padding: 20px 0;
        justify-content: center;
        order: 3;
        background-color: #212529;
    }
    
    .social-panel .vertical-text {
        display: none;
    }
    
    .social-icons {
        display: flex;
        flex-direction: row;
        margin-top: 0;
        width: 100%;
        justify-content: center;
    }
    
    .social-panel a {
        margin: 0 15px;
        font-size: 1.5em; /* Larger icons on mobile */
    }
    
    /* Home content adjustments */
    #home-content {
        padding-top: 20px;
        text-align: center;
        height: auto;
        min-height: auto;
    }
    
    /* TIMELINE MOBILE STYLES - COMPLETE RESET */
    .timeline {
        width: 100%;
        max-width: 100%;
        padding: 0;
        margin: 30px 0 0;
        box-sizing: border-box;
        overflow: visible;
        display: block;
    }
    
    .timeline::after {
        display: none; /* Hide the timeline center line */
    }
    
    /* Reset entry styling completely */
    .entry, .entry.left, .entry.right {
        width: 100%;
        max-width: 100%;
        padding: 0;
        margin: 0 0 25px 0;
        left: 0;
        right: 0;
        position: relative;
        box-sizing: border-box;
        overflow: visible;
        transform: none !important; /* Remove any transforms */
        opacity: 1 !important; /* Ensure visibility */
    }
    
    /* Hide all timeline visual elements */
    .entry::before, .entry::after, 
    .entry.left::before, .entry.left::after,
    .entry.right::before, .entry.right::after {
        display: none;
    }
    
    /* Complete reset of content styling */
    .timeline .content {
        background: transparent;
        border: none;
        padding: 0;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
        width: 100%;
        max-width: 100%;
        display: block;
        box-sizing: border-box;
    }
    
    /* Ensure all text elements span full width */
    .timeline .content h3,
    .timeline .content span.date,
    .timeline .content p,
    .timeline .content .position,
    .timeline .content .company {
        width: 100%;
        max-width: 100%;
        padding: 0;
        margin-left: 0;
        margin-right: 0;
        box-sizing: border-box;
        display: block;
        text-align: left;
    }
    
    /* Add subtle separators between entries */
    .entry:not(:last-child) {
        border-bottom: 1px solid rgba(180, 180, 180, 0.2);
        padding-bottom: 20px;
    }
    
    /* Adjust spacing and typography for mobile */
    .timeline .content h3 {
        margin-bottom: 5px;
        font-size: 1.1rem;
    }
    
    .timeline .content .position {
        display: block;
        margin-bottom: 3px;
        color: #e05263;
    }
    
    .timeline .content .company {
        display: block;
        margin-bottom: 5px;
        color: #f8f9fa;
    }
    
    .timeline .content span.date {
        margin-bottom: 10px;
    }
    
    .timeline .content p {
        margin-bottom: 15px;
    }
    
    /* Remove animation classes that might interfere */
    .timeline .entry.visible,
    .timeline .entry.left.visible,
    .timeline .entry.right.visible {
        transform: none !important;
        opacity: 1 !important;
    }
}

#musings .project-grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-top: 20px;
    max-width: 100%;
    box-sizing: border-box;
}

#musings .project-card {
    background-color: #212529;
    border-radius: 8px;
    padding: 25px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
    border-left: 3px solid #e05263;
    box-sizing: border-box;
    overflow: hidden;
    word-wrap: break-word;
}

#musings .project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.3);
}

#musings .project-card h3 {
    margin-bottom: 15px;
    color: #e05263;
    font-size: 1.3em;
}

#musings .project-card h3 a {
    color: #e05263;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s;
}

#musings .project-card h3 a:hover {
    color: #f8f9fa;
    text-decoration: underline;
}

#musings .project-card p {
    color: #adb5bd;
    margin-bottom: 15px;
    line-height: 1.6;
}

#musings .project-image {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
    margin-bottom: 15px;
}

#musings .project-image:hover {
    transform: scale(1.02);
}

/* Responsive adjustments for musings cards */
@media (max-width: 992px) {
    #musings .project-card {
        padding: 20px;
        width: 100%;
        max-width: 100%;
    }
    #musings .project-image {
        max-width: 100%;
        margin-bottom: 10px;
    }
}