/* --- CSS Variables --- */
:root {
    --primary-color: #2c3e50; /* Dark Slate Blue */
    --secondary-color: #3498db; /* Bright Blue */
    --accent-color: #e67e22; /* Carrot Orange */
    --success-color: #2ecc71; /* Emerald Green */
    --light-bg: #f8f9fa; /* Very Light Grey */
    --alt-light-bg: #eef2f7; /* Slightly more distinct blueish light grey */
    --dark-text: #34495e; /* Wet Asphalt */
    --light-text: #ffffff;
    --card-bg: #ffffff;
    --border-color: #dde1e6; /* Softer border color */
    --border-radius: 12px; /* Consistent rounded corners */
    --box-shadow-light: 0 6px 18px rgba(0, 0, 0, 0.07); /* Slightly more defined shadow */
    --box-shadow-strong: 0 10px 30px rgba(0, 0, 0, 0.12); /* More pronounced shadow on hover */
    --transition-speed: 0.35s; /* Consistent transition speed */
    --font-family-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --font-family-headings: var(--font-family-main);
}

/* --- Basic Reset & Global Styles --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px; /* Base font size */
}

body {
    font-family: var(--font-family-main);
    line-height: 1.7;
    color: var(--dark-text);
    background-color: var(--light-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* Prevent horizontal scrollbars */
    text-rendering: optimizeLegibility;
}

/* --- Accessibility: Focus Styles --- */
a:focus-visible, button:focus-visible, [tabindex="0"]:focus-visible {
    outline: 3px solid var(--secondary-color);
    outline-offset: 3px; /* Increased offset for better visibility */
    box-shadow: 0 0 0 6px rgba(52, 152, 219, 0.45); /* Slightly larger shadow */
}

.container {
    width: 90%;
    max-width: 1180px; /* Slightly increased max-width for better spacing on larger screens */
    margin: 0 auto;
    padding-left: 15px; /* Add some padding to container for smaller screens */
    padding-right: 15px;
}

a {
    color: #2980b9; /* Darker blue for better contrast */
    text-decoration: none;
    transition: color var(--transition-speed) ease, opacity var(--transition-speed) ease;
}

a:hover {
    color: var(--accent-color);
    opacity: 0.85;
    text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-headings);
    color: var(--primary-color);
    margin-bottom: 0.85em; /* Consistent bottom margin */
    line-height: 1.35; /* Slightly adjusted line-height */
    font-weight: 600;
}

/* --- Header --- */
header {
    background: linear-gradient(90deg, var(--primary-color) 0%, #3a506b 100%);
    color: var(--light-text);
    padding: 1rem 0;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 3px 12px rgba(0,0,0,0.12);
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo a {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--light-text);
    text-decoration: none;
    letter-spacing: -0.5px;
    transition: opacity var(--transition-speed) ease;
}
.logo a:hover {
    opacity: 0.8;
    text-decoration: none; /* Remove underline on hover for logo */
}

.nav-links {
    list-style: none;
    display: flex;
}

.nav-links li {
    margin-left: 30px;
}

.nav-links a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-weight: 500;
    padding: 0.5rem 0.2rem;
    position: relative;
    transition: color var(--transition-speed) ease;
    font-size: 0.95rem;
}

.nav-links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--secondary-color);
    transition: width var(--transition-speed) ease-in-out;
}

.nav-links a:hover, .nav-links a.active { /* Ensure active also gets the bright text color */
    color: var(--light-text);
}

.nav-links a:hover::after, .nav-links a.active::after {
    width: 100%;
}

.nav-links a:hover {
    text-decoration: none; /* Prevent underline on nav links */
}

.burger {
    display: none;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0.5rem;
}

.burger div {
    width: 28px;
    height: 3px;
    background-color: var(--light-text);
    margin: 6px 0;
    border-radius: 1px;
    transition: all var(--transition-speed) ease-in-out;
}

/* --- Hero Section --- */
.hero-section {
    text-align: center;
    padding: 100px 0 80px; /* Adjusted padding */
    background: var(--light-bg);
}
.hero-content {
    max-width: 820px; /* Slightly increased max-width */
    margin: 0 auto;
}
.hero-title {
    font-family: var(--font-family-headings);
    font-size: 3.6rem; /* Slightly increased for impact */
    color: var(--primary-color);
    margin-bottom: 0.8rem;
    font-weight: 700;
    letter-spacing: -1px;
}
.hero-subtitle {
    font-size: 1.85rem; /* Slightly increased for clarity */
    color: var(--secondary-color);
    margin-bottom: 1.85rem;
    font-weight: 400;
}
.hero-description {
    font-size: 1.1rem;
    color: var(--dark-text);
    margin-bottom: 3rem; /* Increased bottom margin */
    line-height: 1.85; /* Slightly adjusted line-height */
    text-align: justify;
}

/* --- Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem; /* Slightly increased gap */
    padding: 16px 38px; /* Increased padding for a more substantial button */
    border-radius: var(--border-radius);
    text-decoration: none;
    font-weight: 600;
    transition: all var(--transition-speed) ease-in-out;
    cursor: pointer;
    border: none;
    font-size: 1.05rem;
    box-shadow: var(--box-shadow-light);
}
.btn:hover {
    text-decoration: none; /* Prevent underline on buttons */
}

.btn-primary {
    background-color: var(--secondary-color);
    color: var(--light-text);
}
.btn-primary:hover {
    background-color: #277ab0; /* Darken on hover */
    transform: translateY(-3px) scale(1.03); /* Consistent hover effect */
    box-shadow: 0 8px 20px rgba(41, 128, 185, 0.4); /* Enhanced shadow on hover */
}
.btn-icon svg {
    fill: currentColor;
}

/* --- General Section Styling --- */
.section-padding {
    padding: 90px 0; /* Consistent vertical padding */
}

.alt-bg {
    background-color: var(--alt-light-bg);
}

.section-title {
    text-align: center;
    margin-bottom: 65px; /* Increased bottom margin */
}

.section-title h2 {
    font-family: var(--font-family-headings);
    font-size: 2.9rem; /* Slightly increased */
    color: var(--primary-color);
    position: relative;
    display: inline-block;
    padding-bottom: 22px; /* Increased padding for underline */
    margin-bottom: 0;
    font-weight: 700;
}

.section-title h2::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 85px; /* Slightly wider underline */
    height: 5px; /* Thicker underline */
    background-color: var(--secondary-color);
    border-radius: 3px;
}

/* --- Card Styling --- */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); /* Adjusted min card width */
    gap: 30px;
}

.card {
    background: var(--card-bg);
    padding: 30px 35px; /* Adjusted padding */
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow-light);
    transition: transform var(--transition-speed) cubic-bezier(0.25, 0.8, 0.25, 1),
                box-shadow var(--transition-speed) cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 1px solid var(--border-color);
    display: flex; /* Ensures cards in a grid row have same height if content differs */
    flex-direction: column;
}

.card:hover {
    transform: translateY(-10px) scale(1.01); /* Subtle hover effect */
    box-shadow: var(--box-shadow-strong);
}

.card h3 {
    color: var(--primary-color);
    font-family: var(--font-family-headings);
    font-size: 1.65rem; /* Increased for readability */
    margin-bottom: 12px;
    font-weight: 600;
}
.card .date {
    font-style: italic;
    color: #7f8c8d; /* Muted date color */
    margin-bottom: 15px;
    font-size: 0.9rem;
    display: block;
}

/* --- Experience Timeline --- */
/* Addressing the card width issue from the screenshot */
#experience .container { /* No change needed if global container is fine */
    /* max-width: 960px; /* If you want timeline section narrower */
}

.timeline {
    position: relative;
    max-width: 900px; /* Max width for the timeline itself */
    margin: 0 auto;
}

.timeline::before {
    content: '';
    position: absolute;
    width: 3px;
    background-color: var(--secondary-color);
    opacity: 0.3;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2px;
}

.timeline-item {
    position: relative;
    width: 50%;
    padding: 0 40px; /* Adjust horizontal padding */
    margin-bottom: 50px;
    box-sizing: border-box; /* Ensure padding doesn't add to width */
}

.timeline-item:nth-child(odd) {
    left: 0;
    padding-right: 20px; /* Specific padding for odd items */
}
.timeline-item:nth-child(even) {
    left: 50%;
    padding-left: 20px; /* Specific padding for even items */
}

/* Timeline dot */
.timeline-item::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    background-color: var(--secondary-color);
    border: 4px solid var(--alt-light-bg); /* Match section background */
    top: 5px; /* Align with card top */
    border-radius: 50%;
    z-index: 1;
    box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.25);
    transition: transform var(--transition-speed) ease;
}
.timeline-item:hover::after {
    transform: scale(1.2);
}
.timeline-item:nth-child(odd)::after {
    right: -9px; /* (18/2) position dot relative to center line */
    transform: translateX(50%);
}
.timeline-item:nth-child(even)::after {
    left: -9px;  /* (18/2) position dot relative to center line */
    transform: translateX(-50%);
}
/* Keep dot centered on hover */
.timeline-item:nth-child(odd):hover::after {
    transform: translateX(50%) scale(1.2);
}
.timeline-item:nth-child(even):hover::after {
    transform: translateX(-50%) scale(1.2);
}

.timeline-content.card {
    position: relative;
    margin: 0; /* Remove default card margin if any conflict */
    border-left: 4px solid var(--secondary-color);
    width: 100%; /* Make card take full width of its timeline-item container */
}
.timeline-content h3 {
    color: var(--secondary-color); /* Emphasize title */
}
.timeline-content ul {
    list-style-type: none;
    padding-left: 0;
}
.timeline-content ul li {
    margin-bottom: 10px;
    font-size: 0.95rem;
    padding-left: 22px;
    position: relative;
}
.timeline-content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 8px;
    height: 8px;
    background-color: var(--accent-color);
    border-radius: 50%;
    transition: background-color var(--transition-speed) ease;
}
.timeline-content ul li:hover::before {
    background-color: var(--primary-color);
}

/* --- Education Section --- */
.education-grid .card {
    text-align: center;
}
.education-icon {
    margin-bottom: 20px;
    transition: transform var(--transition-speed) ease;
}
.education-card:hover .education-icon {
    transform: scale(1.1) rotate(5deg); /* Subtle icon animation */
}
.education-icon svg {
    width: 52px; height: 52px;
    color: var(--secondary-color);
}

/* --- Skills Section --- */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); /* Adjusted min card width */
    gap: 25px;
}
.skills-grid .card { /* All cards in skills grid */
    border-left: 5px solid var(--secondary-color); /* Consistent border */
}
.skill-category h4 {
    color: var(--primary-color);
    margin-bottom: 15px;
    font-size: 1.35rem; /* Slightly increased font size */
}
.skill-category p {
    font-size: 0.95rem;
    line-height: 1.65; /* Slightly adjusted line-height */
}

/* --- Projects Section --- */
.project-grid .card { /* All cards in project grid */
    border-top: 5px solid var(--accent-color); /* Different accent for projects */
}
.project-card p {
    font-size: 1rem;
    margin-bottom: 1rem;
}

/* --- Courses & Awards Lists --- */
.course-list, .awards-list {
    list-style: none;
    padding-left: 0;
    max-width: 820px; /* Slightly increased max-width */
    margin: 0 auto;
}
.course-list li, .awards-list li {
    background: var(--card-bg);
    padding: 20px 25px;
    margin-bottom: 18px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow-light);
    font-size: 1.05rem;
    border-left: 5px solid var(--success-color);
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease, border-left-color var(--transition-speed) ease;
    position: relative;
    padding-left: 55px; /* Space for icon */
}
.course-list li:hover, .awards-list li:hover {
    transform: translateX(8px) scale(1.02);
    box-shadow: var(--box-shadow-strong);
    border-left-color: var(--accent-color); /* Change border color on hover */
}

/* List item icons */
.course-list li::before, .awards-list li::before {
    content: '';
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: transform var(--transition-speed) ease;
}
.course-list li:hover::before, .awards-list li:hover::before {
    transform: translateY(-50%) scale(1.1); /* Icon grows on hover */
}

.course-list li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232ecc71'%3E%3Cpath d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 15l-4-4 1.41-1.41L10 16.17l6.59-6.59L18 11l-8 8z'/%3E%3C/svg%3E");
}
.awards-list li::before {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e67e22'%3E%3Cpath d='M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94.63 1.5 1.74 2.77 3.11 3.5V19H9v2h6v-2h-1.5v-2.56c1.37-.73 2.48-2 3.11-3.5C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zm-7 0c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z'/%3E%3C/svg%3E");
}
/* Fix for awards list icon color */
.awards-list li {
    border-left-color: var(--accent-color); /* Start with accent color for awards */
}
.awards-list li:hover {
    border-left-color: var(--success-color); /* Change to success on hover or another distinct color */
}


/* --- Interests Section --- */
.interests-tags {
    text-align: center;
    padding: 0 15px;
}
.interests-tags span {
    display: inline-block;
    background-color: var(--secondary-color);
    color: var(--light-text);
    padding: 10px 20px;
    margin: 8px;
    border-radius: 25px; /* Pill shape */
    font-size: 0.95rem;
    font-weight: 500;
    transition: background-color var(--transition-speed) ease, transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
    box-shadow: var(--box-shadow-light);
}
.interests-tags span:hover {
    background-color: var(--accent-color);
    transform: translateY(-3px) scale(1.05);
    box-shadow: var(--box-shadow-strong);
}

/* --- References Section --- */
.references-grid {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* Adjusted min card width */
    gap: 30px;
}
.reference-card {
    border-left: 5px solid var(--accent-color);
    display: flex;
    flex-direction: column;
    padding-bottom: 20px; /* Ensure content doesn't touch bottom edge */
}
.reference-card h3 {
    font-size: 1.35rem;
    color: var(--primary-color);
    margin-bottom: 0.3rem;
}
.reference-title {
    font-weight: 500;
    color: var(--secondary-color);
    margin-bottom: 0.5rem;
    font-size: 1rem;
}
.reference-affiliation {
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 1rem;
}
.reference-research-interests {
    font-size: 0.9rem;
    color: var(--dark-text);
    margin-bottom: 1rem;
    line-height: 1.6;
}
.reference-research-interests strong {
    color: var(--primary-color);
    display: block;
    margin-bottom: 0.3rem;
    font-weight: 600;
}
.reference-card .contact-item {
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center; /* Vertically align icon and text */
}
.reference-card .contact-item:last-child {
    margin-bottom: 0;
}
.reference-card .contact-item svg {
    width: 16px; height: 16px;
    margin-right: 10px;
    color: var(--secondary-color);
    flex-shrink: 0; /* Prevent icon from shrinking */
}
.reference-card .contact-item a {
    font-weight: 500;
    word-break: break-word; /* Break long links if necessary */
}
.reference-card .gs-link a, /* Style for Google Scholar and other specific links */
.reference-card .page-link a {
    color: var(--accent-color);
}
.reference-card .gs-link a:hover,
.reference-card .page-link a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

/* --- Contact Section --- */
.contact-intro {
    text-align: center;
    font-size: 1.15rem;
    margin-bottom: 40px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}
.contact-details-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); /* Adjusted min card width */
    gap: 30px;
    align-items: stretch; /* Make cards in a row same height */
}

.contact-card, .languages-spoken-card { /* Apply to both cards in contact section */
    padding: 30px 35px; /* Consistent padding */
    text-align: left;
    display: flex;
    flex-direction: column;
}
.contact-card h4, .languages-spoken-card h4 {
    color: var(--primary-color);
    font-family: var(--font-family-headings);
    font-size: 1.45rem; /* Slightly increased font size */
    margin-bottom: 20px;
    border-bottom: 2px solid var(--secondary-color);
    padding-bottom: 10px;
    display: inline-block; /* So border only underlines text */
}
.contact-item {
    display: flex;
    align-items: center; /* Vertically align icon and text */
    margin-bottom: 15px;
    font-size: 1rem;
}
.contact-item svg {
    margin-right: 12px;
    color: var(--secondary-color);
    flex-shrink: 0;
}
.contact-item a {
    font-weight: 500;
    word-break: break-all; /* Break long emails/links */
}
.contact-item a:hover {
    text-decoration: underline;
}
.languages-spoken-card p {
    margin-bottom: 10px;
    font-size: 1rem;
    position: relative;
    padding-left: 25px; /* Space for bullet */
}
.languages-spoken-card p::before {
    content: ''; /* Custom bullet */
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background-color: var(--accent-color);
    border-radius: 50%;
}

/* --- Footer --- */
footer {
    background: var(--dark-text);
    color: rgba(255, 255, 255, 0.85);
    text-align: center;
    padding: 3rem 0;
    margin-top: 60px; /* Space above footer */
}
footer p {
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

/* --- Animation Entry --- */
/* This should be handled by JS, but if you want a default state before JS loads */
.section-padding {
    opacity: 0; /* JS will change this to 1 */
    transform: translateY(40px); /* JS will change this to translateY(0) */
}


/* --- Responsive Design --- */
@media screen and (max-width: 1024px) {
    .hero-title { font-size: 2.8rem; }
    .hero-subtitle { font-size: 1.5rem; }
    .section-title h2 { font-size: 2.4rem; }

    .card-grid,
    .references-grid,
    .skills-grid,
    .contact-details-wrapper {
        grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); /* Adjust min card width for tablets */
    }
    /* Ensure timeline items don't get too squished */
    .timeline-item {
        padding: 0 30px;
    }
    .timeline-item:nth-child(odd) { padding-right: 15px; }
    .timeline-item:nth-child(even) { padding-left: 15px; }
}

@media screen and (max-width: 768px) {
    html { font-size: 15px; } /* Adjust base font size for mobile */
    .container { width: 95%; } /* More width for content on small screens */

    .logo a { font-size: 1.5rem; }
    .nav-links {
        position: fixed;
        right: 0px;
        top: 0; /* Align to top */
        height: 100vh;
        background-color: rgba(44, 62, 80, 0.98); /* Slightly more opaque */
        backdrop-filter: blur(5px);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 75%; /* Percentage based width */
        max-width: 300px; /* Max width for the nav */
        transform: translateX(100%);
        transition: transform 0.5s ease-in-out;
        padding-top: 60px; /* Space for close button or branding if added */
        box-shadow: -5px 0 15px rgba(0,0,0,0.2);
        z-index: 999; /* Ensure nav is above burger */
    }
    .nav-links li {
        margin: 25px 0; /* Vertical spacing for links */
        opacity: 0; /* For link fade-in animation */
    }
    .burger {
        display: block; /* Show burger on mobile */
        z-index: 1001; /* Burger above nav when closed */
        position: relative; /* For z-index to take effect */
    }
    .nav-active {
        transform: translateX(0%); /* Slide in nav */
    }
    @keyframes navLinkFade {
        from { opacity: 0; transform: translateX(50px); }
        to { opacity: 1; transform: translateX(0px); }
    }

    .hero-title { font-size: 2.3rem; }
    .hero-subtitle { font-size: 1.25rem; }
    .hero-description { font-size: 1rem; text-align: left; } /* Justify can be tricky on mobile */
    .btn { padding: 12px 28px; font-size: 0.95rem; }

    /* Timeline adjustments for mobile */
    .timeline::before {
        left: 20px; /* Shift timeline bar to the left */
        transform: translateX(0);
    }
    .timeline-item,
    .timeline-item:nth-child(even) { /* Stack all items on one side */
        width: 100%;
        left: 0;
        padding-left: 50px; /* Space for the dot and line */
        padding-right: 15px; /* Default right padding */
    }
    .timeline-item::after,
    .timeline-item:nth-child(even)::after { /* Position dot on the left */
        left: 11px; /* (20px from timeline::before - 18px/2 width of dot) */
        transform: translateX(0);
    }
    .timeline-item:nth-child(odd):hover::after, /* Reset hover transforms for single column */
    .timeline-item:nth-child(even):hover::after {
        transform: scale(1.2);
    }
    .timeline-content.card {
        text-align: left; /* Ensure text is left-aligned in cards */
        width: 100%; /* Card takes full available width */
    }
    .timeline-content ul li::before {
        top: 9px; /* Adjust bullet position if needed */
    }

    .section-title h2 { font-size: 2.1rem; }
    .card-grid,
    .references-grid,
    .contact-details-wrapper,
    .skills-grid {
        grid-template-columns: 1fr; /* Single column for cards on mobile */
    }
}

/* Burger Icon Animation (Toggle Class) */
.toggle .line1 {
    transform: rotate(-45deg) translate(-7px, 7px);
}
.toggle .line2 {
    opacity: 0;
    transform: translateX(20px); /* Slide out effect */
}
.toggle .line3 {
    transform: rotate(45deg) translate(-7px, -7px);
}