/* Remove the unused noto-sans-normal-text rule */
/*
.noto-sans-normal-text {
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
*/

/* Basic CSS Reset (optional but recommended) */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Basic body padding adjusted to match fixed header */
body {
    font-family: 'Noto Sans', sans-serif;
    /* Use the Noto Sans font */
    line-height: 1.6;
    background-color: #B3B4BD;
    /* Default background for pages without specific background */
    color: #141619;
    /* Normal text color */
    padding-top: 60px;
    /* Space for the fixed header */
    margin: 0;
    /* Ensure no default body margin */
    min-height: 100vh;
    /* Ensure body is at least viewport height */
    display: flex;
    /* Use flexbox to push footer down */
    position: relative;
    /* Needed for absolute positioning of the pseudo-element */
    flex-direction: column;
    /* Stack content vertically */
}

/* Main content area styling */
main {
    flex-grow: 1;
    /* Allows main content to fill available space, pushing footer down */
    padding: 60px 0;
    /* Add padding top and bottom to main content */
    display: block;
    /* Ensure main is block-level */
    /* Removed min-height calc here, flex-grow handles pushing footer */
}

main .container {
    /* .container styles are already defined and work inside main */
    width: 90%;
    /* Slightly wider container */
    max-width: 1200px;
    /* Max width for larger screens */
    margin: auto;
    overflow: hidden;
    padding: 0 20px;
    /* Add some padding on the sides */
}


/* Page-Specific Backgrounds (applied to main content area via body class) */

body.about-page main {
    background-color: #f4f4f4;
    /* Original #about background */
    color: #141619;
    /* Original #about text color */
}

body.projects-page main {
    background-color: #B3B4BD;
    /* Original #projects background */
    color: #141619;
    /* Original #projects text color */
    padding-top: 68px;
}

body.contact-page main {
    background-color: #2C2E3A;
    /* Original #contact background */
    color: #B3B4BD;
    /* Original #contact text color */
}

body.services-page main {
    background-color: #f4f4f4;
    /* Example background, choose from your palette */
    color: #141619;
    /* Example text color */
}


/* Styles for headings inside main */
main h2 {
    margin-top: 1em;
    text-align: center;
    margin-bottom: 40px;
    font-size: 36px;
    color: #050A44;
    /* Very dark blue for section headings */
}

/* Header Styling */
header {
    background: #050A44;
    /* Very dark blue background */
    color: #B3B4BD;
    /* Light grey text */
    padding: 10px 0;
    min-height: 60px;
    /* Fixed height for header */
    position: fixed;
    /* Fix header to the top */
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    /* Ensure header is above other content */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    /* Subtle shadow */
}

header .container {
    display: flex;
    /* Use flexbox for layout */
    justify-content: space-between;
    /* Space out logo and nav */
    align-items: center;
    /* Vertically align items */
}

header h1 {
    margin-left: 1em;
    font-size: 24px;
}

header nav ul {
    list-style: none;
    padding: 0;
    margin: 1em;
}

header nav ul li {
    display: inline-block;
    /* Display list items inline */
    margin-left: 20px;
    /* Add space between nav items */
}

header nav ul li a {
    opacity: 0;
    /* Initially transparent */
    transform: translateY(10px);
    /* Initially moved down by 10 pixels */
    transition: opacity 1s ease-in-out, transform 1s ease-in-out;
    /* Smooth transition for opacity and transform */
    display: inline-block;
    /* Important for applying transformations and padding correctly */
    text-decoration: none;
    /* Remove default link underline */
    color: #B3B4BD;
    /* Your desired text color */
    /* Add other base styles for your buttons here */
}

body.loaded header nav ul li a {
    /* Or a more specific selector if needed */
    opacity: 1;
    /* Fade in to full opacity */
    transform: translateY(0);
    /* Rise to their final position */
}

header nav a {
    color: #B3B4BD;
    /* Light grey link color */
    text-decoration: none;
    font-weight: 500;
    /* Slightly bolder for nav links */
    transition: color 0.3s ease;
    /* Smooth color transition on hover */
}

header nav a:hover {
    color: #0A21C0;
    /* Bright blue on hover */
}

header nav ul li a::after {
    content: '';
    /* Required for pseudo-elements */
    position: absolute;
    bottom: -5px;
    /* Position at the bottom of the link */
    left: 50%;
    /* Start in the horizontal center */
    transform: translateX(-50%) scaleX(0);
    /* Center and initially scaleX to 0 (no width) */
    width: 0.5em;
    /* Initial width of the "dot" (adjust as needed) */
    height: 0.15em;
    /* Thickness of the underline (adjust as needed) */
    background-color: #0A21C0;
    /* Your desired underline color */
    border-radius: 50%;
    /* Make it a circle initially */
    transition: transform 0.3s ease-in-out, width 0.3s ease-in-out, border-radius 0.3s ease-in-out, left 0.3s ease-in-out;
}

header nav ul li a:hover::after {
    transform: translateX(0) scaleX(1);
    /* Expand to full width */
    width: 100%;
    /* Make it the full width of the link */
    border-radius: 0;
    /* Make it a rectangle */
    left: 0;
    /* Align to the left edge */
}

header img {
    margin-left: 3em;
    margin-top: 0em;
    height: 100%;
    /* Makes the image fill the height of its parent (the header) */
    width: auto;
    /* Allows the width to adjust proportionally */
    max-height: 80px;
    /* Optional: set a max height if header height is fluid */
}

/* --- Service Card Styling --- */
.service-category {
    background-color: #ffffff;
    /* White background for the card */
    border-radius: 12px;
    /* Nicely rounded corners */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
    /* Soft, professional shadow */
    padding-right: 40px;
    /* Generous padding inside the card */
    padding-left: 40px;
    /* Generous padding inside the card */
    padding-bottom: 40px;
    margin-bottom: 40px;
    /* Space between cards */
    border: 1px solid #e0e6ed;
    /* Subtle border */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Smooth hover effect */
    display: flex;
    /* Use flexbox for internal layout */
    flex-direction: column;
    /* Stack content vertically */
    align-items: flex-start;
    /* Align content to the start */
}

.service-category:hover {
    transform: translateY(-8px);
    /* Lift card slightly on hover */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    /* More pronounced shadow on hover */
}

.service-category p {
    font-size: 1.05em;
    color: #555;
    margin-bottom: 15px;
    text-align: left;
    width: 100%;
}

.service-category ul {
    padding-left: 25px;
    margin: 0;
    width: 100%;
}

.service-category ul li {
    position: relative;
    padding-left: 10px;
    /* Space for custom bullet */
    margin-bottom: 8px;
}

.service-category h3 {
    padding-bottom: 5px;
}

/* --- Call to Action Button Styling --- */
.cta-button {
    display: inline-block;
    /* Allows padding and margin, but respects content width */
    background-color: #0a21c0;
    /* Your brand blue */
    color: #ffffff;
    /* White text */
    padding: 14px 28px;
    text-decoration: none;
    /* Remove underline */
    text-align: center;
    border-radius: 8px;
    /* Rounded button corners */
    font-weight: bold;
    font-size: 1.1em;
    margin-top: 25px;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    /* Subtle button shadow */
}

.cta-button:hover {
    background-color: #071a99;
    /* Slightly darker blue on hover */
    transform: translateY(-2px);
    /* Slight lift on hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    /* Enhanced shadow on hover */
}

/* Primary CTA at the bottom */
.cta-bottom {
    text-align: center;
    margin-top: 60px;
    padding: 40px;
    background-color: #ffffff;
    /* Light blue background for the final CTA section */
    border-radius: 12px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
    /* Soft, professional shadow */
}

.cta-bottom h2 {
    font-size: 2.5em;
    color: #0a21c0;
    margin-bottom: 15px;
}

.cta-bottom p {
    font-size: 1.2em;
    color: #444;
    margin-bottom: 30px;
}

.cta-button.primary {
    background-color: #0a21c0;
    /* Main brand color for primary CTA */
    padding: 18px 35px;
    font-size: 1.25em;
}

.cta-button.primary:hover {
    background-color: #071a99;
}

.contact-info {
    width: fit-content; /* Adjust as needed, e.g., 250px, 300px, or fit-content */
    margin: 0 auto; /* Centers the div horizontally on the page */
    text-align: left; /* Aligns the text inside the div to the left */
    padding-top: 50px;
}

.contact-info p {
    margin: 0;
    /* Remove default paragraph margins */
    padding: 0;
    /* Remove default paragraph padding */
}

/* Section Styling (Only Hero remains as a 'section' acting as a page area) */
/* The previous general section padding can likely be removed or adjusted */
/* section { padding: 60px 0; } - This was for single page layout sections, may not be needed now */


/* Hero Section */
#hero {
    background: linear-gradient(to right, #050A44, #2C2E3A);
    /* Gradient background */
    color: #B3B4BD;
    /* Light grey text */
    text-align: center;
    padding: 100px 0;
    /* More padding for a larger hero area */
    display: flex;
    /* Use flexbox to center content */
    flex-direction: column;
    /* Stack container and keyboard vertically */
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 60px);
    /* Full viewport height minus header height */
    position: relative;
    /* Needed for absolute positioning of keys */
    overflow: hidden;
    /* Hide keys if they go outside hero boundaries */
}

#hero .container {
    z-index: 1;
    /* Ensure hero content is above the keys */
    position: relative;
    /* Needed for z-index to work */
}

/* Styles for the Keyboard Effect */
.keyboard-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Make container full height of hero to track mouse */
    pointer-events: none;
    /* IMPORTANT: Allows clicks to pass through to content */
    display: flex;
    /* Use flexbox to lay out keys horizontally */
    align-items: flex-end;
    /* Align keys to the bottom */
}

.piano-key {
    flex-grow: 1;
    /* Keys will share the width equally */
    height: 0;
    /* Initial height */
    background-color: rgba(10, 33, 192, 0.3);
    /* Bright blue with transparency */
    transition: height 0.25s ease-in-out;
    /* Smooth transition for height changes */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Optional: Add a subtle border between keys */
.piano-key+.piano-key {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

#hero h2 {
    margin: 0 0 10px 0;
    font-size: 48px;
    /* Larger font size for hero heading */
    color: #0A21C0;
    /* Bright blue for the main heading */
}

#hero p {
    font-size: 20px;
    margin-bottom: 30px;
}

.main-btn {
    display: inline-block;
    background: #0A21C0;
    /* Bright blue background */
    color: #B3B4BD;
    /* Light grey text */
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 18px;
    transition: background-color 0.3s ease;
}

.main-btn:hover {
    background-color: #050A44;
    /* Darker blue on hover */
}

/* Styles for the About content (used within main on about.html) */
/* Changed selector from #about .about-content to just .about-content */
.about-content {
    display: flow-root;
    /* Contains floats */
    /* Or you could use overflow: hidden; if flow-root isn't supported everywhere,
       or even flexbox/grid for more complex layouts if needed */
}

.profile-img {
    width: 150px;
    /* Set a width for the image */
    height: auto;
    /* Maintain aspect ratio */
    border-radius: 50%;
    /* Make the image round */
    float: left;
    /* Float the image to the left */
    margin: 0 20px 20px 0;
    /* Add margin: top right bottom left */
    shape-outside: circle();
    /* Makes text wrap tightly around a round image */
    /* shape-outside may require the image to have display: block; or display: inline-block;
       but float usually handles this */
}

/* Styles for paragraphs within about content */
/* Changed selector from #about p to .about-content p */
.about-content p {
    margin-bottom: 15px;
    /* Add space between paragraphs */
}

/* Changed selector from #about p:last-child to .about-content p:last-child */
.about-content p:last-child {
    margin-bottom: 0;
    /* Remove margin from the last paragraph */
}

/* Styles for the Projects grid (used within main on projects.html) */
/* Selector remains .project-grid */
/* Styles for the Projects grid (used within main on projects.html) */
.project-grid {
    display: flex; /* Use flexbox to easily stack and center */
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center the cards horizontally */
    gap: 40px; /* Add vertical space between cards */
    padding: 20px; /* Add some padding around the entire grid */
}

/* New style for the clickable project item link */
.project-item-link {
    text-decoration: none; /* Remove underline from the link */
    color: inherit; /* Inherit text color from parent to avoid default blue link color */
    display: block; /* Make the link fill the width of its parent to encapsulate the card */
    width: 100%; /* Ensure the link takes full width within the grid column */
    max-width: 600px; /* Limit the width of the project card, adjust as needed */
}

.project-item {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
    padding: 40px; /* Consolidated padding */
    border: 1px solid #e0e6ed;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content within the card */
    text-align: center; /* Center text within the card */
    height: 100%; /* Ensure cards are same height if in a grid layout (not strictly needed with flex-direction: column but good practice) */
}

.project-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

.project-item img {
    max-width: 100%;
    height: auto; /* Maintain aspect ratio */
    margin-bottom: 20px;
    display: block; /* Remove extra space below images */
}

.project-item h3 {
    color: #0A21C0;
    margin-top: 0;
    margin-bottom: 0; /* Remove bottom margin as content is moved */
    font-size: 1.8em;
}

/* Remove or comment out styles for content that is no longer in project-item on projects.html */
.project-item p,
.project-item video,
.project-item ol,
.project-item .project-images {
    display: none; /* Hide these elements on the main projects page */
}
/* Style for the new Latest Commit section */
.latest-commit-section {
    background-color: #f4f4f4;
    /* Light grey background */
    color: #141619;
    /* Normal text color */
    padding: 40px 0;
    /* Padding top and bottom */
    margin-top: 40px;
    /* Space above this section */
}

.latest-commit-section .container {
    /* Inherits container styles from your existing CSS */
    width: 90%;
    max-width: 1200px;
    margin: auto;
    overflow: hidden;
    padding: 0 20px;
    text-align: center;
    /* Center the content within the container */
}

.latest-commit-section h2 {
    /* Inherits h2 styles from main h2, but can be overridden */
    text-align: center;
    margin-bottom: 20px;
    /* Reduced margin for this section's heading */
    font-size: 30px;
    /* Slightly smaller heading than main h2 */
    color: #050A44;
}

/* Style for the commit information div */
#latest-commit-info {
    background-color: #fff;
    /* White background for the info box */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    text-align: left;
    /* Align text left within the info box */
    max-width: 700px;
    /* Limit the width of the info box */
    margin: 20px auto;
    /* Center the info box and add space */
}

#latest-commit-info p {
    margin-bottom: 10px;
    /* Space between commit details paragraphs */
    line-height: 1.5;
}

#latest-commit-info p:last-child {
    margin-bottom: 0;
    /* Remove margin from the last paragraph */
}

#latest-commit-info a {
    color: #0A21C0;
    /* Bright blue for the commit link */
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

#latest-commit-info a:hover {
    color: #050A44;
    /* Very dark blue on hover */
    text-decoration: underline;
    /* Add underline on hover */
}

/* Style for the error message */
#commit-error {
    margin-top: 20px;
    font-weight: bold;
}

footer {
    /* Removed flex-shrink: 0; - min-height on body and flex-grow on main are better */
    background: #141619;
    /* Dark grey background */
    color: #B3B4BD;
    /* Light grey text */
    text-align: center;
    padding: 20px 0;
    font-size: 14px;
    margin-top: auto;
    /* Push footer to the bottom */
}

/* Basic Form Styling */
#contactForm {
    max-width: 600px;
    /* Limit the form width */
    margin: 20px auto;
    /* Center the form and add space */
    padding: 20px;
    background-color: #fff;
    /* White background for the form area */
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    color: #141619;
    /* Dark text inside the form */
}

.form-group {
    margin-bottom: 15px;
    /* Space between form groups */
}

.form-group label {
    display: block;
    /* Make labels block-level for stacking */
    margin-bottom: 5px;
    /* Space below label */
    font-weight: bold;
    color: #2C2E3A;
    /* Darker grey/blue for labels */
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
    width: 100%;
    /* Make inputs fill container width */
    padding: 10px;
    border: 1px solid #B3B4BD;
    /* Light border */
    border-radius: 4px;
    font-family: 'Noto Sans', sans-serif;
    /* Use your font */
    font-size: 16px;
    box-sizing: border-box;
    /* Include padding/border in element's total width */
}

.form-group textarea {
    resize: vertical;
    /* Allow vertical resizing only */
}

#contactForm button[type="submit"] {
    display: inline-block;
    /* Allows padding and margin, but respects content width */
    background-color: #0a21c0;
    /* Your brand blue */
    color: #ffffff;
    /* White text */
    padding: 14px 28px;
    text-decoration: none;
    /* Remove underline */
    text-align: center;
    border-radius: 8px;
    /* Rounded button corners */
    font-weight: bold;
    font-size: 1.1em;
    margin-top: 25px;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    /* Subtle button shadow */
}

#contactForm button[type="submit"]:hover {
    background-color: #071a99;
    /* Slightly darker blue on hover */
    transform: translateY(-2px);
    /* Slight lift on hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    /* Enhanced shadow on hover */
}

/* Style for other contact links container if needed */
.contact-links {
    margin-top: 30px;
    /* Space above links */
    text-align: center;
    /* Center the links if desired */
}


/* Optional: Add styles for success/error messages (requires JavaScript) */
.status-message {
    margin-top: 20px;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
}

.status-message.success {
    background-color: #d4edda;
    /* Light green */
    color: #155724;
    /* Dark green */
    border: 1px solid #c3e6cb;
}

.status-message.error {
    background-color: #f8d7da;
    /* Light red */
    color: #721c24;
    /* Dark red */
    border: 1px solid #f5c6cb;
}

/* Styles for Contact content (used within main on contact.html) */
/* Added to center content on the contact page */
body.contact-page main .container {
    text-align: center;
    /* Apply text-align to container on contact page */
}

/* Contact links within main */
/* Changed selectors from #contact a and #contact a:hover to target links within main on contact page */
body.contact-page main a {
    color: #050A44;
    /* Bright blue for contact links */
    text-decoration: none;
    transition: color 0.3s ease;
}

body.contact-page main a:hover {
    color: #B3B4BD;
    /* Light grey on hover */
}

/* Responsive adjustments for the new section */
@media (max-width: 768px) {
    .latest-commit-section {
        padding: 30px 0;
        /* Adjust padding on mobile */
        margin-top: 30px;
        /* Adjust margin on mobile */
    }

    .latest-commit-section h2 {
        font-size: 24px;
        /* Adjust heading size on mobile */
        margin-bottom: 15px;
    }

    #latest-commit-info {
        padding: 15px;
        /* Adjust info box padding on mobile */
        margin: 15px auto;
        /* Adjust info box margin on mobile */
    }

    #latest-commit-info p {
        margin-bottom: 8px;
        /* Adjust paragraph margin on mobile */
        font-size: 15px;
        /* Slightly smaller text on mobile */
    }

    /* Footer Styling */
    footer {
        /* Removed flex-shrink: 0; - min-height on body and flex-grow on main are better */
        background: #141619;
        /* Dark grey background */
        color: #B3B4BD;
        /* Light grey text */
        text-align: center;
        padding: 20px 0;
        font-size: 14px;
        margin-top: auto;
        /* Push footer to the bottom */
    }

    header .container {
        flex-direction: column;
        /* Stack logo and nav vertically */
        align-items: flex-start;
    }

    header h1 {
        margin-bottom: 10px;
    }

    header nav ul li {
        font-size: 100%;
        margin-left: .6em;
        margin-right: 0em;
        /* Add space between stacked nav items */
        padding: 0;
    }

    #logo {
        margin-right: 2em;
        padding: 0;
        align-self: center;
    }

    #footer-info {
        font-size: 12px;
        margin: 0;
    }

    #hero {
        padding: 80px 0;
        /* Adjust hero padding on mobile */
        min-height: calc(100vh - 60px);
        /* Keep full height */
    }

    .container h2 {
        padding-top: 3em;
        font-size: 30px;
        /* Adjust hero heading size */
    }

    #hero h2 {
        font-size: 30px;
    }

    #hero p {
        font-size: 18px;
    }

    .btn {
        font-size: 16px;
        padding: 10px 20px;
    }

    /* Adjust heading sizes in main on mobile */
    main h2 {
        font-size: 30px;
        margin-bottom: 30px;
    }

    main {
        padding: 40px 0;
        /* Adjust main padding on smaller screens */
        /* min-height handled by flexbox */
    }

    /* About image responsive styles */
    .profile-img {
        /* Changed selector from #about .profile-img */
        float: none;
        /* Remove float on small screens */
        display: block;
        /* Make image a block element */
        margin: 0 auto 20px auto;
        /* Center the image and add bottom margin */
        border-radius: 8px;
        /* Maybe change to slightly rounded corners on mobile */
        shape-outside: none;
        /* Remove shape-outside on mobile */
        width: 100px;
        /* Make image smaller on mobile */
    }

    /* About content responsive layout */
    .about-content {
        /* Changed selector from #about .about-content */
        display: block;
        /* Revert to block layout on small screens */
    }


    /* Main Project Grid Styles */
    .project-grid {
        display: grid;
        /* On mobile, stack items */
        grid-template-columns: 1fr;
        gap: 30px;
        /* Space between project items */
        padding: 20px 0;
    }

    .project-item {
        background-color: #fff;
        padding: 30px;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        text-align: left;
    }

    .project-item img {
        max-width: 100%;
        height: auto;
        margin-bottom: 15px;
        border-radius: 4px;
        display: block;
        /* Ensures images behave predictably in layout */
    }

    .project-item video {
        display: block;
        margin: 0 auto 15px auto;
        max-width: 100%;
        height: auto;
    }

    .project-item h3 {
        margin-top: 0;
        color: #2C2E3A;
        margin-bottom: 15px;
    }

    .project-item p {
        margin-bottom: 15px;
        line-height: 1.6;
    }

    .project-item p:last-child {
        margin-bottom: 0;
    }

    .project-item .project-images {
        display: flex;
        flex-wrap: wrap;
        /* Allow images to wrap */
        justify-content: center;
        /* Center images within the container */
        gap: 15px;
        /* Space between images */
        margin-top: 20px;
        /* Space above image group */
    }

    .project-item .project-images img {
        /* Adjust specific image widths for display */
        max-width: 100%;
        /* Default for mobile, will adjust in media queries */
        height: auto;
        margin-bottom: 0;
        /* Override default image margin */
    }


    .project-item .center-content {
        text-align: center;
        margin-top: 20px;
    }

}

/* Styles for the bird animation */
.bird-container {
    position: relative;
    /* Needed for absolute positioning of the bird inside */
    width: 100%;
    /* Make it span the width of its parent (.container) */
    height: 100px;
    /* Give it a fixed height, adjust as needed */
    margin-top: 30px;
    /* Add some space above the container */
    overflow: hidden;
    /* Hide the bird if it goes outside this container */
}

.bird-sprite {
    position: absolute;
    /* Position relative to the bird-container */
    bottom: 0;
    /* Start at the bottom of the container */
    left: 0;
    /* Start at the left edge */
    display: block;
    /* Ensure display block for positioning */
    width: 50px;
    /* Set the bird's width, adjust as needed */
    height: auto;
    /* Maintain aspect ratio */
    transform-origin: center center;
    /* Set origin for flipping */
    /* Remove default transitions on position/transform if any global ones exist */
    transition: none;
}

/* Removed redundant #about, #projects, #contact section styles */
/* Removed redundant #about h2, #projects h2, #contact h2 styles */
/* Typewriter effect */
#typing-header {
    display: inline-block;
    /* Essential for the cursor to appear next to the text */
    position: relative;
    white-space: nowrap;
    /* Prevent text from wrapping */
    overflow: hidden;
    /* Hide overflowed text */
}

/* Cursor style */
#typing-header::after {
    content: '|';
    /* The cursor character */
    color: #B3B4BD;
    vertical-align: text-bottom;
    display: inline-block;
    animation: blink-caret 0.75s step-end infinite;
    /* Blinking animation */
    margin-left: -5px;
    /* Space between text and cursor */
}

/* Blinking cursor animation */
@keyframes blink-caret {

    from,
    to {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}