/* Base Styling */
body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f4f4f9;
    color: #333;
}

/* Style for custom links */
.custom-link {
    text-decoration: none; /* Removes the underline */
    color: #007acc; /* Simple blue color */
    font-weight: normal; /* Adjust weight if needed */
}

.custom-link:hover {
    color: #005b99; /* Darker blue on hover */
}

.container {
    width: 90%;
    max-width: 1100px;
    margin: auto;
}

/* Header Styling */
header {
    padding: 20px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-bottom: 2px solid #8B0000;
    color: #333;
}

.profile {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
}


.profile-text {
    flex-grow: 1;
    text-align: left;
}






/* keep your existing .profile flex styles */

/* Circle photo that doesn't affect the flex row width */
.avatar {
  width: clamp(120px, 32vw, 180px);  /* responsive size of the circle */
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;                  /* masks anything outside the circle */
  flex: 0 0 auto;                    /* don't let flex stretch it */
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;                 /* fill & crop */
/*   object-position: 45% 30%; /* center X, move crop up a bit */ */
  display: block;
  border: 3px solid white;           /* optional border on the img */
  box-sizing: border-box;            /* border doesn't change the circle size */
}



/* Size the wrapper; image fills it */
/* .profile { */
/*   width: clamp(120px, 32vw, 180px);   /* responsive circle size */ */
/* } */




/* .profile img { */
/*   width: 100%; */
/*   aspect-ratio: 1 / 1;                /* keep it square everywhere */ */
/*   height: auto !important;            /* override any fixed heights */ */
/*   border-radius: 50%;                 /* circle */ */
/*   object-fit: cover;                  /* crop to fill */ */
/*   display: block; */
/*   border: 3px solid white; */
/* } */



/* Style for profile picture */
/* .profile img { */
/*     width: 450px; */
/*     height: 175px; */
/*     border-radius: 50%; */
/*     object-fit: cover;     /* fills the square, crops overflow */ */
/*     border: 3px solid white; */
/* } */





.profile-text h1 {
    margin: 0;
    font-size: 2em;
    font-weight: bold;
}

.profile-text h2 {
    margin: 0px 0 5px;
    font-size: 1.4em;
    font-weight: normal;
    font-style: italic;
}

.profile-text p {
    margin: 0;
    font-size: 1.2em;
    line-height: 1.4;
}


.social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Space between icons */
    flex-wrap: wrap; /* Allow wrapping for smaller screens */
    margin-top: 15px;
}

.social-icons div {
    display: flex;
    flex-direction: column; /* Stack icon and text vertically */
    align-items: center;
    text-align: center;
}

.social-icons img {
    width: 40px; /* Icon size */
    height: 40px;
    margin-bottom: -5px; /* Space between icon and text */
}

.social-icons a {
    font-size: 0.9em;
    color: #007acc; /* Blue color for text */
    text-decoration: none; /* Remove underline */
}

.social-icons a:hover {
    color: #005b99; /* Darker blue on hover */
}




/* Projects Section */
.project-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

.project {
    background: white;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 30%;
    max-width: 400px;
    /*height: 600px; /* Set a fixed height */
    overflow: hidden; /* Ensure excess content is hidden */
    margin: auto;
}

.project img {
    width: 90%;
    max-width: 400px;
    /*width: auto; /* Make the GIF responsive */
    height: auto; /* Maintain aspect ratio */
    max-height: 350px;
    border-radius: 5px;
    margin-bottom: 10px;
    margin-top: 10px;
}

.project h3 {
    margin: 0 0 10px;
    color: #333;
}

.project p {
    margin: 0 0 10px;
}

.project-links {
    text-align: center;
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Enables wrapping */
    gap: 5px; /* Adjust space between links */
}

.project-links a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    color: #007acc; /* Blue for links */
}

.project-links a:hover {
    color: #005b99; /* Darker blue on hover */
}

/* News Section */
.news {
    margin-top: 20px;
}

.news ul {
    list-style-type: disc;
    margin-left: 20px;
}

.news ul li {
    margin-bottom: 10px;
}

/* Footer */
footer {
    text-align: center;
    padding: 10px 0;
    background: #8B0000;
    color: white;
    margin-top: 20px;
}

/* Publications Section Styling */
/* Publications Section Styling */
.publications, .talks {
    margin: 40px 0; /* Ensure spacing for both sections */
}

.publication-list, .talk-list {
    list-style: none;
    padding: 0;
}

.publication-list li, .talk-list li {
    margin-bottom: 20px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

.publication-title, .talk-title {
    font-size: 1.1em;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.publications h3, .talks h3 {
    font-size: 1.2em;
    color: #8B0000;
    margin-bottom: 10px;
}

.publications ul, .talks ul {
    list-style-type: disc;
    margin-left: 20px;
}

.publications ul li, .talks ul li {
    margin-bottom: 5px;
}

.publications a, .talks a {
    color: #007acc;
    text-decoration: none;
}

.publications a:hover, .talks a:hover {
    color: #005b99;
    text-decoration: underline;
}

.publication-title a, .talk-title a {
    text-decoration: none;
    color: #007acc;
}

.publication-title a:hover, .talk-title a:hover {
    color: #005b99;
    text-decoration: underline;
}

.publication-year, .talk-year {
    font-size: 1em;
    color: #555;
    margin-left: auto;
}

.publication-authors {
    font-size: 1em;
    color: #333;
    margin-top: 5px;
}

.publication-journal, .talk-details {
    font-size: 1em;
    font-style: italic;
    color: #555;
    margin-top: 5px;
}




/* Responsive Design */
@media (max-width: 768px) {
    .profile {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .profile-text {
        text-align: center;
    }

    .project {
        width: 60%;
    }

    .social-icons {
        flex-wrap: wrap;
        justify-content: center;
    }
}

.section-divider {
    border-bottom: 3px solid #8B0000; /* Same color as the header */
    padding-bottom: 20px; /* Adjust spacing below the section */
    margin-bottom: 20px; /* Adjust spacing before the next section */
}