#particles-js {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -50;
  background-color: #1a1a1a;
}

.email-link {
  color: #A9A9CB;
  text-decoration: none;
}

.email-link:hover {
  text-decoration: underline;
}

.main-github-link {
  color: skyblue;
  text-decoration: none;
}

.main-github-link:hover {
    color: red;
}

/* Basic Reset for consistent styling */
body {
    margin: 0;
    font-family: 'Space Mono', monospace; /* Digital retro font for body */
    background-color: #0A0A1F; /* Very Dark Blue background (Midnight Minimal) */
    color: #9090B0; /* Light Blue text color (Midnight Minimal) */
    line-height: 1.6;
    padding-top: 20px; /* Add padding at the top to prevent content touching the edge */
    
    background: #1a1a1a; /* Dark background */
    position: relative; /* Needed for particle positioning */
    min-height: 100vh;
}

/* Header Styling */
.site-header {
    width: 90%; /* Adjust width */
    max-width: 900px; /* Max width */
    margin: 0 auto; /* Center the header */
    display: block; /* Change back to block for easier layout */
    padding: 0; /* Remove padding here */
    box-sizing: border-box;
    border: none; /* Remove previous border */
    background-color: transparent; /* Transparent background */
}

.profile-section {
    display: flex; /* Use Flexbox for layout within the profile section */
    align-items: center; /* Align items vertically in the center */
    width: 100%; /* Take full width of header */
    margin-bottom: 20px; /* Space below profile section */
    padding: 20px; /* Add padding inside the section */
    box-sizing: border-box;
    border: 2px solid #1F1F4D; /* Medium Blue border (Midnight Minimal) */
    box-shadow: 0 0 10px #1F1F4D; /* Medium Blue glowing shadow (Midnight Minimal) */
    background-color: #0A0A1F; /* Very Dark Blue background (Midnight Minimal) */
    justify-content: space-between; /* Distribute space between items */
}

.profile-image {
    width: 100px; /* Adjust size */
    height: 100px; /* Adjust size */
    border-radius: 0; /* Remove border-radius for blocky look */
    object-fit: cover;
    margin-right: 20px; /* Space between image and name/bio */
    border: 3px solid #9090B0; /* Light Blue border around image (Midnight Minimal) */
    box-shadow: 0 0 8px #9090B0; /* Light Blue glowing shadow (Midnight Minimal) */
    flex-shrink: 0; /* Prevent image from shrinking */
}

.name-bio {
    flex-grow: 1; /* Allows this section to take up remaining space */
    margin-right: 20px; /* Space between name/bio and social icons */
    min-width: 0; /* Allow shrinking */
}

.site-title {
    font-family: 'Press Start 2P', cursive; /* Pixel font for title */
    font-size: 2.2em; /* Adjust font size */
    margin: 0 0 5px 0;
    color: #A9A9CB; /* Light Blue color for title (Midnight Minimal) */
    text-shadow: 2px 2px #1F1F4D; /* Medium Blue text shadow (Midnight Minimal) */
    word-wrap: break-word; /* Prevent long names from overflowing */
}

.site-bio {
    font-family: 'Space Mono', monospace; /* Digital retro font for bio */
    font-size: 1em;
    margin: 0;
    color: #FFFFFF; /* White for bio (Midnight Minimal) */
}

/* Styling for the container of social media icons */
.social-icons-container {
    display: flex; /* Use Flexbox */
    align-self: flex-start;
    flex-direction: column; /* Stack icons vertically */
    align-items: flex-end; /* Align icons to the right within this container */
    flex-shrink: 0; /* Prevent the container from shrinking */
}

/* Styling for individual social media icons */
.social-icon {
    width: 25px; /* Set the size of the icons */
    height: 25px; /* Ensure aspect ratio */
    margin-bottom: 10px; /* Space between stacked icons */
    /* Optional: Add padding to the link instead of margin to icon for click area */
    /* filter: grayscale(100%);   */
    /* filter: invert(50%);  */
}

/* Optional: Style for the social icon links */
.social-icons-container a {
    text-decoration: none; /* Remove underline from links */
    /* Optional: Add padding here for a larger clickable area */
    /* padding: 4px 0; */
}


.separation-line {
    width: 100%;
    border: none; /* Remove default hr border */
    height: 2px; /* Set height */
    background: linear-gradient(to right, transparent, #9090B0, transparent); /* Light Blue gradient retro line (Midnight Minimal) */
    margin: 30px 0; /* Space above and below */
}

/* === Mobile Nav Toggle === */
.nav-toggle {
    display: none;
    font-size: 1.8em;
    cursor: pointer;
    color: #ffffff;
    padding: 10px;
    text-align: right;
}
  
/* Default nav layout (desktop) */
.site-nav {
    position: relative;
}

.site-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center; /* Center menu items horizontally */
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
    background-color: #1F1F4D; /* Medium Blue background for nav bar (Midnight Minimal) */
    padding: 10px 0;
    border: 2px solid #9090B0; /* Light Blue border (Midnight Minimal) */
    box-shadow: 0 0 8px #1F1F4D; /* Medium Blue glowing shadow (Midnight Minimal) */
}

.site-nav li {
    margin: 5px 15px;
}
  
.nav-links {
    display: flex;
    justify-content: center;
    list-style: none;
    flex-wrap: wrap;
    padding: 10px 0;
    margin: 0;
    background-color: #1F1F4D;
    border: 2px solid #9090B0;
    box-shadow: 0 0 8px #1F1F4D;
 }

.nav-link {
    text-decoration: none;
    color: #FFFFFF; /* White for links (Midnight Minimal) */
    font-size: 1.1em;
    font-family: 'Space Mono', monospace;
    padding: 5px 10px;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.nav-link:hover {
    color: #9090B0; /* Light Blue color on hover (Midnight Minimal) */
    border-color: #9090B0;
    box-shadow: 0 0 5px rgba(144, 144, 176, 0.5); /* Subtle Light Blue glow on hover (Midnight Minimal) */
}

/* Styling for the active navigation link */
.nav-link.active {
    color: #9090B0; /* Light Blue when active (Midnight Minimal) */
    font-weight: bold;
    border-color: #9090B0; /* Light Blue border when active (Midnight Minimal) */
    background-color: rgba(144, 144, 176, 0.2); /* Subtle Light Blue background for active (Midnight Minimal) */
    box-shadow: 0 0 8px #1F1F4D; /* Medium Blue glowing shadow when active (Midnight Minimal) */
}

/* Content Styling */
.site-content {
    width: 90%;
    max-width: 900px;
    margin: 30px auto;
    padding: 20px;
    border: 2px solid #9090B0; /* Light Blue border for content area (Midnight Minimal) */
    background-color: #1F1F4D; /* Medium Blue background for content (Midnight Minimal) */
    box-shadow: 0 0 15px #1F1F4D; /* Medium Blue glowing shadow (Midnight Minimal) */
    
    position: relative; /* Ensure content stays above particles */
    z-index: 1;
}

.content-section {
    display: none;
    padding: 20px 0;
    border-bottom: 1px dashed #9090B0; /* Dashed Light Blue separator (Midnight Minimal) */
}

.content-section:last-child {
    border-bottom: none;
}


.content-section.hidden {
    display: none;
}

/* Show the active content section */
.content-section:not(.hidden) {
    display: block;
}

/* Adjust h2 inside content sections */
.content-section h2 {
    font-family: 'Press Start 2P', cursive; /* Pixel font for section titles */
    font-size: 1.8em;
    color: #9090B0; /* Light Blue color (Midnight Minimal) */
    text-shadow: 1px 1px #0A0A1F; /* Very Dark Blue text shadow (Midnight Minimal) */
    margin-top: 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #9090B0; /* Light Blue underline (Midnight Minimal) */
    padding-bottom: 10px;
}

/* Styling for Experience Section Items */
.experience-item {
    margin-bottom: 30px;
    padding: 20px;
    border: 1px solid #9090B0; /* Light Blue border (Midnight Minimal) */
    background-color: #1F1F4D; /* Medium Blue background (match content) (Midnight Minimal) */
    box-shadow: 0 0 5px rgba(144, 144, 176, 0.5); /* Subtle Light Blue glow (Midnight Minimal) */
}

/* Updated item-header to align company info left and date group right (Line 1) */
.experience-item .item-header {
    display: flex; /* Use Flexbox */
    justify-content: space-between; /* Push company info left, date group right */
    align-items: center; /* Vertically align items */
    margin-bottom: 5px; /* Reduce space below header */
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
}

/* Styling for the left side of the item header (Company Info) */
.experience-item .company-info {
    display: flex; /* Use Flexbox to align logo and name */
    align-items: center; /* Vertically align items */
    margin-right: 10px; /* Add space before wrapping */
    min-width: 0; /* Allow flex item to shrink below content size */
}

/* Removed styling for serial number */
/* .experience-item .serial-number { ... } */

.experience-item .company-logo {
    width: 30px; /* Set the width of the company logo (from user snippet) */
    height: 30px; /* Set the height of the company logo (from user snippet) */
    margin-right: 10px; /* Space after the logo */
    object-fit: contain;
    /*border: 1px solid #9090B0; /* Light blue border (Midnight Minimal) */
    flex-shrink: 0; /* Prevent logo from shrinking */
}

.experience-item .company-name {
    font-size: 1.3em;
    color: #FFFFFF; /* White for company names (Midnight Minimal) */
    margin: 0; /* Remove default margin */
    min-width: 0; /* Allow flex item to shrink below content size */
}

/* Styling for the Date Group (aligned right in header) */
.experience-item .date-group {
    display: flex; /* Use Flexbox to align icon and text */
    align-items: center; /* Vertically align items */
    font-size: 0.95em; /* Adjust font size */
    font-style: italic;
    color: #AAAAAA; /* Light gray color (Midnight Minimal) */
    flex-shrink: 0; /* Prevent from shrinking */
    margin-left: 10px; /* Add space before if it wraps */
}

.experience-item .calendar-icon {
    height: 16px; /* Set the height of the calendar icon */
    width: auto; /* Maintain aspect ratio */
    margin-right: 5px; /* Space between icon and text */
    filter: invert(70%) sepia(100%) saturate(2000%) hue-rotate(180deg) brightness(100%) contrast(100%); /* Example filter */
    /* Adjust filter based on your icon's original color */
}

/* Styling for Position and Location Row (the second line) */
.experience-item .position-location-row {
    display: flex; /* Use Flexbox */
    justify-content: space-between; /* Push position left, location group right */
    align-items: center; /* Vertically align items (less critical for text) */
    margin-bottom: 10px; /* Space below this row */
    font-size: 1em; /* Adjust font size */
    color: #AAAAAA; /* Light gray color (Midnight Minimal) */
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
}

.experience-item .position-location-row .position {
    flex-grow: 1; /* Allow position to take available space */
    margin-right: 10px; /* Space before location group before wrapping */
    min-width: 0; /* Allow flex item to shrink */
}

/* Styling for the Location Group (aligned right on second line) */
.experience-item .position-location-row .location-group {
    display: flex; /* Use Flexbox to align icon and text */
    align-items: center; /* Vertically align items */
    font-size: 0.95em; /* Adjust font size */
    font-style: italic;
    color: #AAAAAA; /* Light gray color (Midnight Minimal) */
    flex-shrink: 0; /* Prevent from shrinking */
    margin-left: 10px; /* Add space before if it wraps */
    text-align: right; /* Align text to the right if it wraps */
}

.experience-item .position-location-row .location-icon {
    height: 16px; /* Set the height of the location icon */
    width: auto; /* Maintain aspect ratio */
    margin-right: 5px; /* Space between icon and text */
    filter: invert(70%) sepia(100%) saturate(2000%) hue-rotate(180deg) brightness(100%) contrast(100%); /* Example filter */
    /* Adjust filter based on your icon's original color */
}

.experience-item .work-points {
    margin: 0;
    padding-left: 25px;
    color: #A9A9CB; /* Color for work points (from user snippet) */
}

.experience-item .work-points li {
    margin-bottom: 8px;
    line-height: 1.5;
}


/* Styling for Project Items */
.project-item {
    margin-bottom: 30px;
    padding: 20px;
    border: 1px solid #9090B0; /* Light Blue border (Midnight Minimal) */
    background-color: #1F1F4D; /* Medium Blue background (Midnight Minimal) */
    box-shadow: 0 0 5px rgba(144, 144, 176, 0.5); /* Subtle Light Blue glow (Midnight Minimal) */
}

/* Styling for Project Header with GitHub Icon */
.project-item .project-header {
    display: flex; /* Use Flexbox */
    justify-content: space-between; /* Push title to left, icon to right */
    align-items: center; /* Vertically align items */
    margin-bottom: 10px; /* Space below the header */
    flex-wrap: wrap; /* Allow items to wrap */
}

.project-item .project-title {
    font-size: 1.2em;
    color: #FFFFFF; /* White for titles (from user snippet) */
    margin-top: 0;
    margin-bottom: 0; /* Remove bottom margin as space is handled by project-header */
    flex-grow: 1; /* Allow title to take up space */
    margin-right: 10px; /* Space between title and icon */
    min-width: 0; /* Allow title to shrink */
    word-wrap: break-word; /* Ensure title wraps */
}

.project-item .github-link {
    /*display: flex; /* Use flex to align icon within the link */
    align-items: center; /* Vertically center the icon */
    text-decoration: none; /* Remove default link underline */
    flex-shrink: 0; /* Prevent icon from shrinking */
    /* Optional: Adjust margin or padding for the link itself */
}

.project-item .github-icon {
    width: 24px; /* Set the width of the icon */
    height: 24px; /* Set the height of the icon */
    vertical-align: sub;
    /*padding-left: 10px;*/
    filter: invert(70%) sepia(100%) saturate(2000%) hue-rotate(180deg) brightness(100%) contrast(100%); /* Example: Style the icon to match theme */
    /* Adjust filter based on your icon's original color */
}
.project-item .aur-icon {
    width: 96px; /* Set the width of the icon */
    height: 32px; /* Set the height of the icon */
    /*padding-left: 25px;*/
    vertical-align: bottom;
    filter: invert(70%) sepia(100%) saturate(2000%) hue-rotate(180deg) brightness(100%) contrast(100%); /* Example: Style the icon to match theme */
    /* Adjust filter based on your icon's original color */
}

/* Optional: Hover effect for the GitHub icon */
.project-item .github-link:hover .github-icon {
    filter: invert(19%) sepia(99%) saturate(7477%) hue-rotate(1deg) brightness(96%) contrast(107%); /* Red */
}
/* Optional: Hover effect for the AUR icon */
.project-item .github-link:hover .aur-icon {
    filter: brightness(0) saturate(100%) invert(15%) sepia(100%) saturate(5000%) hue-rotate(0deg) brightness(90%) contrast(105%);
}


/* Added IEEE icon styling from user snippet */
.project-item .ieee-icon {
    width: 35px; /* Set the width of the icon */
    height: 30px; /* Set the height of the icon */
    /* filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);Example: Style the icon to match theme */
    /* You might need to adjust filter based on your icon's original color */
}

/* Added IEEE icon hover styling from user snippet */
.project-item .github-link:hover .ieee-icon {
    filter: invert(100%) sepia(100%) saturate(2000%) hue-rotate(180deg) brightness(100%) contrast(100%); /* Example: Change icon color on hover (Light Blue glow) */
}


/* Styling for Project Association */
.project-item .project-association {
    display: flex; /* Use Flexbox to arrange text and logo horizontally */
    align-items: center; /* Vertically align items */
    margin-top: -5px; /* Pull up slightly */
    margin-bottom: 10px; /* Space below */
    /* Remove previous text-align if you added it */
    flex-wrap: wrap; /* Allow items to wrap */
    min-width: 0; /* Allow container to shrink */
}

.project-item .association-text {
    font-size: 0.9em; /* Adjust font size */
    color: #AAAAAA; /* Light gray color (Midnight Minimal) */
    /* Remove margin-right if you used it for spacing when text was first */
    /* margin-right: 5px; */
    /* Optional: font-style: italic; */
    flex-shrink: 0; /* Prevent text from shrinking */
}

.project-item .association-logo {
    height: 25px; /* Set the height of the association logo (from user snippet) */
    width: auto; /* Maintain aspect ratio */
    vertical-align: middle; /* Align with text if any (less critical with flex) */
    opacity: 0.8; /* Make it slightly less prominent */
    margin-right: 5px; /* Add space AFTER the logo */
    flex-shrink: 0; /* Prevent logo from shrinking */
    /* Optional: if you want rounded corners or a subtle border */
    /* border-radius: 5px; */
    /* border: 1px solid #AAAAAA; */
    /* filter: grayscale(100%); */ /* Optional: Make the logo grayscale */
}

/* Project meta styling (from user snippet) */
.project-item .project-meta {
    color: #AAAAAA; /* Color from user snippet */
    font-size: 0.9em;
    margin-top: 0; /* Ensure no extra top margin */
    margin-bottom: 10px; /* Ensure bottom margin */
}

.project-item .project-points, 
.project-item .project-description {
    color: #A9A9CB
}


/* Styling for Course Items */
.course-item {
    margin-bottom: 30px;
    padding: 20px;
    border: 1px solid #A9A9CB; /* Light Blue border (Midnight Minimal) */
    background-color: #1F1F4D; /* Medium Blue background (Midnight Minimal) */
    box-shadow: 0 0 5px rgba(144, 144, 176, 0.5); /* Subtle Light Blue glow (Midnight Minimal) */
}

/* Styling for the Course Header (Logo and Title - Line 1) */
.course-item .course-header {
    display: flex; /* Use Flexbox */
    align-items: center; /* Vertically align logo and title */
    margin-bottom: 5px; /* Space below the header */
    flex-wrap: wrap; /* Allow wrapping */
}

/* Styling for the Course Logo */
.course-item .course-logo {
    width: 30px; /* Set the width of the logo */
    height: 30px; /* Set the height of the logo */
    margin-right: 10px; /* Space after the logo */
    object-fit: contain; /* Ensure the entire logo is visible */
    border: 1px solid #9090B0; /* Light blue border (Optional) */
    flex-shrink: 0; /* Prevent shrinking */
}

/* Styling for the Course Title */
.course-item .course-title {
    font-size: 1.2em;
    color: #FFFFFF; /* Light Blue for titles (Midnight Minimal) */
    margin-top: 0; /* Remove default top margin */
    margin-bottom: 0; /* Remove default bottom margin */
    min-width: 0; /* Allow shrinking */
}

/* Styling for the Course Meta (Keep existing styles, adjust margin if needed) */
.course-item .course-meta {
    font-size: 0.9em;
    color: #AAAAAA; /* Light blue for meta info (Midnight Minimal) */
    margin-top: 0; /* Adjust space from header */
    margin-bottom: 10px; /* Space before points */
}

/* Styling for the Course Points (Keep existing styles) */
.course-item .course-points {
    margin: 0;
    padding-left: 25px;
    color: #A9A9CB; /* White for points (Midnight Minimal) */
}

.course-item .course-points li {
    margin-bottom: 8px;
    line-height: 1.5;
}


/* Styling for Education Section Items */
.education-item {
    margin-bottom: 30px;
    padding: 20px;
    border: 1px solid #9090B0; /* Light Blue border (Midnight Minimal) */
    background-color: #1F1F4D; /* Medium Blue background (Midnight Minimal) */
    box-shadow: 0 0 5px rgba(144, 144, 176, 0.5); /* Subtle Light Blue glow (Midnight Minimal) */
}

/* Styling for the Education Header (Line 1: Institute Info Left | Location Group Right) */
.education-item .edu-header {
    display: flex; /* Use Flexbox */
    justify-content: space-between; /* Push institute info left, location group right */
    align-items: center; /* Vertically align items */
    margin-bottom: 5px; /* Space below header */
    flex-wrap: wrap; /* Allow wrapping */
}

/* Styling for the left side of the Education Header (Institute Info) */
.education-item .institute-info {
    display: flex; /* Use Flexbox to align logo and name */
    align-items: center; /* Vertically align items */
    margin-right: 10px; /* Space before wrapping */
    min-width: 0; /* Allow shrinking */
}

.education-item .edu-logo {
    width: 50px; /* Set the width of the logo */
    height: 50px; /* Set the height of the logo */
    margin-right: 15px; /* Space after the logo */
    object-fit: contain; /* Ensure the entire logo is visible */
    /*border: 1px solid #9090B0; /* Light blue border (Midnight Minimal) */
    /* Optional: subtle glow */
    /* box-shadow: 0 0 3px rgba(144, 144, 176, 0.3); */
    flex-shrink: 0; /* Prevent shrinking */
}

.education-item .institution-name {
    font-size: 1.3em;
    color: #FFFFFF; /* Light Blue for institution names (Midnight Minimal) */
    margin: 0; /* Remove default margin */
    min-width: 0; /* Allow shrinking */
}

/* Styling for the Location Group (aligned right in education header) */
.education-item .location-group {
    display: flex; /* Use Flexbox to align icon and text */
    align-items: center; /* Vertically align items */
    font-size: 0.95em; /* Adjust font size */
    font-style: italic;
    color: #AAAAAA; /* Light gray color (Midnight Minimal) */
    flex-shrink: 0; /* Prevent from shrinking */
    margin-left: 10px; /* Space before if it wraps */
    text-align: right; /* Align text right if it wraps */
}

.education-item .location-icon {
    height: 16px; /* Set the height of the location icon */
    width: auto; /* Maintain aspect ratio */
    margin-right: 5px; /* Space between icon and text */
    filter: invert(70%) sepia(100%) saturate(2000%) hue-rotate(180deg) brightness(100%) contrast(100%); /* Example filter */
    /* Adjust filter based on your icon's original color */
}

/* Styling for the Education Details Row (Line 2: Qualification Left | Date Group Right) */
.education-item .edu-details-row {
    display: flex; /* Use Flexbox */
    justify-content: space-between; /* Push qualification left, date group right */
    align-items: center; /* Vertically align items */
    margin-bottom: 10px; /* Space below this row */
    flex-wrap: wrap; /* Allow wrapping */
}

/* Styling for the Qualification (aligned left in edu-details-row) */
.education-item .qualification {
     font-size: 1em;
     color: #AAAAAA; /* Light gray (Midnight Minimal) */
     flex-grow: 1; /* Allow to take space */
     margin-right: 10px; /* Space before wrapping */
     min-width: 0; /* Allow shrinking */
}

/* Styling for the Date Group (aligned right in edu-details-row) */
.education-item .date-group {
    display: flex; /* Use Flexbox to align icon and text */
    align-items: center; /* Vertically align items */
    font-size: 0.95em; /* Adjust font size */
    font-style: italic;
    color: #AAAAAA; /* Light gray color (Midnight Minimal) */
    flex-shrink: 0; /* Prevent from shrinking */
    margin-left: 10px; /* Space before if it wraps */
    text-align: right; /* Align text right if it wraps */
}

.education-item .calendar-icon {
    height: 16px; /* Set the height of the calendar icon */
    width: auto; /* Maintain aspect ratio */
    margin-right: 5px; /* Space between icon and text */
    filter: invert(70%) sepia(100%) saturate(2000%) hue-rotate(180deg) brightness(100%) contrast(100%); /* Example filter */
    /* Adjust filter based on your icon's original color */
}

.education-item .edu-points {
    margin: 0;
    padding-left: 25px;
    color: #A9A9CB; /* White for points (Midnight Minimal) */
}

.education-item .edu-points li {
    margin-bottom: 8px;
    line-height: 1.5;
}

li2 {
    margin-bottom: 18px;
    line-height: 1.5;
}



/* Ensure last item in a section doesn't have bottom margin */
.content-section .experience-item:last-child,
.content-section .project-item:last-child,
.content-section .course-item:last-child,
.content-section .achievement-item:last-child,
.content-section .education-item:last-child {
    margin-bottom: 0;
}

/* Adjust spacing for list items within content sections */
.content-section ul {
    padding-left: 25px;
}

.content-section li {
    margin-bottom: 8px;
    line-height: 1.5;
}

/* Add to the rule for consistent padding for lists within content sections */
.content-section ul.edu-points {
    padding-left: 25px;
}


/* Responsiveness (adjusting layout for smaller screens) */
@media (max-width: 768px) {
    body {
        padding-top: 10px;
    }

    .profile-section {
        flex-direction: column;
        text-align: center;
        margin-bottom: 15px;
        padding: 15px;
        align-items: center; /* Center items on small screens */
    }

    .profile-image {
        margin-right: 0;
        margin-bottom: 15px;
        width: 80px;
        height: 80px;
    }

    .name-bio {
        margin-right: 0; /* Remove right margin */
        margin-bottom: 15px; /* Add space below name/bio when stacked */
        text-align: center; /* Center text on small screens */
    }

    .site-title {
        font-size: 1.8em;
    }

    .site-bio {
        font-size: 0.9em;
    }

    /* Adjust social icons container on small screens */
    .social-icons-container {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 20px; 
        margin: 10px auto 0; /* top auto bottom spacing */
        text-align: center;
    }

     /* Adjust spacing between horizontal icons on small screens */
    .social-icon {
        margin-bottom: 0; /* Remove bottom margin */
        margin-right: 25px; /* Add space between horizontal icons */
    }

      /* Remove right margin from the last icon on small screens */
    .social-icons-container .social-icon:last-child {
        margin-right: 0;
    }

    .separation-line {
        margin: 20px 0;
    }

    .site-nav ul {
        padding: 8px 0;
    }

    .site-nav li {
        margin: 2px 6px;
    }

    .nav-toggle {
        display: block;
        text-align: right;
    }
    
    .nav-links {
        display: none;
        flex-direction: column;
        align-items: center;
        padding: 0;
        background-color: #1F1F4D;
    }
    
    .nav-links.active {
        display: flex;
    }
    
    .nav-links li {
        margin: 10px 0;
    }
    
    .nav-link {
        font-size: 1em;
        padding: 6px 12px;
    }

    .site-content {
        margin: 20px auto;
        padding: 15px;
    }

    .content-section {
        padding: 15px 0;
    }

    .content-section h2 {
        font-size: 1.5em;
        margin-bottom: 15px;
        padding-bottom: 8px;
    }

     /* Adjust styling for experience items on small screens */

    .experience-item .item-header {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 8px;
    }

    .experience-item .company-info {
        flex-direction: column;
        align-items: flex-start;
        margin-right: 0;
        margin-bottom: 8px;
    }

    .experience-item .company-logo {
        margin-right: 0;
        margin-bottom: 5px;
        width: 30px;
        height: 30px;
    }

    .experience-item .company-name {
        font-size: 1.1em;
    }

    .experience-item .date-group {
        font-size: 0.9em;
        margin-left: 0;
    }

    .experience-item .position-location-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .experience-item .position-location-row .position {
        margin-right: 0;
        margin-bottom: 3px;
    }

    .experience-item .position-location-row .location-group {
        text-align: left;
        margin-left: 0;
    }

    .experience-item .work-points {
        padding-left: 20px;
    }


    /* Adjust styling for project association on small screens */
    .project-item .project-association {
         flex-direction: column;
         align-items: flex-start;
    }

    .project-item .association-logo {
        margin-right: 0;
        margin-bottom: 5px;
    }
    
    .card-back h4 {
        font-size: 1em;
    }
    .card-back li {
        font-size: 0.85em;
    }

    /* Adjust styling for education items on small screens */

    .education-item .edu-header {
        flex-direction: column; /* Stack items vertically */
        align-items: flex-start; /* Align items to the start */
        margin-bottom: 8px;
    }

     .education-item .institute-info {
          flex-direction: column; /* Stack logo and name vertically */
          align-items: flex-start;
          margin-right: 0; /* Remove right margin */
          margin-bottom: 8px; /* Space below institute info */
     }

    .education-item .edu-logo {
        margin-right: 0;
        margin-bottom: 5px;
        width: 30px; /* Adjust size */
        height: 30px; /* Adjust size */
    }

    .education-item .institution-name {
         font-size: 1.1em; /* Adjust size */
    }

    /* Adjust styling for location group when in education header on small screens */
    .education-item .location-group {
        font-size: 0.9em; /* Adjust size */
        margin-left: 0; /* Remove left margin */
        text-align: left; /* Align left */
    }

    .education-item .edu-details-row {
        flex-direction: column; /* Stack qualification and date group vertically */
        align-items: flex-start; /* Align text left */
    }

    .education-item .qualification {
        margin-right: 0; /* Remove right margin */
        margin-bottom: 3px; /* Space below */
    }

    /* Adjust styling for date group when in education details row on small screens */
    .education-item .date-group {
        font-size: 0.9em; /* Adjust size */
        margin-left: 0; /* Remove left margin */
        text-align: left; /* Align left */
    }

    .course-item .course-header {
        flex-direction: column; /* Stack logo and title vertically */
        align-items: flex-start; /* Align items to the start */
        margin-bottom: 8px;
    }

    .course-item .course-logo {
         margin-right: 0; /* Remove right margin */
         margin-bottom: 5px; /* Add space below logo */
         width: 30px; /* Adjust size */
         height: 30px; /* Adjust size */
    }

    .course-item .course-title {
         font-size: 1em; /* Adjust size */
    }

    .course-item .course-meta {
         font-size: 0.9em; /* Adjust size */
    }

    .course-item .course-points {
         padding-left: 20px; /* Adjust padding */
    }

}