/* --- General Body and Typography --- */
body {
    font-family: 'Helvetica Neue', Arial, sans-serif; /* Clean, modern sans-serif font */
    line-height: 1.6;
    background-color: #ffffff; /* Pure white background */
    color: #333;
    margin: 0;
    padding: 20px;
}

/* --- Main Content Container --- */
.container {
    max-width: 800px; /* Restricts content width for readability */
    margin: 0 auto;   /* Centers the container */
    padding: 20px;
}

/* --- Updated Header Styling --- */
header {
    /* text-align: center; is no longer needed here */
    margin-bottom: 40px;
}

/* --- Updated Profile Picture Styling --- */
.profile-picture {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    /* margin-bottom is removed as spacing is handled by the flex container now */
}

/* --- New Rules for Side-by-Side Header --- */
.header-main {
    display: flex;             /* Enables Flexbox layout */
    align-items: center;       /* Vertically aligns the image and text */
    justify-content: center;   /* Horizontally centers the whole block */
    margin-bottom: 30px;       /* Adds space below the name/photo block */
}

.header-text {
    margin-left: 25px;         /* Adds space between the photo and the text */
}

/* Adjusting margins for the h1 and h2 inside the new layout */
.header-text h1 {
    margin: 0 0 5px 0; /* Removes extra space around the name */
}

.header-text h2 {
    margin: 0;         /* Removes extra space around the title */
    font-size: 1.3em;  /* Slightly adjusts font size for the new layout */
}

h1 {
    font-size: 2.5em;
    margin: 10px 0;
}

h2 {
    font-size: 1.5em;
    font-weight: 400; /* Lighter font weight for the title */
    color: #555;
    margin: 0;
}

/* --- New Education & Experience Section Styling --- */
.education-experience {
    display: flex;
    justify-content: center;
    gap: 60px; /* Adjust the space between the two columns */
    max-width: 700px;
    margin: 30px auto 0;
    text-align: left;
    font-size: 0.95em;
}

.education-experience h4 {
    margin: 0 0 10px 0;
    font-size: 1.2em;
    color: #333;
    border-bottom: 2px solid #eee;
    padding-bottom: 8px;
}

.edu-exp-item {
    margin-bottom: 15px;
}

.edu-exp-item p {
    margin: 0 0 1px 0; /* Controls spacing between the title and institution lines */
    line-height: 1.4;
}

.edu-exp-item p:first-child {
    font-weight: 600; /* Makes the degree/title bold */
}


/* --- Updated Bio Styling --- */
.bio {
    max-width: 700px; 
    margin: 20px auto 0;
    font-size: 1.1em;
    color: #666;
    text-align: justify; /* Justifies the bio text */
}

/* --- Research Interests Keywords Styling --- */
.research-interests {
    margin: 10px 0 10px 0; /* Adds space above and below */
    text-align: center; /* Keeps the keywords centered */
    font-size: 0.95em;
    color: #444;
}

.research-interests strong {
    font-weight: 600; /* Makes the "Research Interests:" label bold */
    margin-right: 8px;
}

/* --- Links Section --- */
.links {
    margin-top: 10px;
    text-align: center;
    margin-bottom: 10px;
}

.links a {
    font-size: 1.8em; /* Larger icon size */
    color: #333;
    margin: 0 10px; /* Spacing between icons */
    transition: color 0.6s; /* Smooth color change on hover */
}

.links a:hover {
    color: #007BFF; /* A subtle hover effect */
}

/* --- Styling for custom image icons in the links section --- */
.custom-link-icon {
    height: 1.6em; /* Adjusts the icon height to match the font-based icons */
    width: auto;   /* Maintains the aspect ratio */
    vertical-align: middle; /* Helps align the image with the other icons */
    margin-bottom: 4px; /* Fine-tunes vertical alignment */
}


/* --- General Section Styling --- */
section {
    margin-bottom: 40px; /* Generous whitespace between sections */
    padding-bottom: 20px;
    border-bottom: 1px solid #eee; /* Subtle separator line */
}

section:last-child {
    border-bottom: none; /* No line after the last section */
}

section h2 {
    font-size: 1.8em;
    margin-bottom: 20px;
    color: #333;
    font-weight: 600;
}

/* --- Lists (Used for Research/Contributions) --- */
ul {
    list-style-type: disc; /* Standard bullet points */
    padding-left: 20px;
}

li {
    margin-bottom: 10px; /* Spacing between list items */
}

/* --- Publications Section --- */
.publication-item {
    margin-bottom: 15px; /* Increased space between publication entries */
}

/* Style for the first line (the title) */
.publication-title {
    margin: 0; /* Remove default paragraph margin */
    font-size: 1.1em;
}

/* Style for the second line (the venue) */
.publication-venue {
    margin: 4px 0 0 0; /* Add a small space below the title */
    font-size: 1em;
    color: #555; /* Make the venue text slightly lighter */
}

/* --- Projects Section --- */
.project {
    display: flex; /* Aligns image and description side-by-side */
    align-items: flex-start; /* Aligns items to the top */
    margin-bottom: 20px;
}

.project-image {
    width: 120px;
    height: 120px;
    margin-right: 20px;
    object-fit: cover;
    flex-shrink: 0; /* Prevents image from shrinking */
}
.project-description {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.project-text p {
    display: -webkit-box;
    -webkit-line-clamp: 4; /* The number of lines to show */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 10px; /* Adds space above the GitHub link */
}

.project-description h3 {
        margin-top: 0;
        font-size: 1.2em;
}       


/* --- General Link Styling --- */
a {
    color: #007BFF;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* --- Responsive Design for Mobile --- */
@media (max-width: 600px) {

    /* Inside your @media (max-width: 600px) block */

    .header-main {
        flex-direction: column; /* Stacks the image and text on top of each other */
    }

    .profile-picture {
        margin-bottom: 20px; /* Re-adds bottom margin for stacked view */
    }

    .header-text {
        margin-left: 0;       /* Removes the space between image and text */
        text-align: center;   /* Centers the text when stacked */
    }
    .container {
        padding: 10px;
    }

    h1 {
        font-size: 2.0em;
    }

    h2 {
        font-size: 1.2em;
    }

    .project-description h3 {
        margin-top: 0;
        font-size: 0.8em;
    }

    .project-text p {
        font-size: 0.6em; /* Adjust this value as needed */
    }

    .container {
        padding: 10px;
    }

    /* Inside your @media (max-width: 600px) block */
    .education-experience {
        flex-direction: column; /* Stacks the columns vertically */
        gap: 30px; /* Adjusts space between stacked sections */
        text-align: center;
    }

    .education-experience h4 {
        text-align: center;
    }

    .profile-picture {
        width: 120px;
        height: 120px;
    }
    
    .project {
        /* Reverts to the default side-by-side layout, removing the stacking */
        flex-direction: row; 
        align-items: flex-start; /* Aligns image and text to the top */
        text-align: left;
    }
}