body {
    font-family: 'Open Sans', sans-serif;
    /* padding-top: 56px; /* Removed as navbar is sticky, not fixed */
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Poppins', sans-serif;
}

html {
    scroll-behavior: smooth;
}

section {
    padding: 70px 0;
}

/* Navbar base styling */
.navbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 1030 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
}

.navbar-brand {
    font-weight: 800;
}

/* --- NAVBAR LINK STYLING --- */

/*
   DEFAULT LINK COLORS FOR DARK NAVBAR:
   Bootstrap's .navbar-dark .navbar-nav .nav-link has color: rgba(255,255,255,0.55);
   Bootstrap's .navbar-dark .navbar-nav .nav-link.active has color: #fff;
   We will override hover/focus and ensure our active styles (color and font-weight) are applied.
*/

/* 1. Global .navbar-dark link color for HOVER and FOCUS states */
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    color: #ffffff !important;
    /* Ensure fully white on hover/focus */
}

/* 2. Global styling for ACTIVE nav links within a .navbar-dark */
.navbar-dark .navbar-nav .nav-link.active {
    color: #ffffff !important;
    /* Reinforce Bootstrap's active color and make it important */
    font-weight: 800 !important;
    /* Ensure bold font weight and make it important */
}

/* --- NAVBAR DISPLAY & LAYOUT RULES --- */

/* For large screens (lg and up) - Ensures items are visible and horizontal */
@media (min-width: 992px) {
    .navbar-expand-lg .navbar-collapse {
        display: flex !important;
        flex-basis: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-grow: 1 !important;
        /* Ensure it takes available space for ms-auto to work */
    }

    .navbar-expand-lg .navbar-nav {
        display: flex !important;
        flex-direction: row !important;
        list-style: none !important;
        padding-left: 0 !important;
        margin-bottom: 0 !important;
    }

    /*
       The problematic L1 rule (.navbar-expand-lg .navbar-nav .nav-link { color: ... !important; })
       has had its color declaration removed.
       Default link colors for .navbar-dark on large screens will now correctly come from
       Bootstrap's .navbar-dark .navbar-nav .nav-link { color: rgba(255,255,255,0.55); }
       Our global hover/active rules (defined above) will handle those states.
    */
    .navbar-expand-lg .navbar-nav .nav-link {
        display: block !important;
        padding: 0.5rem 1rem !important;
        /* color: rgba(255, 255, 255, 0.55) !important; */
        /* THIS LINE'S COLOR DECLARATION REMOVED/COMMENTED */
        text-decoration: none !important;
        /* Color is now handled by Bootstrap's .navbar-dark default and our specific active/hover overrides */
    }

    /*
       The specific hover/active rules for .navbar-expand-lg.navbar-dark might not be
       strictly necessary here if the global ones are specific enough, but they don't hurt
       and can provide an extra layer of specificity if needed.
       The global rules for .navbar-dark .navbar-nav .nav-link:hover and
       .navbar-dark .navbar-nav .nav-link.active should cover these states.
    */
    /*
    .navbar-expand-lg.navbar-dark .navbar-nav .nav-link:hover,
    .navbar-expand-lg.navbar-dark .navbar-nav .nav-link:focus {
        color: #ffffff !important;
    }
    .navbar-expand-lg.navbar-dark .navbar-nav .nav-link.active {
        color: #ffffff !important;
        font-weight: 600 !important;
    }
    */

    .navbar-expand-lg .navbar-toggler {
        display: none !important;
    }
}

/* For small screens - Ensures toggler is visible and handles collapsed menu display */
@media (max-width: 991.98px) {
    .navbar-expand-lg .navbar-toggler {
        display: block !important;
        /* The color for the toggler icon (hamburger bars) in .navbar-dark
           is handled by Bootstrap (often an SVG with `filter` or `fill`).
           Explicitly setting `color: #ffffff !important;` here might not affect the icon.
           If the icon isn't white, it's a different Bootstrap customization. */
    }

    .navbar-collapse.collapse.show {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
        visibility: visible !important;
    }

    /* Styles for links when menu is collapsed and shown */
    /* Default link color in collapsed menu */
    .navbar-dark .navbar-collapse.show .navbar-nav .nav-link,
    .navbar-dark .navbar-collapse.collapsing .navbar-nav .nav-link {
        /* color: rgba(255, 255, 255, 0.55) !important; */
        color: #ffffff !important;
    }

    /* Hover/Focus in collapsed menu (also covered by global rule, but explicit here for clarity) */
    .navbar-dark .navbar-collapse.show .navbar-nav .nav-link:hover,
    .navbar-dark .navbar-collapse.show .navbar-nav .nav-link:focus,
    .navbar-dark .navbar-collapse.collapsing .navbar-nav .nav-link:hover,
    .navbar-dark .navbar-collapse.collapsing .navbar-nav .nav-link:focus {
        color: #ffffff !important;
    }

    /* Active in collapsed menu (also covered by global rule, but explicit here for clarity) */
    .navbar-dark .navbar-collapse.show .navbar-nav .nav-link.active,
    .navbar-dark .navbar-collapse.collapsing .navbar-nav .nav-link.active {
        color: #ffffff !important;
        /* Use #ffffff for consistency, same as #fff */
        font-weight: 800 !important;
    }
}

/* --- END OF NAVBAR DISPLAY FIXES --- */

#about a {
    color: #0d6efd;
    text-decoration: none;
}

#about a:hover {
    text-decoration: underline;
}

/* Project Card Styling */
.project-card {
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    background-color: #fff;
    position: relative;
    /* Crucial for positioning the button inside */
    cursor: pointer;
    /* Indicates the card is interactive */
}

.github-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    /* Ensures the button is on top of other card content */
    /* display: none; /* Initially hidden, will be controlled by JS */
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    /* You can use Bootstrap button classes or custom styles */
}

/* A class to make the button visible (controlled by JS) */
.github-button.visible {
    display: inline-block !important;
    /* Use !important if other display utilities conflict */
}

.project-card:hover {
    background-color: #000;
    color: #fff;
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.project-card:hover .card-title,
.project-card:hover .card-text {
    color: #fff;
}

.project-card .card-title {
    color: #212529;
    transition: color 0.3s ease;
}

.project-card:hover .card-title {
    color: #fff;
}

.card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
    padding: 1.25rem;
}

.card-title {
    /* This is a general .card-title, ensure it doesn't conflict if not intended for projects only */
    font-size: 1.2rem;
    font-weight: 600;
}

/* Skill Item Styling */
.skill-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    transition: color 0.3s ease;
    color: #000000;
    /* Skill icons default to black */
}

.skill-item p {
    margin-bottom: 0;
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.3s ease;
    color: #212529;
}

.skill-item {
    padding: 1.25rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    background-color: #fff;
}

.skill-item:hover {
    background-color: #1a202c;
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.skill-item:hover .skill-icon,
.skill-item:hover p {
    color: white;
}

/* Contact Section Styling */
#contact {
    background-color: #f8f9fa;
}

.contact-icons {
    display: flex;
    justify-content: center;
    gap: 2.0rem;
    margin-top: 0.6rem;
    font-size: 1.5rem;
}

.contact-icons a {
    color: #343a40;
    transition: transform 0.2s ease-in-out, color 0.2s ease-in-out;
}

.contact-icons a:hover {
    transform: scale(1.2);
    color: #0d6efd;
}

/* Card Images and Carousels */
.carousel-inner .carousel-item img,
.card-img-top {
    /* This general .card-img-top style might affect other cards if not intended */
    width: 100%;
    height: 220px;
    object-fit: contain;
    background-color: #f8f9fa;
    border-top-left-radius: calc(0.75rem - 1px);
    border-top-right-radius: calc(0.75rem - 1px);
}

.project-card>.card-title {
    /* More specific for project card titles if needed */
    margin-bottom: 0.5rem;
    padding-top: 1rem;
}

.project-card .card-text.small {
    font-size: 0.9rem;
    line-height: 1.6;
}

/* Experience Section Specific Styles */
#experience {
    font-family: 'Inter', sans-serif;
    background-color: #f0f4f8;
}

#experience .section-title {
    /* Assuming .section-title is used in HTML for this section */
    font-family: 'Poppins', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 3rem;
    color: #1f2937;
}

#experience .experience-item {
    background-color: #ffffff;
    padding: 1.75rem;
    border-radius: 0.75rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.07);
    margin-bottom: 1.5rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#experience .experience-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 20px -4px rgba(0, 0, 0, 0.12);
}

#experience .experience-item h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #1e40af;
    margin-bottom: 0.35rem;
}

#experience .experience-item p {
    font-size: 1rem;
    color: #4b5563;
}

#experience .image-container img {
    border-radius: 0.75rem;
    object-fit: contain;
    object-position: center;
    width: 100%;
    height: auto;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    background-color: #f0f4f8;
}

#experience .image-wrapper {
    background-color: #ffffff;
    padding: 1rem;
    border-radius: 0.75rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    margin-bottom: 2rem;
}

#experience .image-wrapper:last-child {
    margin-bottom: 0;
}

/* --- Default Carousel Controls for .project-card (e.g., GIZ Website) --- */
.project-card .carousel-control-prev-icon,
.project-card .carousel-control-next-icon {
    filter: invert(0%) grayscale(100%) brightness(0%);
}

.project-card:hover .carousel-control-prev-icon,
.project-card:hover .carousel-control-next-icon {
    filter: invert(0%) grayscale(100%) brightness(0%);
}

.project-card .carousel-indicators button {
    background-color: rgba(0, 0, 0, 0.5);
    /* Semi-transparent black indicators */
}

.project-card:hover .carousel-indicators button {
    background-color: rgba(255, 255, 255, 0.5);
    /* Semi-transparent white indicators on project card hover */
}

.project-card .carousel-indicators .active {
    background-color: #000;
    /* Black active indicator */
}

.project-card:hover .carousel-indicators .active {
    background-color: #000;
    /* White active indicator on project card hover */
}

#car-rental-project .carousel-control-prev-icon,
#car-rental-project .carousel-control-next-icon {
    filter: invert(0%) grayscale(100%) brightness(200%);
    /* White icons */
}

#car-rental-project:hover .carousel-control-prev-icon,
#car-rental-project:hover .carousel-control-next-icon {
    filter: invert(0%) grayscale(100%) brightness(200%);
    /* Your desired hover filter for car-rental icons */
}

/* /* --- Specific Styles for Car Rental Project Carousel Controls (White) --- */

/* On hover for car-rental-project, icons will remain white due to the general .project-card:hover rule also making them white.
   If you wanted a different hover effect specifically for car-rental icons, you'd add:

   But for them to just stay white, the above is sufficient.
*/

#car-rental-project .carousel-indicators button {
    background-color: rgba(255, 255, 255, 0.5);
    /* Semi-transparent white indicators */
}

#car-rental-project:hover .carousel-indicators button {
    background-color: rgba(230, 230, 230, 0.7);
    /* Example: slightly off-white on hover if desired */
}

#car-rental-project .carousel-indicators .active {
    background-color: #fff;
    /* Solid white active indicator */
}

#car-rental-project:hover .carousel-indicators .active {
    background-color: #f0f0f0;
    /* Example: slightly off-white on hover if desired */
}

*/

/* Typing Animation Styles */
.typing-cursor {
    display: inline-block;
    animation: blink-animation 0.75s step-end infinite;
    margin-left: 3px;
    color: #212529;
    font-weight: bold;
}

@keyframes blink-animation {

    from,
    to {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

#typing {
    color: #212529;
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* Section Headings */
.section-heading {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    color: #2c3e50;
    position: relative;
    padding-bottom: 10px;
}

.section-heading::after {
    content: '';
    position: absolute;
    display: block;
    width: 50px;
    height: 3px;
    background: #0d6efd;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

/* Hero section */
#hero {
    background: linear-gradient(135deg, #e0e7ff 0%, #f3f4f6 100%);
    min-height: 90vh;
}

#hero h1 {
    color: #1f2937;
    font-size: 2.5rem;
}

#hero .lead {
    color: #374151;
    font-size: 1.5rem;
}

/* ── Activities & News ── */
#activities {
    background-color: #f8f9fa;
}

.news-timeline {
    max-width: 820px;
    margin: 0 auto;
    list-style: none;
    padding: 0;
}

.news-timeline li {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 0 20px;
    padding: 14px 0;
    border-bottom: 1px solid #e9ecef;
    align-items: baseline;
}

.news-timeline li:last-child {
    border-bottom: none;
}

.news-date {
    font-size: 0.78rem;
    color: #6c757d;
    white-space: nowrap;
    padding-top: 2px;
    font-weight: 500;
}

.news-body {
    font-size: 0.92rem;
    color: #212529;
    line-height: 1.6;
}

.news-body .news-icon {
    margin-right: 6px;
}

.news-tag {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 20px;
    margin-right: 6px;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

.news-tag.trophy {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffe08a;
}

.news-tag.paper {
    background: #cfe2ff;
    color: #084298;
    border: 1px solid #9ec5fe;
}

.news-tag.talk {
    background: #d1e7dd;
    color: #0a3622;
    border: 1px solid #a3cfbb;
}

.news-tag.hack {
    background: #e2d9f3;
    color: #3d1a78;
    border: 1px solid #c5b3e6;
}

.news-tag.compete {
    background: #fde8d8;
    color: #7c3811;
    border: 1px solid #f8c5a0;
}

.news-body a {
    color: #0d6efd;
    text-decoration: none;
    font-weight: 500;
}

.news-body a:hover {
    text-decoration: underline;
}

@media (max-width: 575px) {
    .news-timeline li {
        grid-template-columns: 1fr;
        gap: 4px 0;
    }

    .news-date {
        font-size: 0.72rem;
    }
}

/* Review Cards */
.review-card {
    border: none;
    /* Remove default Bootstrap card border */
    border-radius: 0.5rem;
    /* Add rounded corners */
    overflow: hidden;
    /* Ensures content (like images) respects the border radius */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Add a subtle shadow */
    background-color: #ffffff;
    /* Ensure card background is white, especially if section bg changes */
    /* h-100 class from Bootstrap handles height consistency if needed */
}

/* Default styling for the images within the review cards */
.review-card .review-image {
    /* Default style: Make the entire image fit without cropping */
    object-fit: contain;

    /* Make image responsive within its container */
    width: 100%;
    height: auto;
    /* Allow height to adjust based on aspect ratio to prevent distortion */

    /* Default maximum height for review images */
    max-height: 350px;
    /* <--- Default max height */

    /* Optional: Add a background color to the image's container area.
       This will be visible if 'object-fit: contain' leaves empty space due to
       aspect ratio differences. Matches the section's bg-light. */
    background-color: #f8f9fa;
}

/* --- Specific rule for the 3rd University Review Image --- */
.review-card .review-image-student-3 {
    height: 220px;
    /* Set the fixed height */
    object-fit: cover;
    /* Use cover to fill height, cropping width if needed */
    max-height: none;
    /* Override the default max-height */
    width: 100%;
    /* Ensure it tries to use container width */
}

/* --- End specific rule for 3rd student image --- */

/* --- NEW RULE for Fiverr Review Images --- */
/* This rule targets images with the class 'review-image-fiverr' */
.review-card .review-image-fiverr {
    height: 220px;
    /* Set the same fixed height */
    object-fit: cover;
    /* Use cover to fill height, cropping width if needed */
    max-height: none;
    /* Override the default max-height */
    width: 100%;
    /* Ensure it tries to use container width */
}

/* --- End new rule for Fiverr images --- */

/* Optional: Add a hover effect to the cards for interactivity */
.review-card:hover {
    transform: translateY(-5px);
    /* Lift card slightly on hover */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    /* Smooth transition */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
    /* Slightly larger shadow on hover */
}

/* Ensure the section itself has appropriate padding */
#reviews {
    padding-top: 60px;
    /* Standard vertical padding */
    padding-bottom: 60px;
    /* Standard vertical padding */
    /* bg-light class from Bootstrap handles the background color */
}

/* Styling for the subheadings (From University Students / From Fiverr Clients) */
#reviews h3.fw-light {
    color: #495057;
    /* A slightly muted text color */
    font-weight: 300 !important;
    /* Override Bootstrap if necessary to ensure light weight */
    margin-top: 1rem;
    /* Add some space above subheadings */
}

/* ══════════════════════════════════════
   THEME TOGGLE
══════════════════════════════════════ */
#theme-toggle {
    color: rgba(255, 255, 255, 0.55);
    border: none;
    background: none;
    padding: 0.5rem 1rem;
    font-size: 1rem;
}

#theme-toggle:hover {
    color: #ffffff;
}

/* ══════════════════════════════════════
   LIGHT THEME (default)
══════════════════════════════════════ */
body.light-theme {
    background-color: #ffffff;
    color: #212529;
}

/* ══════════════════════════════════════
   DARK THEME
══════════════════════════════════════ */
body.dark-theme {
    background-color: #121212;
    color: #e2e8f0;
}

/* Generic section fallback */
body.dark-theme section {
    background-color: #1a1a2e;
}

/* Hero */
body.dark-theme #hero {
    background: linear-gradient(135deg, #0f172a 0%, #1a1a2e 100%);
}

body.dark-theme #hero h1 {
    color: #e2e8f0;
}

body.dark-theme #hero p {
    color: #94a3b8;
}

/* Contact icons in hero */
body.dark-theme .contact-icons a {
    color: #94a3b8;
}

body.dark-theme .contact-icons a:hover {
    color: #60a5fa;
}

/* About */
body.dark-theme #about {
    background-color: #1a1a2e !important;
}

body.dark-theme #about p,
body.dark-theme #about b {
    color: #e2e8f0;
}

body.dark-theme #about a {
    color: #60a5fa;
}

/* Section headings */
body.dark-theme .section-heading {
    color: #e2e8f0 !important;
}

body.dark-theme #projects .section-heading {
    color: #e2e8f0 !important;
}

/* Experience */
body.dark-theme #experience {
    background-color: #0f172a !important;
}

body.dark-theme .experience-item {
    background-color: #1e293b !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

body.dark-theme .experience-item h3 {
    color: #93c5fd;
}

body.dark-theme .experience-item p {
    color: #94a3b8;
}

body.dark-theme .image-wrapper {
    background-color: #1e293b !important;
}

body.dark-theme #experience .image-container img {
    background-color: #0f172a !important;
}

/* Skills */
body.dark-theme #skills {
    background-color: #1a1a2e !important;
}

body.dark-theme .skill-item {
    background-color: #1e1e2e;
    border-color: #2d2d3d;
}

body.dark-theme .skill-item .skill-icon,
body.dark-theme .skill-item p {
    color: #e2e8f0;
}

/* Projects */
body.dark-theme #projects {
    background-color: #1e293b  !important;
}

body.dark-theme .card.project-card {
    background-color: #0f172a !important;
    color: #e2e8f0;
    border: 1px solid #2d3748;
}

body.dark-theme .card.project-card .card-title {
    color: #e2e8f0;
}

body.dark-theme .card.project-card .card-text {
    color: #94a3b8;
}

body.dark-theme .card.project-card .card-img-top,
body.dark-theme .card.project-card .carousel-item img {
    background-color: #0f172a !important;
}

body.dark-theme .card.project-card:hover {
    background-color: #000 !important;
    border-color: #4a5568;
}

/* Activities & News */
body.dark-theme #activities {
    background-color: #1a1a2e !important;
}

body.dark-theme .news-timeline li {
    border-bottom-color: #2d2d3d;
}

body.dark-theme .news-date {
    color: #94a3b8;
}

body.dark-theme .news-body {
    color: #e2e8f0;
}

body.dark-theme .news-body a {
    color: #60a5fa;
}

body.dark-theme .news-tag.trophy {
    background: #3d2e00;
    color: #fde68a;
    border-color: #92620a;
}

body.dark-theme .news-tag.compete {
    background: #3d1500;
    color: #fdba74;
    border-color: #92400e;
}

body.dark-theme .news-tag.hack {
    background: #2e1a4d;
    color: #c4b5fd;
    border-color: #6d28d9;
}

body.dark-theme .news-tag.talk {
    background: #052e16;
    color: #86efac;
    border-color: #166534;
}

body.dark-theme .news-tag.paper {
    background: #0c1a3d;
    color: #93c5fd;
    border-color: #1e40af;
}

/* Footer */
body.dark-theme footer {
    background-color: #0a0a0a !important;
}

body.dark-theme footer p {
    color: #94a3b8;
}

/* Scrollbar */
body.dark-theme ::-webkit-scrollbar-track {
    background: #1e1e2e;
}

body.dark-theme ::-webkit-scrollbar-thumb {
    background: #3d3d5c;
    border-radius: 4px;
}