/* Global Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

/* Base Styles */
:root {
    --primary-color: #2c3e50;
    --secondary-color: #1a567d;
    --accent-color: #c0392b;
    --light-bg: #f9f9f9;
    --dark-bg: #2c3e50;
    --text-color: #333;
    --link-color: #007BFF;
    --table-bg: #f5f5f5;
    --border-color: #ddd;
    --hover-color: #e0e0e0;

    --dark-primary: #1a1a1a;
    --dark-secondary: #2d2d2d;
    --dark-text: #f9f9f9;
}

body {
    font-family: 'Segoe UI', sans-serif;
    color: var(--text-color);
    background: #fff;
    line-height: 1.6;
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-top: 20px; /* To account for fixed navbar */
}

/* Header Section */
.header {
    text-align: center;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 10px 10px 10px;
    border-bottom: 3px solid var(--primary-color);
    position: relative;
}

.glass { /* Explicitly define the glass class */
    width: 100%; /* Ensure it's full width */
    /* Add any other glass-related styles you want here */
}

.profile-img {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--secondary-color);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.profile-img:hover {
    transform: scale(1.05);
}

.profile-container {
    margin-top: 70px;
    margin-bottom: -15px;
    text-align: center;
}

.header-content h1 {
    color: var(--primary-color);
    margin: 10px 0;
    font-size: 3.0rem;
    text-align: center;
}

.body-dark .header-content h1 {
    color: var(--dark-text);
}

.body-dark .position {
    color: var(--dark-text);
}

.position {
    color: var(--primary-color);
    font-size: 1.3rem;
    margin-bottom: 20px;
    margin-top: -5px;
}

.certifications {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.cert-badge {
    display: inline-block;
    padding: 5px 10px;
    background: var(--primary-color);
    color: white;
    border-radius: 25px;
    text-decoration: none;
    font-size: 1.0rem;
    transition: all 0.3s ease;
}

.cert-badge:hover {
    background: var(--secondary-color);
    transform: translateY(-3px);
}

/* Navbar */
.navbar {
    position: fixed;
    top: 0;
    left: 0; /* Add this */
    right: 0; /* Add this */
    width: 100%;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Nav links */
.nav-links {
    list-style: none;
    display: flex;
    gap: 25px;
    align-items: center;
    transition: all 0.3s ease;
}

.nav-links li a {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
    position: relative;
    font-size: 1.6rem;
}

.nav-links li a::after {
    content: '';
    width: 0%;
    height: 2px;
    background: var(--accent-color);
    position: absolute;
    left: 0;
    bottom: -4px;
    transition: 0.3s;
}

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

/* Hamburger */
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 18px;
}

.hamburger span {
    background: var(--primary-color);
    height: 3px;
    margin: 4px 0;
    width: 25px;
    transition: all 0.3s ease;
}

/* Mobile nav */
@media (max-width: 768px) {
    .nav-links {
        flex-direction: column;
        background: #fff;
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        display: none;
        padding: 20px 0;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .nav-links.open {
        display: flex;
    }

    .hamburger {
        display: flex;
    }
}

/* Dark mode support */
.body-dark .navbar {
    background: rgba(26, 26, 26, 0.85);
    backdrop-filter: blur(12px);
}

.body-dark .nav-links li a {
    color: var(--dark-text);
}

.body-dark .cert-badge {
    background: var(--dark-secondary);
}

.body-dark .cert-badge:hover {
    background: var(--accent-color);
}

/* Animation */
.animated {
    animation: zoomIn 0.7s ease-in-out;
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Section styling */
.section {
    padding: 40px 0;
}

.section-title {
    color: var(--primary-color);
    font-size: 2rem;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 10px;
    display: inline-block;
}


/* Root variables for theme */
:root {
    --primary-color: #1a237e;
    --secondary-color: #3949ab;
    --accent-color: #f57c00;
    --bg-color: #f4f6f9;
    --text-color: #333;
    --card-bg: #fff;
    --border-radius: 12px;
    --shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    --transition: all 0.4s ease;
    --timeline-line: #d0d0d0;
}

/* Main section */
#academic-journey.section {
    background: var(--bg-color);
    padding: 60px 20px;
    color: var(--text-color);
    font-family: 'Segoe UI', Roboto, sans-serif;
}

/* Section Title */
.section-title {
    font-size: 2.5rem;
    text-align: center;
    color: var(--primary-color);
    margin-bottom: 30px;
    position: relative;
}

.section-title::after {
    content: '';
    width: 60px;
    height: 4px;
    background: var(--accent-color);
    display: block;
    margin: 10px auto 0;
    border-radius: 2px;
}

/* TIMELINE STYLING */
.timeline {
    position: relative;
    padding-left: 40px;
    margin-left: 20px;
    margin-top: 30px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--timeline-line);
}

/* Timeline Item */
.timeline li {
    position: relative;
    background: var(--card-bg);
    margin-bottom: 30px;
    padding: 10px 35px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    transition: var(--transition);
    list-style-type: none;
}

.timeline li:hover {
    transform: translateX(6px);
}

/* Timeline Dot */
.timeline li::before {
    content: '';
    position: absolute;
    left: -32px;
    top: 22px;
    width: 16px;
    height: 16px;
    background: var(--accent-color);
    border: 3px solid white;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--accent-color);
}

#academic-journey h3 {
    font-size: 1.60rem; /* Adjust to your desired size */
    color: var(--secondary-color); /* Example color */
    /* Add any other desired styles */
}
/* Year and Info */
.timeline h4 {
    color: var(--primary-color);
    font-size: 1.6rem;
    margin-bottom: 5px;
    font-weight: 600;
}

.timeline p {
    font-size: 1.3rem;
    color: #050000;
    margin-top: 0px;
    margin-bottom: -10px;
}

/* RESEARCH EXPERIENCE */
.research-experience {
    margin-top: 30px;
    display: grid;
    gap: 30px;
}

.experience-item {
    background: var(--card-bg);
    padding: 25px 30px;
    border-left: 6px solid var(--accent-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.experience-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.experience-item h4 {
    font-size: 1.6rem;
    color: var(--primary-color);
    margin-bottom: 5px;
    font-weight: 600;
}

.experience-item p {
    font-size: 1.3rem;
    color: #050000;
    margin-bottom: 10px;
    line-height: 1.6;
}

.experience-item ul {
    padding-left: 20px;
    list-style: disc;
    margin: 0;
}

.experience-item li {
    font-size: 1.1rem;
    margin-bottom: 8px;
    color: #050000;
}

/* Animation on Scroll (optional) */
.hidden {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive */
@media (max-width: 768px) {
    .timeline {
        padding-left: 20px;
        margin-left: 10px;
    }

    .timeline li::before {
        left: -26px;
    }

    .experience-item {
        padding: 20px;
    }
}

/* RESEARCH INTERESTS */
#academic-journey p {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 20px 0 30px;
}
/* Add margin BEFORE "Research Interests" heading only */
.research-experience + h3 {
    margin-top: 30px !important; /* Match "Research Experience" top margin */
}

/* Adjust paragraph margin AFTER heading */
.research-experience + h3 + p {
    margin: 20px 0 0px !important; /* Match other content spacing */
}
.skill-tag {
    background: rgba(var(--secondary-color-rgb), 0.1);
    color: var(--primary-color);
    padding: 12px 20px;
    border-radius: 25px;
    font-weight: 600;
    transition: var(--transition);
    font-size: 1.3rem;
    border: 1px solid rgba(var(--primary-color-rgb), 0.1);
}

.skill-tag:hover {
    background: var(--secondary-color);
    color: white;
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

/* Dark Mode */
.body-dark .skill-tag {
    background: rgba(var(--dark-secondary-rgb), 0.2);
    color: var(--dark-text);
    border-color: rgba(var(--dark-text-rgb), 0.1);
}

.body-dark .skill-tag:hover {
    background: var(--accent-color);
    color: var(--dark-primary);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .skill-tag {
        padding: 10px 16px;
        font-size: 1.1rem;
    }
    
    #academic-journey p {
        gap: 10px;
        margin: 15px 0 25px;
    }
}

@media (max-width: 480px) {
    .skill-tag {
        padding: 8px 14px;
        font-size: 1rem;
    }
    
    #academic-journey h3 {
        font-size: 1.4rem;
    }
}

/* Research Grants Section */
#research-grants {
    padding: 60px 20px;
    background-color: #f9f9f9;
}

/* Apply the same styling to the Research Grants title */
#research-grants .section-title {
    font-size: 2.5rem; /* Same font size as Academic Journey */
    text-align: center;
    margin-bottom: 40px;
    color: var(--primary-color); /* Same color as Academic Journey */
    position: relative;
}

#research-grants .section-title::after {
    content: '';
    width: 60px; /* Same width as Academic Journey */
    height: 4px; /* Same height as Academic Journey */
    background: var(--accent-color); /* Same background color as Academic Journey */
    display: block;
    margin: 10px auto 0;
    border-radius: 2px; /* Same border-radius as Academic Journey */
}


.grants-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
}

/* Grant Cards */
.grant-item {
    background: #ffffff;
    padding: 25px 20px;
    border-radius: 12px;
    border-left: 5px solid #f57c00;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.grant-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.grant-item h3 {
    color: var(--primary-color);
    font-size: 1.6rem;
    margin-bottom: 25px;
    font-weight: 600;
}

.grant-item p, .grant-item ul {
    font-size: 1.3rem;
    color: #050000;
    margin-bottom: 15px;
}

.grant-item strong {
    color: #000;
}

.grant-item ul {
    padding-left: 20px;
    margin-top: 5px;
}

.grant-item ul li {
    list-style-type: disc;
    margin-bottom: 5px;
}

/* Publications Section */
#publications.section {
    padding: 60px 20px;
    background: var(--light-bg);
}

  
#publications .section-title {
  font-size: 2.5rem;            /* same as your grants */
  text-align:  center;
  color:        var(--primary-color);
  position:     relative;
  margin-bottom: 0px;       /* bottom‑gap = 40px just like research‑grants */
}
#publications .section-title::after {
  content:     "";
  width:       60px;            /* same width as grants bar */
  height:      4px;             /* same thickness as grants bar */
  background:  var(--accent-color);
  display:     block;
  margin:      10px auto 0px;  /* 10px above it (for breathing), 30px below it (to match gap‑5) */
  border-radius: 2px;
}

.publication-list,
.conference-list,
.seminar-list {
    display: grid;
    gap: 24px;
    margin-top: 0px;
}

.publication-item,
.conference-item,
.seminar-item {
    background: var(--card-bg);
    padding: 25px;
    border-radius: 12px;
    border-left: 4px solid var(--accent-color);
    box-shadow: var(--shadow);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.publication-item:hover,
.conference-item:hover,
.seminar-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.publication-item::before,
.conference-item::before {
    content: attr(data-index);
    position: absolute;
    right: 20px;
    top: 20px;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--accent-color);
    opacity: 0.7;
}

.publication-item h4,
.conference-item h4 {
    color: var(--primary-color);
    font-size: 1.3rem;
    margin-bottom: 15px;
    line-height: 1.4;
    font-weight: 600;
}

.publication-item h4 b,
.conference-item h4 b {
    color: var(--accent-color);
    font-weight: 700;
}

.publication-item p,
.conference-item p,
.seminar-item p {
    margin-bottom: 12px;
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text-color);
}

.publication-item strong,
.conference-item strong,
.seminar-item strong {
    color: var(--secondary-color);
    font-weight: 600;
}

.conference-item a[href*="//"],
.publication-item a[href*="//"] {
    display: inline-block;
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    padding: 6px 12px;
    border-radius: 6px;
    background: rgba(var(--accent-color-rgb), 0.1);
}

.conference-item a[href*="//"]:hover,
.publication-item a[href*="//"]:hover {
    background: var(--accent-color);
    color: white;
    transform: translateY(-2px);
}


/* Add this to your CSS */
#publications h3 {
    display: block;
    width: 100%;
    margin: 40px 0 20px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--accent-color);
    font-size: 1.6rem;
    color: var(--secondary-color);
}

/* Specific adjustment for first subsection */
#publications h3:first-of-type {
    margin-top: 30px;
}


/* Seminar Items */
.seminar-item {
    background: var(--card-bg);
    border-left: 4px solid var(--accent-color);
    padding: 25px;
    border-radius: 12px;
    position: relative;
    transition: all 0.3s ease;
}

.seminar-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.seminar-item strong {
    color: var(--primary-color);
    font-weight: 600;
    display: block;
    margin-bottom: 0px;
    font-size: 1.3rem;
}

.seminar-item::before {
    content: "🎤";
    position: absolute;
    right: 20px;
    top: 20px;
    opacity: 0.3;
    font-size: 1.5rem;
}

/* Add this to your :root */
:root {
    --secondary-color-rgb: 26, 86, 125; /* Already exists in your CSS */
}

/* Responsive Design */
@media (max-width: 768px) {
    .publication-item,
    .conference-item,
    .seminar-item {
        padding: 20px;
    }
    
    .publication-item::before,
    .conference-item::before {
        position: static;
        display: block;
        margin-bottom: 10px;
    }
    
    .publication-item h4,
    .conference-item h4 {
        font-size: 1rem;
    }
}

/* Teaching Experience Section */
#teaching { /* Changed selector to #teaching to match your HTML */
    padding: 60px 20px;
    /* ... other styles ... */
}

#teaching .section-title {
    /* ... title styles ... */
    margin-bottom: 30px;
}

#teaching .section-title::after {
    /* ... accent bar styles ... */
    margin: 10px auto 0;
}

/* Target the first div with the class 'teaching-responsibilities' */
#teaching > .teaching-responsibilities:first-of-type {
    margin-top: 0 !important; /* Reset any top margin */
}

/* ... rest of your Teaching Experience CSS ... */
#teaching h3 {
    font-size: 1.60rem; /* Adjust to your desired size */
    color: var(--secondary-color); /* Example color */
    /* Add any other desired styles */
}

/* Add any specific styling for the content within the Teaching Experience section below this */

/* Teaching Experience - Table Styling */
.courses-table,
.supervision-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background: var(--light-bg);
    border-radius: 10px;
    overflow: hidden;
}

.courses-table th,
.courses-table td,
.supervision-table th,
.supervision-table td {
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
}

.courses-table th,
.supervision-table th {
    background: var(--primary-color);
    color: white;
}

.courses-table tr:nth-child(even),
.supervision-table tr:nth-child(even) {
    background: #f5f5f5;
}

/* Enhanced Teaching Responsibilities Section */
.teaching-responsibilities {
    background: rgba(var(--accent-color-rgb), 0.05);
    padding: 25px;
    border-radius: 12px;
    margin: 30px 0;
    border-left: 4px solid var(--accent-color);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.teaching-responsibilities:hover {
    transform: translateY(-3px);
}

.teaching-responsibilities::before {
    content: "📚";
    position: absolute;
    right: 20px;
    top: 20px;
    opacity: 0.1;
    font-size: 2rem;
    transition: opacity 0.3s ease;
}

.teaching-responsibilities strong {
    color: var(--secondary-color);
    font-size: 1.3rem;
    display: block;
    margin-bottom: 20px;
    position: relative;
    padding-left: 35px;
    font-weight: 600;
}

.teaching-responsibilities strong::before {
    content: "🏛️";
    position: absolute;
    left: 0;
    top: -2px;
    font-size: 1.3rem;
}

.teaching-responsibilities ul {
    padding-left: 30px;
    list-style: none;
}

.teaching-responsibilities li {
    position: relative;
    padding-left: 35px;
    margin-bottom: 15px;
    line-height: 1.7;
    transition: all 0.3s ease;
    font-size: 1.1rem;
}

.teaching-responsibilities li::before {
    content: "▹";
    position: absolute;
    left: 0;
    color: var(--accent-color);
    font-size: 1.4rem;
    top: -1px;
    transition: transform 0.3s ease;
}

.teaching-responsibilities li:hover {
    color: var(--primary-color);
    transform: translateX(5px);
}


.teaching-responsibilities li:hover::before {
    transform: translateX(3px);
    color: var(--secondary-color);
}

/* Dark Mode Adjustments */
.body-dark .teaching-responsibilities {
    background: rgba(var(--accent-color-rgb), 0.08);
    border-color: var(--accent-color);
}

.body-dark .teaching-responsibilities strong {
    color: var(--dark-text);
}

.body-dark .teaching-responsibilities li:hover {
    color: var(--accent-color);
}

/* Maintain Table Consistency */
.courses-table,
.supervision-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background: var(--light-bg);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Add this after existing table rules */
.courses-table td:nth-child(4),
.courses-table th:nth-child(4) {
    text-align: center;
}

.courses-table th,
.courses-table td,
.supervision-table th,
.supervision-table td {
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
    font-size: 1.1rem;
}

.courses-table th,
.supervision-table th {
    background: var(--primary-color);
    color: white;
}

.courses-table tr:nth-child(even),
.supervision-table tr:nth-child(even) {
    background: #f5f5f5;
}

/* Professional Service */
/* Professional Service Section */
#professional-service {
    padding: 60px 20px;
    background: var(--light-bg);
}

#professional-service .section-title {
    font-size: 2.5rem;
    text-align: center;
    color: var(--primary-color);
    position: relative;
    margin-bottom: 30px;
}

#professional-service .section-title::after {
    content: '';
    width: 60px;
    height: 4px;
    background: var(--accent-color);
    display: block;
    margin: 10px auto 0;
    border-radius: 2px;
}

/* Style for Sub-section Titles */
#professional-service h3 {
    font-size: 1.6rem;
    color: var(--secondary-color);
    margin-top: 40px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 8px;
    
}

/* Reset top margin for the first sub-section title */
#professional-service h3:first-of-type {
    margin-top: 0;
}

/* Styling for Faculty and Departmental Responsibilities */
#professional-service > ul {
    list-style: none;
    padding: 20px;
    margin-bottom: 30px;
    background: var(--card-bg);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    border-left: 5px solid var(--accent-color); /* Keep the orange/accent color */
}

#professional-service > ul > li {
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: baseline;
    gap: 15px;
    font-size: 1.1rem;
    color: #050000;
}

#professional-service > ul > li:last-child {
    border-bottom: none;
}

#professional-service > ul > li strong {
    color: var(--primary-color);
    font-weight: 600;
    font-size: 1.3rem;
    flex-shrink: 0;
    width: auto;
}

/* Enhanced Styling for Community Responsibilities (using <ol>) */
#professional-service > ol {
    list-style: none; /* Remove default numbering */
    padding: 0;
    margin-bottom: 30px;
    display: grid; /* Use grid to create separate "cards" */
    gap: 20px;
}

#professional-service > ol > li {
    background: var(--card-bg);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    padding: 20px;
    border-left: 5px solid var(--accent-color); /* Changed to the orange/accent color */
}

#professional-service > ol > li strong {
    color: var(--primary-color);
    font-weight: 600;
    display: block;
    margin-bottom: 0px;
    font-size: 1.3rem;
}

#professional-service > ol > li ul {
    list-style: none;
    padding-left: 15px;
    margin-top: 10px;
}

#professional-service > ol > li ul li {
    padding: 5px 0;
    color: #050000; /* Changed to dark black */
    font-size: 1.1rem;
    line-height: 1.6;
    position: relative;
    padding-left: 15px;
}

#professional-service > ol > li ul li::before {
    content: "•"; /* Use a bullet point */
    position: absolute;
    left: 0;
    top: 5px;
    color: var(--accent-color);
    font-size: 1rem;
}

#professional-service > ol > li ul li em {
    font-style: italic;
    color: #050000; /* Slightly darker italic text */
}


/* Dark Mode Adjustments */
.body-dark #professional-service {
    background: var(--dark-bg);
    color: var(--dark-text);
}

.body-dark #professional-service .section-title,
.body-dark #professional-service h3,
.body-dark #professional-service > ul > li strong,
.body-dark #professional-service > ol > li strong {
    color: var(--dark-text);
}

.body-dark #professional-service > ul,
.body-dark #professional-service > ol > li {
    background: var(--dark-secondary);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.body-dark #professional-service > ul > li {
    border-bottom-color: #444;
}

.body-dark #professional-service > ol > li {
    border-left-color: var(--accent-color); /* Changed to the orange/accent color */
}

.body-dark #professional-service > ol > li ul li::before {
    color: var(--accent-color);
}

/* Technical Skills and Expertise Section */
/* Technical Skills Section */
#technical-skills.section {
    padding: 60px 20px;
    background: var(--light-bg);
}

#technical-skills .section-title {
    font-size: 2.5rem;
    text-align: center;
    color: var(--primary-color);
    margin-bottom: -8px;
}

#technical-skills .section-title::after {
    content: '';
    width: 60px;
    height: 4px;
    background: var(--accent-color);
    display: block;
    margin: 10px auto 0;
    border-radius: 2px;
}

/* Subsection Styling */
#technical-skills h3 {
    font-size: 1.6rem;
    color: var(--secondary-color);
    margin: 40px 0 20px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--accent-color);
    position: relative;
}


/* Certification Cards */
#technical-skills ul {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 20px;
}

#technical-skills li {
    background: var(--card-bg);
    padding: 20px;
    border-left: 4px solid var(--accent-color);
    border-radius: 8px;
    box-shadow: var(--shadow);
    transition: transform 0.3s ease;
    position: relative;
    overflow: hidden;
    
}

#technical-skills li:hover {
    transform: translateY(-5px);
}

#technical-skills li::before {
    content: "✔";
    position: absolute;
    right: 15px;
    top: 15px;
    color: var(--accent-color);
    opacity: 0.3;
    font-size: 1.2rem;
}

#technical-skills li strong {
    color: var(--primary-color);
    display: block;
    margin-bottom: 8px;
    font-size: 1.3rem;
    font-weight: 600;
}

/* Technical Proficiency Badges */
.tech-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
}

.tech-badge {
    background: rgba(var(--secondary-color-rgb), 0.1);
    color: var(--primary-color);
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 1.3rem;
    transition: all 0.3s ease;
    text-align: center;
    font-weight: 600;
    font-size: 1.3rem;
}

.tech-badge:hover {
    background: var(--secondary-color);
    color: white;
}


/* Soft Skills Styling */
#technical-skills > ul:last-of-type li {
    border-left-color: var(--accent-color);
    background: white;
    font-size: 1.3rem;
    color: #050000;
}

#technical-skills > ul:last-of-type li::before {
    content: "🌟";
    color: var(--accent-color);
}

/* Increase font size for "Strong proficiency in" */
#technical-skills > ul > li:first-child {
    font-size: 1.1rem; /* Adjust as needed */
    color: #050000;
}

/* Increase font size for "Extensive knowledge..." */
#technical-skills > ul > li:nth-child(2) {
    font-size: 1.1rem; /* Adjust as needed */
    color: #050000;
}

/* Responsive Design */
@media (max-width: 768px) {
    #technical-skills .section-title {
        font-size: 2rem;
    }
    
    #technical-skills h3 {
        font-size: 1.2rem;
    }
    
    .skill-tag {
        padding: 10px 15px;
    }
}
/* research-supervision Section */
#research-supervision { /* Changed selector to #teaching to match your HTML */
    padding: 60px 20px;
    /* ... other styles ... */
}

#research-supervision .section-title {
    font-size: 2.5rem; /* Consistent font size */
    text-align: center;
    color: var(--primary-color); /* Consistent color */
    position: relative;
    margin-bottom: 30px; /* Adjust as needed for the main title */
}

#research-supervision .section-title::after {
    content: '';
    width: 60px;
    height: 4px;
    background: var(--accent-color);
    display: block;
    margin: 10px auto 0;
    border-radius: 2px;
}

/* Style for the sub-section titles (h3) to add the gap */
#research-supervision h3 {
    font-size: 1.6rem; /* Adjust as needed */
    color: var(--secondary-color);
    margin-top: 30px; /* This creates the gap */
    margin-bottom: 0px; /* Adjust spacing below the title */
}

/* Style for the first sub-section title to remove the extra top gap */
#research-supervision h3:first-of-type {
    margin-top: 0;
}


/* Contact Section */
/* Contact Section - Updated for Consistency */
/* Contact Section */
#contact {
    padding: 60px 20px; /* Consistent top and bottom padding */
    background: var(--light-bg); /* Use the light background consistently */
    text-align: center;
}

#contact h2 {
    font-size: 2.5rem; /* Consistent with other section titles */
    text-align: center;
    color: var(--primary-color); /* Use the primary color */
    position: relative;
    margin-bottom: 30px; /* Reduce the margin below the title text */
    display: inline-block; /* To make the border span only the text width */
    padding-bottom: 8px; /* Add some space above the border */
    border-bottom: 3px solid var(--primary-color); /* Add the persistent blue bar */
}

#contact h2::after {
    content: '';
    width: 60px; /* Same width as other title underlines */
    height: 4px; /* Same thickness as other title underlines */
    background: var(--accent-color); /* Use the accent color */
    display: block;
    margin: 6px auto 0; /* Adjust top margin to be closer to the text */
    border-radius: 2px; /* Match other underlines */
}

.contact-info {
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
    margin-top: 0px; /* Add some space between title bar and info */
}

.contact-info div {
    background-color: #f9fcff;
    padding: 16px 22px;
    border-radius: 10px;
    font-size: 1.1rem;
    color: #050000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    transition: background-color 0.3s ease, transform 0.3s ease;
    min-width: 280px;
    text-align: left;
    position: relative;
}

.contact-info div:hover {
    background-color: #e8f4fc;
    transform: translateY(-3px);
}

.contact-info a {
    color: #050000;
    text-decoration: none;
    font-weight: 600;
}

.contact-info a:hover {
    text-decoration: underline;
}


/* Footer */
.footer {
    text-align: center;
    padding: 20px;
    background: var(--primary-color);
    color: white;
    margin-top: auto;
}

/* Dark Mode Toggle */
.dark-mode-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--dark-bg);
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 25px;
    cursor: pointer;
    z-index: 999;
    transition: background 0.3s ease;
}

.dark-mode-toggle:hover {
    background: var(--accent-color);
}

.body-dark {
    background: var(--dark-primary);
    color: var(--dark-text);
}

.body-dark .section-title {
    color: var(--dark-text);
    
}


.body-dark .cert-badge {
    background: var(--dark-secondary);
    color: #fff;
}

.body-dark .courses-table th,
.body-dark .grant-item,
.body-dark .publication-item,
.body-dark .conference-item {
    background: #333;
    color: #f9f9f9;
}

.body-dark .publication-item:hover,
.body-dark .conference-item:hover {
    background: #444;
}

/* Responsive Design */
@media (max-width: 768px) {
    .profile-img {
        width: 180px;
        height: 180px;
    }

    .header-content h1 {
        font-size: 1.8rem;
    }

    .position {
        font-size: 0.95rem;
    }

    .nav-links {
        display: none;
        flex-direction: column;
        background: #fff;
        position: absolute;
        top: 60px;
        right: 0;
        padding: 20px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

    .nav-links.open {
        display: flex;
    }

    .hamburger {
        display: flex;
    }

    .courses-table,
    .supervision-table {
        font-size: 0.9rem;
    }

    .certifications {
        flex-direction: column;
        gap: 10px;
    }
}

/* Add these dark mode styles for Academic Journey */
.body-dark #academic-journey.section {
    background: var(--dark-primary);
    color: var(--dark-text);
  }
  
  .body-dark .timeline::before {
    background: var(--dark-secondary);
  }
  
  .body-dark .timeline li {
    background: var(--dark-secondary);
  }
  
  .body-dark .timeline h4,
  .body-dark .timeline p,
  .body-dark #academic-journey h3 {
    color: var(--dark-text);
  }
  
  .body-dark .experience-item {
    background: var(--dark-secondary);
    border-left-color: var(--accent-color);
  }
  
  .body-dark .experience-item h4,
  .body-dark .experience-item p {
    color: var(--dark-text);
  }
  /* Dark mode overrides for Academic Journey content */
.body-dark #academic-journey,
.body-dark #academic-journey ul,
.body-dark #academic-journey li,
.body-dark #academic-journey p,
.body-dark #academic-journey h3,
.body-dark #academic-journey h4,
.body-dark #academic-journey strong {
  color: var(--dark-text) !important; /* Force text color */
}

/* Fix list bullet points in dark mode */
.body-dark #academic-journey ul {
  list-style: none;
}

.body-dark #academic-journey li::before {
  content: "•";
  color: var(--accent-color);
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}

/* Dark mode overrides for Research Grants */
/* Fix dark mode color for "Major Research Grants" title */
.body-dark #research-grants .section-title {
    color: var(--dark-text) !important;
  }
  
  .body-dark #research-grants .section-title::after {
    background: var(--accent-color); /* Ensure accent line matches */
  }
  
.body-dark #research-grants {
    background: var(--dark-primary);
  }
  
  .body-dark .grant-item {
    background: var(--dark-secondary) !important;
    border-left-color: var(--accent-color);
  }
  
  .body-dark .grant-item h3,
  .body-dark .grant-item p,
  .body-dark .grant-item strong,
  .body-dark .grant-item li {
    color: var(--dark-text) !important;
  }
  
  /* Style bullet points in lists */
  .body-dark .grant-item ul {
    list-style: none;
  }
  
  .body-dark .grant-item li::before {
    content: "•";
    color: var(--accent-color);
    display: inline-block;
    width: 1em;
    margin-left: -1em;
  }
  
  /* Hover state */
  .body-dark .grant-item:hover {
    background: #404040 !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  }

  /* Dark mode overrides for Publications section */
.body-dark #publications.section {
    background: var(--dark-primary);
    color: var(--dark-text);
  }
  
  /* Section title */
  .body-dark #publications .section-title {
    color: var(--dark-text) !important;
  }
  
  /* Publication cards */
  .body-dark .publication-item,
  .body-dark .conference-item,
  .body-dark .seminar-item {
    background: var(--dark-secondary) !important;
    border-left-color: var(--accent-color);
  }
  
  /* Text elements */
  .body-dark #publications h3,
  .body-dark #publications h4,
  .body-dark #publications p,
  .body-dark #publications strong,
  .body-dark #publications li {
    color: var(--dark-text) !important;
  }
  
  /* Links */
  .body-dark .publication-item a[href*="//"] {
    background: rgba(var(--accent-color-rgb), 0.15);
    color: var(--accent-color);
  }
  
  .body-dark .publication-item a[href*="//"]:hover {
    background: var(--accent-color);
    color: var(--dark-text);
  }
  
  /* Hover states */
  .body-dark .publication-item:hover,
  .body-dark .conference-item:hover,
  .body-dark .seminar-item:hover {
    background: #404040 !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
  }
  
  /* List bullets */
  .body-dark #publications ul {
    list-style: none;
  }
  
  .body-dark #publications li::before {
    content: "•";
    color: var(--accent-color);
    display: inline-block;
    width: 1em;
    margin-left: -1em;
  }
  
  /* Decorative elements */
  .body-dark .publication-item::before,
  .body-dark .conference-item::before {
    color: var(--accent-color);
    opacity: 0.8;
  }
  
  .body-dark .seminar-item::before {
    opacity: 0.7;
  }

  /* Dark mode overrides for Teaching Experience */
.body-dark #teaching.section {
    background: var(--dark-primary);
  }
  
  /* Section title */
  .body-dark #teaching .section-title {
    color: var(--dark-text) !important;
  }
  
  /* Teaching cards and tables */
  .body-dark .teaching-responsibilities {
    background: var(--dark-secondary) !important;
    border-left-color: var(--accent-color);
  }
  
  .body-dark .courses-table,
  .body-dark .supervision-table {
    background: var(--dark-secondary);
  }
  
  .body-dark .courses-table th,
  .body-dark .supervision-table th {
    background: var(--dark-secondary);
    color: var(--dark-text);
  }
  
  .body-dark .courses-table tr:nth-child(even),
  .body-dark .supervision-table tr:nth-child(even) {
    background: #404040;
  }
  
  /* Text elements */
  .body-dark #teaching h3,
  .body-dark #teaching strong,
  .body-dark #teaching td,
  .body-dark #teaching li {
    color: var(--dark-text) !important;
  }
  
  /* List bullets */
  .body-dark .teaching-responsibilities li::before {
    color: var(--accent-color);
  }
  
  /* Hover states */
  .body-dark .teaching-responsibilities:hover {
    background: #404040 !important;
  }
  
  .body-dark .teaching-responsibilities li:hover {
    color: var(--accent-color) !important;
  }
  
  /* Decorative elements */
  .body-dark .teaching-responsibilities::before {
    opacity: 0.5;
  }
  
  .body-dark .teaching-responsibilities strong::before {
    filter: brightness(1.5);
  }

  /* Dark mode overrides for Professional Service */
.body-dark #professional-service.section {
    background: var(--dark-primary) !important; /* Match section background */
  }
  
  /* Force section title color */
  .body-dark #professional-service .section-title {
    color: var(--dark-text) !important;
  }
  
  /* List containers */
  .body-dark #professional-service > ul,
  .body-dark #professional-service > ol > li {
    background: var(--dark-secondary) !important;
    border-left-color: var(--accent-color);
  }
  
  /* List items */
  .body-dark #professional-service > ul > li,
  .body-dark #professional-service > ol > li {
    color: var(--dark-text) !important;
    border-bottom-color: #404040;
  }
  
  /* Text elements */
  .body-dark #professional-service h3,
  .body-dark #professional-service strong,
  .body-dark #professional-service li,
  .body-dark #professional-service em {
    color: var(--dark-text) !important;
  }
  
  /* Nested list bullets */
  .body-dark #professional-service > ol > li ul li::before {
    color: var(--accent-color);
    opacity: 0.9;
  }
  
  /* Hover states */
  .body-dark #professional-service > ul > li:hover,
  .body-dark #professional-service > ol > li:hover {
    background: #404040 !important;
  }
  
  /* Italic text adjustment */
  .body-dark #professional-service > ol > li ul li em {
    opacity: 0.9;
  }
  
  /* Decorative elements */
  .body-dark #professional-service > ul > li strong {
    color: var(--dark-text) !important;
  }

  /* Dark mode overrides for Research Supervision */
.body-dark #research-supervision.section {
    background: var(--dark-primary) !important;
  }
  
  .body-dark #research-supervision .section-title {
    color: var(--dark-text) !important;
  }
  
  /* Sub-section titles */
  .body-dark #research-supervision h3 {
    color: var(--dark-text) !important;
    border-bottom-color: var(--dark-secondary);
  }
  
  /* Supervision tables */
  .body-dark .supervision-table {
    background: var(--dark-secondary);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  }
  
  .body-dark .supervision-table th {
    background: var(--dark-secondary);
    color: var(--dark-text) !important;
  }
  
  .body-dark .supervision-table tr:nth-child(even) {
    background: #404040;
  }
  
  /* Text elements */
  .body-dark #research-supervision td,
  .body-dark #research-supervision li {
    color: var(--dark-text) !important;
  }
  
  /* List bullets (if any lists exist in this section) */
  .body-dark #research-supervision ul {
    list-style: none;
  }
  
  .body-dark #research-supervision li::before {
    content: "•";
    color: var(--accent-color);
    display: inline-block;
    width: 1em;
    margin-left: -1em;
  }
  
  /* Hover states */
  .body-dark .supervision-table tr:hover {
    background: #505050 !important;
  }

  /* Dark mode overrides for Technical Skills */
.body-dark #technical-skills.section {
    background: var(--dark-primary) !important;
  }
  
  /* Section title */
  .body-dark #technical-skills .section-title {
    color: var(--dark-text) !important;
  }
  
  /* Subsection headers */
  .body-dark #technical-skills h3 {
    color: var(--dark-text) !important;
    border-bottom-color: var(--dark-secondary);
  }
  
  /* Skill tags and badges */
  .body-dark .skill-tag,
  .body-dark .tech-badge {
    background: var(--dark-secondary) !important;
    color: var(--dark-text) !important;
    border: 1px solid var(--accent-color);
  }
  
  .body-dark .skill-tag:hover,
  .body-dark .tech-badge:hover {
    background: rgb(4, 0, 8) !important;
    color: var(--dark-text) !important;
  }
  
  /* Certification cards */
  .body-dark #technical-skills li {
    background: var(--dark-secondary) !important;
    border-left-color: var(--accent-color);
  }
  
  .body-dark #technical-skills li strong {
    color: var(--dark-text) !important;
  }
  
  /* Decorative elements */
  .body-dark #technical-skills li::before {
    color: var(--accent-color);
    opacity: 0.8;
  }
  
  /* Soft skills cards */
  .body-dark #technical-skills > ul:last-of-type li {
    background: var(--dark-secondary) !important;
    color: var(--dark-text) !important;
  }
  
  /* Text elements */
  .body-dark #technical-skills p,
  .body-dark #technical-skills li,
  .body-dark #technical-skills span {
    color: var(--dark-text) !important;
  }
  
  /* Hover states */
  .body-dark #technical-skills li:hover {
    background: #404040 !important;
  }

  /* Dark mode overrides for Contact Section */
.body-dark #contact {
    background: var(--dark-primary) !important;
  }
  
  .body-dark #contact h2 {
    color: var(--dark-text) !important;
    border-bottom-color: var(--accent-color);
  }
  
  .body-dark #contact h2::after {
    background: var(--accent-color);
  }
  
  .body-dark .contact-info div {
    background: var(--dark-secondary) !important;
    color: var(--dark-text) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  }
  
  .body-dark .contact-info a {
    color: var(--dark-text) !important;
  }
  
  .body-dark .contact-info div:hover {
    background: #404040 !important;
  }
  
  .body-dark .contact-info a:hover {
    color: var(--dark-primary) !important;
    text-decoration: none;
  }
  
  /* Dark mode footer */
  .body-dark .footer {
    background: var(--dark-secondary) !important;
    color: var(--dark-text) !important;
    border-top: 2px solid var(--accent-color);
  }


  

/* ==================== */
/* show more */
/* ==================== */
/* Show items/rows after 7th */
.publication-item:nth-child(n+8),
.conference-item:nth-child(n+8),
.seminar-item:nth-child(n+8),
.courses-table tbody tr:nth-child(n+8),
.supervision-table tbody tr:nth-child(n+8) {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Expanded state */
.show-more-visible .publication-item,
.show-more-visible .conference-item,
.show-more-visible .seminar-item,
.show-more-visible.courses-table tbody tr,
.show-more-visible.supervision-table tbody tr {
    display: table-row;
    opacity: 1;
}

/* Table-specific display properties */
.show-more-visible .publication-item,
.show-more-visible .conference-item,
.show-more-visible .seminar-item {
    display: block;
}
.show-more-btn {
    display: block;
    margin: 25px auto;
    padding: 12px 30px;
    background: var(--secondary-color);
    color: white;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.1rem;
}

.show-more-btn:hover {
    background: var(--accent-color);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.body-dark .show-more-btn {
    display: block;
    margin: 25px auto;
    padding: 12px 30px;
    background: #333;
    color: white;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.1rem;
}

.body-dark .show-more-btn:hover {
    background: var(--accent-color);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}


/* ==================== */
/* MOBILE OPTIMIZATION */
/* ==================== */

@media (max-width: 768px) {
    /* 1. Remove ALL header/navbar borders & shadows */
    .header,
    .header.glass,
    .navbar {
        border-bottom: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* 2. Adjust spacing */
    body {
        padding-top: 0px !important;
    }

    .profile-container {
        margin: 25px auto 15px !important;
    }

    /* 3. Name formatting */
    .header-content h1 {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 1.7rem !important;
        padding: 0 10px !important;
        margin: 5px 0 !important;
    }

    /* 4. Position text */
    .position {
        font-size: 0 !important;
    }
    
    .position:after {
        content: "Associate Professor\A Department of Electrical Engineering\A Faculty of Engineering\A Bayero University Kano\A P.M.B. 3011, Kano – Nigeria" !important;
        white-space: pre-wrap !important;
        display: block !important;
        font-size: 1rem !important;
        line-height: 1.4 !important;
        padding: 0 10px !important;
    }

    /* 5. Certifications grid */
    .certifications {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 10px;
        width: 100%;
        max-width: 400px;
        padding: 0 15px;
        margin: 15px auto;
    }

    .cert-badge {
        font-size: 0.9rem;
        padding: 10px 12px;
        border-radius: 15px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: all 0.2s ease;
        background: var(--primary-color);
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }

    .cert-badge:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
}

@media (max-width: 480px) {
    /* Mobile adjustments */
    .header-content h1 {
        font-size: 1.6rem !important;
        white-space: normal !important;
    }

    .position:after {
        font-size: 1.0rem !important;
        line-height: 1.35 !important;
    }

    .profile-img {
        width: 160px !important;
        height: 160px !important;
    }

    .certifications {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 8px;
        padding: 0 10px;
    }

    .cert-badge {
        font-size: 0.85rem;
        padding: 8px 10px;
        border-radius: 12px;
    }
}


/* MOBILE: ACADEMIC JOURNEY OPTIMIZATION */
@media (max-width: 768px) {
    #academic-journey.section {
        padding: 40px 15px;
    }

    #academic-journey .section-title {
        font-size: 1.7rem;
        margin-bottom: 25px;
    }

    #academic-journey .section-title::after {
        width: 50px;
        height: 3px;
        margin: 8px auto 0;
    }

    /* Timeline adjustments */
    .timeline {
        padding-left: 25px;
        margin-left: 8px;
        margin-top: 20px;
    }

    .timeline::before {
        left: 10px;
        width: 3px;
    }

    .timeline li {
        margin-bottom: 25px;
        padding: 15px;
        border-radius: 10px;
    }

    .timeline li::before {
        left: -24px;
        width: 14px;
        height: 14px;
        top: 18px;
    }

    #academic-journey h3 {
        font-size: 1.3rem;
        margin-bottom: 15px;
    }

    .timeline h4 {
        font-size: 1.2rem;
        margin-bottom: 4px;
    }

    .timeline p {
        font-size: 1.05rem;
        line-height: 1.4;
    }

    /* Research Experience adjustments */
    .research-experience {
        margin-top: 20px;
        gap: 20px;
    }

    .experience-item {
        padding: 18px;
        border-left-width: 4px;
    }

    .experience-item h4 {
        font-size: 1.2rem;
    }

    .experience-item p {
        font-size: 1.05rem;
    }

    .experience-item li {
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    #academic-journey .section-title {
        font-size: 1.5rem;
    }
    #academic-journey h3 {
        font-size: 1.2rem;
    }

    .timeline {
        padding-left: 20px;
    }

    .timeline li {
        padding: 12px;
    }

    .experience-item {
        padding: 15px;
    }

    .timeline h4 {
        font-size: 1.1rem;
    }

    .timeline p {
        font-size: 1rem;
    }
}
/* In 768px media query (base mobile styles) */
@media (max-width: 768px) {
    .cert-badge {
        min-height: 40px; /* Add to existing .cert-badge rules */
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* In 480px media query (smaller devices refinement) */
@media (max-width: 480px) {
    .cert-badge {
        min-height: 38px; /* Slightly smaller for compact screens */
    }
}


/* MOBILE: RESEARCH GRANTS OPTIMIZATION */
@media (max-width: 768px) {
    #research-grants {
        padding: 40px 15px;
        contain: layout paint style;
    }

    #research-grants .section-title {
        font-size: 1.7rem;
        margin-bottom: 25px;
    }

    #research-grants .section-title::after {
        width: 50px;
        height: 3px;
        margin: 8px auto 0;
    }

    .grants-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .grant-item {
        padding: 18px;
        border-left-width: 4px;
        border-radius: 10px;
    }

    .grant-item h3 {
        font-size: 1.3rem;
        margin-bottom: 15px;
    }

    .grant-item p, 
    .grant-item ul {
        font-size: 1.05rem;
        line-height: 1.4;
    }

    .grant-item ul {
        padding-left: 15px;
    }

    .grant-item ul li {
        margin-bottom: 4px;
    }
}

@media (max-width: 480px) {
    #research-grants .section-title {
        font-size: 1.5rem;
    }

    .grant-item {
        padding: 15px;
    }

    .grant-item h3 {
        font-size: 1.2rem;
    }

    .grant-item p, 
    .grant-item ul {
        font-size: 1rem;
    }

    .grant-item ul li {
        font-size: 0.95rem;
    }
}


/* MOBILE: PUBLICATIONS OPTIMIZATION */
@media (max-width: 768px) {
    #publications.section {
        padding: 40px 15px;
        contain: layout paint style;
    }

    #publications .section-title {
        font-size: 1.7rem;
        margin-bottom: 25px;
    }

    #publications .section-title::after {
        width: 50px;
        height: 3px;
        margin: 8px auto 0;
    }

    .publication-list,
    .conference-list,
    .seminar-list {
        gap: 20px;
    }

    .publication-item,
    .conference-item,
    .seminar-item {
        padding: 18px;
        border-left-width: 4px;
        border-radius: 10px;
    }

    #publications h3 {
        font-size: 1.3rem;
        margin: 30px 0 15px;
        padding-bottom: 6px;
    }

    .publication-item h4,
    .conference-item h4 {
        font-size: 1.2rem;
        margin-bottom: 12px;
    }

    .publication-item p,
    .conference-item p,
    .seminar-item p {
        font-size: 1.05rem;
        line-height: 1.4;
        margin-bottom: 10px;
    }

    .publication-item::before,
    .conference-item::before {
        font-size: 1rem;
        right: 15px;
        top: 15px;
    }

    .seminar-item::before {
        font-size: 1.2rem;
    }

    .publication-item a[href*="//"] {
        padding: 5px 10px;
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    #publications .section-title {
        font-size: 1.5rem;
    }

    .publication-item,
    .conference-item,
    .seminar-item {
        padding: 15px;
    }

    #publications h3 {
        font-size: 1.2rem;
        margin: 25px 0 12px;
    }

    .publication-item h4,
    .conference-item h4 {
        font-size: 1.1rem;
    }

    .publication-item p,
    .conference-item p,
    .seminar-item p {
        font-size: 1rem;
    }

    .publication-item::before,
    .conference-item::before {
        font-size: 0.9rem;
    }

    .seminar-item::before {
        font-size: 1rem;
    }
}

/* MOBILE SHOW MORE OPTIMIZATION */
@media (max-width: 768px) {
    .show-more-btn {
        margin: 20px auto;
        padding: 10px 25px;
        font-size: 1rem;
        border-radius: 25px;
    }

    /* Hide items after 7th */
    .publication-item:nth-child(n+8),
    .conference-item:nth-child(n+8),
    .seminar-item:nth-child(n+8) {
        display: none;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    /* Expanded state */
    .show-more-visible .publication-item,
    .show-more-visible .conference-item,
    .show-more-visible .seminar-item {
        display: block;
        opacity: 1;
    }
    .body-dark .show-more-btn {
        background: var(--dark-secondary);
        color: var(--dark-text);
        /* Inherit mobile sizing */
        margin: 20px auto;
        padding: 10px 25px;
        font-size: 1rem;
        border-radius: 25px;
    }

    .body-dark .show-more-btn:hover {
        background: var(--accent-color);
        color: var(--dark-text);
    }
}

@media (max-width: 480px) {
    .show-more-btn {
        padding: 8px 20px;
        font-size: 0.95rem;
    }
    .body-dark .show-more-btn {
        padding: 8px 20px;
        font-size: 0.95rem;
    }
}


/* Dark mode compatibility */
.body-dark .show-more-btn {
    background: var(--dark-secondary);
    color: var(--dark-text);
}

.body-dark .show-more-btn:hover {
    background: var(--accent-color);
    color: var(--dark-text);
}

/* MOBILE: TEACHING EXPERIENCE & RESEARCH SUPERVISION */
@media (max-width: 768px) {
    #teaching,
    #research-supervision {
        padding: 40px 15px !important;
    }

    #teaching .section-title,
    #research-supervision .section-title {
        font-size: 1.7rem !important;
        margin-bottom: 25px !important;
    }

    #teaching .section-title::after,
    #research-supervision .section-title::after {
        width: 50px !important;
        height: 3px !important;
        margin: 8px auto 0 !important;
    }

    /* Section Headings */
    #teaching h3,
    #research-supervision h3 {
        font-size: 1.3rem !important;
        margin-top: 20px !important;
        margin-bottom: 15px !important;
    }

    /* Teaching Responsibilities Blocks */
    .teaching-responsibilities {
        padding: 18px !important;
        margin: 25px 0 !important;
        border-left-width: 3px !important;
    }

    .teaching-responsibilities strong {
        font-size: 1.2rem !important;
        padding-left: 30px !important;
        margin-bottom: 15px !important;
    }

    .teaching-responsibilities strong::before {
        font-size: 1.1rem !important;
        left: -2px !important;
    }

    .teaching-responsibilities li {
        padding-left: 25px !important;
        font-size: 1.05rem !important;
        margin-bottom: 12px !important;
    }

    .teaching-responsibilities li::before {
        font-size: 1.2rem !important;
        top: -2px !important;
    }

    /* Table Adjustments */
    .courses-table,
    .supervision-table {
        display: block;
        overflow-x: auto;
        margin-top: 15px;
        border-radius: 8px;
    }

    .courses-table th,
    .courses-table td,
    .supervision-table th,
    .supervision-table td {
        padding: 10px !important;
        font-size: 1rem !important;
        min-width: 120px;
    }

    .courses-table td:nth-child(4),
    .courses-table th:nth-child(4) {
        text-align: left !important;
    }

    /* Disable hover animations on mobile */
    .teaching-responsibilities:hover {
        transform: none !important;
    }

    .teaching-responsibilities li:hover {
        transform: none !important;
        color: inherit !important;
    }
}

@media (max-width: 480px) {
    #teaching .section-title,
    #research-supervision .section-title {
        font-size: 1.5rem !important;
    }

    #teaching h3,
    #research-supervision h3 {
        font-size: 1.2rem !important;
        margin-top: 15px !important;
    }

    .teaching-responsibilities {
        padding: 15px !important;
        margin: 20px 0 !important;
    }

    .teaching-responsibilities strong {
        font-size: 1.1rem !important;
        padding-left: 28px !important;
    }

    .teaching-responsibilities li {
        font-size: 1rem !important;
        padding-left: 22px !important;
    }

    .courses-table th,
    .courses-table td,
    .supervision-table th,
    .supervision-table td {
        padding: 8px !important;
        font-size: 0.95rem !important;
    }

    /* Adjust emoji sizes */
    .teaching-responsibilities::before {
        font-size: 1.5rem !important;
        right: 15px !important;
        top: 15px !important;
    }
}

/* Dark Mode Adjustments */
@media (max-width: 768px) {
    .body-dark .teaching-responsibilities {
        background: rgba(var(--accent-color-rgb), 0.1) !important;
    }
    
    .body-dark .courses-table tr:nth-child(even),
    .body-dark .supervision-table tr:nth-child(even) {
        background: rgba(255, 255, 255, 0.05) !important;
    }
}

/* MOBILE: PROFESSIONAL SERVICE OPTIMIZATION */
@media (max-width: 768px) {
    #professional-service {
        padding: 40px 15px !important;
    }

    #professional-service .section-title {
        font-size: 1.7rem !important;
        margin-bottom: 25px !important;
    }

    #professional-service .section-title::after {
        width: 50px !important;
        height: 3px !important;
        margin: 8px auto 0 !important;
    }

    /* Sub-section Headers */
    #professional-service h3 {
        font-size: 1.3rem !important;
        margin-top: 30px !important;
        margin-bottom: 15px !important;
        padding-bottom: 6px !important;
        border-bottom-width: 1px !important;
    }

    /* List Containers */
    #professional-service > ul,
    #professional-service > ol {
        padding: 15px !important;
        margin-bottom: 25px !important;
        border-left-width: 3px !important;
    }

    /* Faculty/Departmental List Items */
    #professional-service > ul > li {
        flex-direction: column !important;
        gap: 8px !important;
        padding: 10px 0 !important;
        font-size: 1.05rem !important;
    }

    #professional-service > ul > li strong {
        font-size: 1.2rem !important;
        margin-bottom: 5px !important;
    }

    /* Community Responsibility Cards */
    #professional-service > ol {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    #professional-service > ol > li {
        padding: 18px !important;
    }

    #professional-service > ol > li strong {
        font-size: 1.2rem !important;
        margin-bottom: 10px !important;
    }

    #professional-service > ol > li ul li {
        font-size: 1.05rem !important;
        padding-left: 12px !important;
    }

    #professional-service > ol > li ul li::before {
        font-size: 0.9rem !important;
        top: 4px !important;
    }

    /* Disable hover effects */
    #professional-service > ol > li,
    #professional-service > ul {
        transition: none !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
    }
}

@media (max-width: 480px) {
    #professional-service .section-title {
        font-size: 1.5rem !important;
    }

    #professional-service h3 {
        font-size: 1.2rem !important;
        margin-top: 25px !important;
    }

    #professional-service > ul,
    #professional-service > ol {
        padding: 12px !important;
    }

    #professional-service > ul > li {
        font-size: 1rem !important;
        padding: 8px 0 !important;
    }

    #professional-service > ul > li strong {
        font-size: 1.1rem !important;
    }

    #professional-service > ol > li {
        padding: 15px !important;
    }

    #professional-service > ol > li strong {
        font-size: 1.1rem !important;
    }

    #professional-service > ol > li ul li {
        font-size: 1rem !important;
        line-height: 1.5 !important;
    }
}

/* Dark Mode Adjustments */
@media (max-width: 768px) {
    .body-dark #professional-service > ul > li,
    .body-dark #professional-service > ol > li {
        background: rgba(var(--accent-color-rgb), 0.08) !important;
    }
    
    .body-dark #professional-service > ul > li {
        border-bottom-color: rgba(255, 255, 255, 0.1) !important;
    }
}

/* MOBILE: TECHNICAL SKILLS OPTIMIZATION */
@media (max-width: 768px) {
    #technical-skills.section {
        padding: 40px 15px !important;
    }

    #technical-skills .section-title {
        font-size: 1.7rem !important;
        margin-bottom: 0 !important;
    }

    #technical-skills .section-title::after {
        width: 50px !important;
        height: 3px !important;
        margin: 8px auto 0 !important;
    }

    /* Sub-section Headers */
    #technical-skills h3 {
        font-size: 1.3rem !important;
        margin: 30px 0 15px !important;
        padding-bottom: 6px !important;
        border-bottom-width: 1px !important;
    }

    /* Skill Tags Grid */
    #technical-skills p {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
        gap: 16px !important;
        margin-bottom: 25px !important;
    }

  
    .skill-tag {
        font-size: 1.1rem !important;
        padding: 10px 15px !important;
        border-radius: 20px !important;
        margin: 2px !important;
    }

    /* Certification Cards */
    #technical-skills ul {
        gap: 15px !important;
    }

    #technical-skills li {
        padding: 18px !important;
        border-left-width: 3px !important;
    }

    #technical-skills li strong {
        font-size: 1.2rem !important;
        margin-bottom: 6px !important;
    }

    #technical-skills li::before {
        font-size: 1rem !important;
        right: 12px !important;
        top: 12px !important;
    }

    /* Tech Badges */
    .tech-badges {
        gap: 8px !important;
        margin-top: 12px !important;
    }

    .tech-badge {
        font-size: 1.05rem !important;
        padding: 6px 12px !important;
        border-radius: 18px !important;
    }

    /* Disable hover effects */
    .skill-tag:hover,
    .tech-badge:hover,
    #technical-skills li:hover {
        transform: none !important;
        background: rgba(var(--secondary-color-rgb), 0.1) !important;
        color: var(--primary-color) !important;
    }

    .body-dark #technical-skills li:hover {
        transform: none !important;
        background: rgba(var(--secondary-color-rgb), 0.1) !important;
        color: white !important;
    }
}

@media (max-width: 480px) {
    #technical-skills .section-title {
        font-size: 1.5rem !important;
    }

    #technical-skills h3 {
        font-size: 1.2rem !important;
        margin: 25px 0 12px !important;
    }

    .skill-tag {
        font-size: 1rem !important;
        padding: 8px 12px !important;
    }

    #technical-skills li {
        padding: 15px !important;
    }

    #technical-skills li strong {
        font-size: 1.1rem !important;
    }

    .tech-badge {
        font-size: 0.95rem !important;
        padding: 5px 10px !important;
    }

    /* Adjust list marker positioning */
    #technical-skills li::before {
        right: 10px !important;
        top: 10px !important;
    }
}

/* Dark Mode Adjustments */
@media (max-width: 768px) {
    .body-dark #technical-skills li {
        background: rgba(var(--accent-color-rgb), 0.08) !important;
    }
    
    .body-dark .skill-tag,
    .body-dark .tech-badge {
        background: rgba(255, 255, 255, 0.1) !important;
        color: var(--dark-text) !important;
    }
    
    .body-dark #technical-skills > ul:last-of-type li {
        background: rgba(255, 255, 255, 0.05) !important;
    }
}

/* MOBILE: CONTACT & FOOTER OPTIMIZATION */
@media (max-width: 768px) {
    #contact {
        padding: 40px 15px !important;
    }

    #contact h2 {
        font-size: 1.7rem !important;
        padding-bottom: 6px !important;
        border-bottom-width: 2px !important;
        margin-bottom: 25px !important;
    }

    #contact h2::after {
        width: 50px !important;
        height: 3px !important;
        margin: 6px auto 0 !important;
    }

    .contact-info {
        gap: 15px !important;
        padding: 0 10px !important;
    }

    .contact-info div {
        width: 100% !important;
        min-width: auto !important;
        padding: 15px !important;
        font-size: 1.05rem !important;
        border-radius: 8px !important;
    }

    .contact-info a {
        display: block;
        padding: 4px 0;
        min-height: 40px;
        display: flex;
        align-items: center;
    }

    /* Disable hover effects */
    .contact-info div:hover {
        transform: none !important;
        background-color: #f9fcff !important;
    }

    /* Footer adjustments */
    .footer {
        padding: 15px !important;
        font-size: 0.95rem !important;
    }
}

@media (max-width: 480px) {
    #contact h2 {
        font-size: 1.5rem !important;
    }

    .contact-info div {
        padding: 12px !important;
        font-size: 1rem !important;
    }

    .contact-info a {
        font-size: 0.95rem !important;
        min-height: 38px;
    }

    .footer {
        padding: 12px !important;
        font-size: 0.9rem !important;
    }
}

/* Dark Mode Adjustments */
@media (max-width: 768px) {
    .body-dark .contact-info div {
        background: rgba(var(--accent-color-rgb), 0.08) !important;
        color: var(--dark-text) !important;
    }

    .body-dark .contact-info a {
        color: var(--dark-text) !important;
    }

    .body-dark .footer {
        background: var(--dark-secondary) !important;
        color: var(--dark-text) !important;
    }
}


/* other correctionns*/
@media (max-width: 768px) {
    /* Add this to existing mobile optimization */
    .navbar {
        position: fixed;
        top: -1px; /* Compensate for any residual gap */
        height: 55px !important; /* Standardize mobile nav height */
    }

    body {
        padding-top: 55px !important; /* Match nav height */
    }
}
@media (max-width: 768px) {
    /* Update existing dark mode nav styles */
    .body-dark .nav-links {
        background: var(--dark-primary) !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
    }

    .body-dark .nav-links li a {
        color: var(--dark-text) !important;
    }

    /* Add hover states */
    .body-dark .nav-links li a:hover::after {
        background: var(--accent-color) !important;
    }
}
@media (max-width: 768px) {
    /* Improve mobile menu contrast */
    .nav-links {
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(8px) !important;
    }

    .body-dark .nav-links {
        background: rgba(26, 26, 26, 0.95) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    .nav-links li a {
        font-size: 1.3rem !important;
        padding: 8px 15px !important;
        border-radius: 8px !important;
        transition: background 0.3s ease !important;
    }

    .nav-links li a:hover {
        background: rgba(var(--accent-color-rgb), 0.1) !important;
    }
}
.navbar {
    border-bottom: none !important;
    box-shadow: none !important;
    background: rgba(255, 255, 255, 0.95) !important; /* Solid background for mobile */
}

.body-dark .navbar {
    background: rgba(26, 26, 26, 0.95) !important;
}
@media (max-width: 768px) {
    .nav-links {
        top: 55px !important; /* Match navbar height */
        height: calc(100vh - 55px) !important; /* Full viewport height minus navbar */
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(12px) !important;
        z-index: 999;
    }

    .body-dark .nav-links {
        background: rgba(26, 26, 26, 0.98) !important;
    }
}
.header {
    border-bottom: none !important; /* Remove if not needed */
    box-shadow: none !important;
}
body {
    padding-top: 20px !important; /* Match navbar height */
}

@media (max-width: 768px) {
    /* Remove navbar background and ensure it's transparent */
    .navbar {
        background: transparent !important;
        backdrop-filter: none !important;
    }

    /* Ensure the hamburger icon is visible */
    .hamburger span {
        background: var(--primary-color); /* Use primary color for contrast */
    }

    /* Dark mode hamburger color */
    .body-dark .hamburger span {
        background: var(--dark-text);
    }
}
@media (max-width: 768px) {
    /* Dark mode navbar override */
    .body-dark .navbar {
        background: transparent !important;
        backdrop-filter: none !important;
        border-bottom: none !important;
    }

    /* Remove residual dark mode border/shadow */
    .body-dark .navbar {
        box-shadow: none !important;
    }

    /* Fix hamburger icon visibility */
    .body-dark .hamburger span {
        background: var(--dark-text) !important;
        box-shadow: 0 0 3px rgba(255, 255, 255, 0.2); /* Add subtle glow */
    }
}


@media (max-width: 768px) {
    /* Mobile menu full-screen adjustments */
    .nav-links {
        position: fixed;
        top: 0 !important; /* Start from very top */
        left: 0;
        height: 100vh !important; /* Full viewport height */
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(12px);
        z-index: 999;
        padding-top: 40px !important; /* Space for hamburger */
        justify-content: flex-start;
    }

    /* Dark mode full-screen menu */
    .body-dark .nav-links {
        background: rgba(26, 26, 26, 0.98) !important;
    }

    /* Hamburger position adjustment */
    .hamburger {
        z-index: 1000; /* Keep above menu */
        position: fixed;
        top: 15px;
        right: 20px;
    }

    /* Menu items spacing */
    .nav-links li {
        margin: 0px 0;
    }

    /* Remove navbar background completely */
    .navbar {
        background: transparent !important;
        backdrop-filter: none !important;
    }
}




/* Academic Appointments Table-style Layout */
#academic-journey h3:first-of-type + .timeline {
    padding: 0;
    margin: 25px 0 35px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--card-bg);
    box-shadow: var(--shadow);
}

#academic-journey h3:first-of-type + .timeline::before,
#academic-journey h3:first-of-type + .timeline li::before {
    display: none;
}

#academic-journey h3:first-of-type + .timeline li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 15px 35px;
    margin: 0;
    border-bottom: 1px solid var(--border-color);
    box-shadow: none;
    border-radius: 0;
}

#academic-journey h3:first-of-type + .timeline li:last-child {
    border-bottom: none;
}

#academic-journey h3:first-of-type + .timeline h4 {
    font-size: 1.4rem;
    color: var(--primary-color);
    margin: 0;
    flex: 1;
}

#academic-journey h3:first-of-type + .timeline p {
    font-size: 1.2rem;
    color: var(--text-color);
    margin: 0;
    padding-left: 20px;
    text-align: right;
    white-space: nowrap;
}

/* Hover Effects */
#academic-journey h3:first-of-type + .timeline li:hover {
    background: rgba(var(--accent-color-rgb), 0.05);
    transform: none;
}
/* Dark Mode Hover Adjustment */
.body-dark #academic-journey h3:first-of-type + .timeline li:hover {
    background: #050000 !important;
}

.body-dark #academic-journey h3:first-of-type + .timeline li:hover h4,
.body-dark #academic-journey h3:first-of-type + .timeline li:hover p {
    color: white !important;
}
/* Mobile Responsiveness */
@media (max-width: 768px) {
    #academic-journey h3:first-of-type + .timeline li {
        flex-direction: column;
        gap: 5px;
        padding: 15px 20px;
    }
    
    #academic-journey h3:first-of-type + .timeline p {
        text-align: left;
        padding-left: 0;
        white-space: normal;
        font-size: 1.1rem;
    }
    
    #academic-journey h3:first-of-type + .timeline h4 {
        font-size: 1.2rem;
    }
}





.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.reveal-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

button {
    transition: background 0.3s ease, transform 0.3s ease;
}

button:hover {
    background: var(--accent-color);
    color: #fff;
    transform: translateY(-2px);
}