.social-icons {
    margin-top: 10px;
    display: flex;
    gap: 10px;
}

.social-icons a {
    text-decoration: none;
}

.icon {
    width: 24px; /* Adjust the size as needed */
    height: 24px;
    transition: transform 0.2s ease;
}

.icon:hover {
    transform: scale(1.1); /* Slightly enlarge the icon on hover */
}

body {
    font-family: 'Open Sans', sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* margin-top: 3em; Adjust this value based on banner height */
}

/* Banner Styles */
.banner {
    background-color: rgba(255, 204, 0); /* Bright yellow with 50% transparency */
    color: #333; /* Dark text for contrast */
    text-align: center;
    padding: 0.02em 1em; /* Adjust padding for height */
    font-size: 0.9em; /* Adjust font size as needed */
    font-weight: bold; /* Make the text stand out */
    position: fixed;
    bottom: 0; /* Center vertically */
    left: 0; /* Attach to the left edge */
    /* transform: translateY(-50%); Adjust position for vertical centering */
    /* width: 120px; Width of the banner */
    width: auto;
    height: auto;
    /* writing-mode: vertical-rl; Rotate text for vertical display */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
    z-index: 1000; /* Ensure it appears above other content */
    border-radius: 0 10px 0 0;
}

/* Header */
header {
    width: 100%;
    background: #9E2D3B; /* Updated background color: yellow: #eea41f*/
    padding: 0.1em 0; /* Decreased height by reducing padding */
    text-align: left;
    /* padding-left: 52%; Align header text with the left column */
}

header h1 {
    margin: 0;
    font-size: 2.5em; /* Slightly larger font size */
    color: #fff; /* Ensure text color contrasts with the background */
}


/* Adjust the main container for fixed-width centered content */
main {
    display: flex;
    width: 1240px; /* Fixed width for the main content */
    margin: 0 auto; /* Center the content with blank spaces on the sides */
    margin-top: 1.25em; /* Adjust vertical spacing */
}

main a {
    color: #9E2D3B;
}

.left-column, .right-column {
    flex: 2; /* Allows the right column to adjust proportionally */
    margin-bottom: 2em; /* Increased gap between right-column content and footer */
    padding: 1.25em; /* 20px padding */
}

/* Left column width */
.left-column {
    max-width: 300px; /* Fixed width for the left column */
}

/* Right column width takes the remaining space */
.right-column {
    flex: 2; /* Allows the right column to adjust proportionally */
}


.profile-photo {
    width: 100%; /* Reduced size to make it smaller, retaining aspect ratio */
    height: auto;
    /* border-radius: 50%; */
    margin-bottom: 1.25em; /* 20px */
}

section {
    margin-bottom: 1.25em; /* 20px */
}

/* Left column heading styles */
.left-column h2 {
    font-size: 1.0em; /* Smaller h2 for left column */
    border-bottom: 0.125em solid #9E2D3B;
    padding-bottom: 0.3125em;
    margin: 0 0 0.625em;
}

.left-column h3 {
    font-size: 0.9em; /* Smaller h3 for left column */
    margin: 0 0 0.625em;
}

/* Right column heading styles */
.right-column h2 {
    font-size: 1.1em; /* Larger h2 for right column */
    border-bottom: 0.125em solid #9E2D3B;
    padding-bottom: 0.3125em;
    margin: 0 0 0.625em;
}

.right-column h3 {
    font-size: 1.0em; /* Larger h3 for right column */
    margin: 0 0 0.625em;
}

/* Paragraph styles for left and right columns */
.left-column p {
    font-size: 0.8em; /* Smaller paragraph text for left column */
    line-height: 1.4;
    color: #555;
}

.right-column p {
    font-size: 0.9em; /* Larger paragraph text for right column */
    line-height: 1.6;
    color: #333;
    margin-top: 0.5em; /* Reduced blank space above each paragraph */
    margin-bottom: 0.5em; /* Reduced blank space below each paragraph */
}

/* Footer */
footer {
    font-size: 0.9em;
    width: 100%;
    background: #333;
    color: #fff;
    text-align: center;
    padding: 0.02em 0;
    position: fixed;
    bottom: 0;
}

/* News section */
#news {
    margin-bottom: 2em;
}

.news-item {
    display: flex;
    margin-bottom: 1em;
    font-size: 0.9em;
}

.news-date {
    flex: 0 0 10em;
    font-weight: bold;
    color: #555;
}

.news-content {
    flex: 1;
    line-height: 1.4;
}

/* Publications section */
#publications {
    margin-bottom: 2em;
}

.publication-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.5em;
}

/* Adjust publication figure sizes */
.publication-figure {
    flex: 0 0 16em; /* Adjust here for larger or smaller figures */
    margin-right: 1em;
}

.publication-figure img {
    width: 100%;
    height: auto;
    /* border: 1px solid #ccc; */
    /* border-radius: 4px; */
}

.publication-details h3 {
    margin: 0;
    font-size: 1.0em;
}

.publication-details p {
    margin: 0.2em 0;
    line-height: 1.4;
}

.navbar {
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.8); /* Semi-transparent white background */
    padding: 0.5em 1em;
    z-index: 1001; /* Make sure it appears above other elements */
    border-radius: 0 0 0 10px;
}

.nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1em;
}

/* .nav-links li {
    display: inline;
}

.nav-links a {
    text-decoration: none;
    font-weight: bold;
    color: #9E2D3B; 
    transition: color 0.3s;
} */

.nav-links li {
    position: relative;
    display: inline-block;
    padding: 0.5em 1em;
}

.nav-links li:hover {
    background-color: #EEA41F; /* Yellow background: #EEA41F */
    border-radius: 5px; /* Optional: Rounded corners */

    padding: 0.8em 1.2em; /* Increase vertical and horizontal padding on hover */
    transition: all 0.3s ease; /* Smooth size increase */
}

.nav-links a {
    text-decoration: none;
    font-weight: bold;
    color: #9E2D3B; /* Default text color */
    display: block; /* Ensures the entire area is clickable */
    transition: color 0.3s;
}

.nav-links a:hover {
    color: #FFFFFF; 
}