* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: 'Poppins', Arial, sans-serif;
    background: #f9fafc;
    color: #212529;
    line-height: 1.5;
}
a { color: #335eea; text-decoration: none; }
a:hover { text-decoration: underline; }

.section {
    background-color: #fff; /* As a part of 3rd major modification, changing the section's bg color from #eae8e0 to clean white according to the feedback so it makes the page look like more breathable, not confined. */
    padding: 60px 20px;
    max-width: 1000px;
    margin: 0 auto 10px; /* bottom 10px, making little whitspace after each sections (about, exp, projects etc.) */
}

h1, h2, h3 { font-weight: 700; }
h1 { font-size: 2.5em; margin-bottom: 10px; }
h2 { font-size: 2em; margin-bottom: 25px; text-align: center; color: #2255aa;}
h3 { font-size: 1.25em; margin-bottom: 10px; }

.highlight { color: #ee7733; }
.highlight2 { color: #cc7846; }

.home-section {
    background: #333333;
    border-bottom: 1px solid #c7d4f6;
    padding-top: 12px;
    padding-bottom: 12px;
    margin-bottom: 40px;
}


.home-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0;
}
.home-text { flex: 2 1 340px;
    color: #f0f0ef;

}
.home-text h1 { font-size: 2em; }
.home-text .subtitle { font-size: 1.2em; color: #8daab8; margin-bottom: 18px; }
.button {
    display: inline-block;
    padding: 10px 28px;
    background: #cf7b48;
    color: #fdfdfb;
    border-radius: 6px;
    font-weight: bold;
    margin: 18px 0 20px;
    border: none;
    cursor: pointer;
    font-size: 1em;
    transition: 1.4s;
    text-decoration: none;
}

.button:hover { background: #c24b0c; color: #dad6cb;}
.social-links a {
    color: light-blue;
    margin-right: 18px;
    font-size: 1.5em;
    transition: color 0.18s;
    display: inline-block;
}
.social-links a:hover {
    color: #C96F32;
}


.home-img {
    flex: 1 1 220px;
    text-align: center;
    margin: 0px 0px 25px 0px;
}


.profile-img {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 5px solid #fff;
    box-shadow: 0 2px 16px rgba(0,0,0,0.08);
    object-fit: cover;
}

#txtleft{
    text-align: left;
    border-bottom: 2px solid #303336;
    padding-bottom: 3px;
    margin-bottom: 40px; /* Changing the margin-bottom from 90px to 40px to make it look better and make sure it doesn't feel like a separate section. */
}

.about-content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 40px;
    margin-top: 20px;
}
.about-img {
    width: 250px;
    border-radius: 12px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.09);
    margin-bottom: 18px;
    object-fit: cover;
}
.about-content > div {
    flex: 1 1 340px;
    min-width: 230px;
}



/* Modifying the about section to enhance / make it more playful. Date: 07.22.2025 : 23:09  */
.new-about-flex {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 36px;
}
.about-main {
    flex: 1 1 320px;
    min-width: 220px;
}
.about-hello {
    font-size: 1.2em;
    font-weight: 600;
    margin-right: 8px;
}
.about-name {
    font-size: 1.38em;
    font-weight: 700;
}
.about-bullets {
    margin: 22px 0 22px 0;
    padding-left: 0;
    list-style: none;
}
.about-bullets li {
    font-size: 1.07em;
    margin-bottom: 13px;
    padding-left: 0;
    line-height: 1.5;
    background: none;
    color: #1b1c22;
}
.about-motto {
    margin-top: 20px;
    font-size: 1.12em;
    font-style: italic;
    color: #cc7846;
}
@media (max-width: 900px) {
    .new-about-flex { flex-direction: column; align-items: center; }
    .about-img { margin-bottom: 20px; }
}


/* More modification. July 22 11:41 pm*/

/* Highlight key phrases elegantly */
.highlight-text {
    font-weight: 600;
    color: #cc7846;
    transition: background-color 0.3s, color 0.3s;
    cursor: pointer;
}

.highlight-text:hover {
    background-color: #ffeacc;
    color: #86592d;
    border-radius: 5px;
}

/* Drop cap for the first letter of paragraph */
.about-content p::first-letter {
    font-size: 2.8em;
    float: left;
    margin-right: 8px;
    color: #2255aa;
    font-weight: bold;
    line-height: 0.9;
}

/* Fade-in Animation */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.5s ease-in-out, transform 1.5s ease-in-out;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* New modification ends here. */


/* Modifying skill section. Date: July 25, 2025 : 02:17 a.m. */
.skills-cards-container {
    display: flex;
    flex-wrap: wrap;
    gap: 34px;
    justify-content: center;
    margin-bottom: 30px;
    margin-top: 18px;
}


.skill-card {
    background: linear-gradient(135deg, #fdf6e3, #fae1c3);
    /*keeping as optional linear-gradient(135deg, #fffaf0, #fef1dd);* /*#f9fafc*/
    border-radius: 16px;
    box-shadow: 0 2px 20px rgba(40,60,80,0.07);
    width: 198px;  /*155 160*/
    height: 244px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
    transition:
            box-shadow 0.3s,
            transform 0.19s cubic-bezier(.39,1.68,.58,.86),
            background 0.23s;
    position: relative;
    overflow: hidden;
}

.skill-card:hover {
    box-shadow: 0 10px 38px rgba(204,120,70,0.16), 0 2px 8px #ffdb87;
    transform: translateY(-7px) scale(1.045);
    background: #fffbe9;
}

.skill-icon {
    margin-top: 18px;
    margin-bottom: 14px;
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: #e6e8eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.15em;
    transition: background 0.26s;
}

/* Manually making Animated SVG icons */
.skill-icon.cpp { background: linear-gradient(135deg, #6296ea 65%, #232a38 100%);}
.skill-icon.java { background: linear-gradient(135deg, #e87b36 65%, #235c91 100%);}
.skill-icon.html { background: linear-gradient(135deg, #e44d26 70%, #f9f9fa 100%);}
.skill-icon.css { background: linear-gradient(135deg, #2862e9 70%, #e0e3fd 100%);}
.skill-icon.mips { background: linear-gradient(135deg, #333 70%, #6d6b6b 100%);}
.skill-icon.pm { background: linear-gradient(135deg, #cc7846 60%, #ffe4ba 100%);}
.skill-icon.js { background: linear-gradient(135deg, #e87b36 65%, #235c91 100%);}


/* FontAwesome/Bootstrap icons inside the skill icons  */
.skill-icon.cpp::before         { content: "💻"; }
.skill-icon.java::before        { content: "☕"; }
.skill-icon.html::before        { content: "🌐"; }
.skill-icon.css::before         { content: "🎨"; }
.skill-icon.mips::before        { content: "🧮"; }
.skill-icon.pm::before          { content: "📈"; }
.skill-icon.js::before          { content: "⚙️"; }

.skill-label {
    font-weight: 700;
    font-size: 1.13em;
    letter-spacing: 0.01em;
    color: #2f334c;
    margin-bottom: 2px;
    margin-top: 2px;
}

.skill-detail {
    font-size: 0.96em;
    color: #cc7846;
/*    opacity: 0;  For 4th modification */ 
    transform: translateY(16px);
    transition: opacity 0.24s, transform 0.27s;
    pointer-events: none;
    text-align: center;
    padding: 0 7px;
}

.skill-card:hover .skill-detail {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 900px) {
    .skills-cards-container {
        flex-wrap: wrap;
        gap: 22px;
    }
    .skill-card { width: 40vw; min-width: 130px; }
}
@media (max-width: 600px) {
    .skills-cards-container {
        flex-direction: column;
        gap: 18px;
    }
    .skill-card { width: 98vw; min-width: 0; }
}

/* New (3rd) modification ends here. */

.skills-description {
    font-size: 1em;
    margin: 12px 0 0 0;
    color: #333;
    text-align: center;
}

/* To Re-size Exp, Projects Images */
.gallery-img,
.img-fluid {
    max-width: 220px;
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 1px 8px rgba(0,0,0,0.08);
    border: 2px solid #fff;
    margin: 0 auto;
    display: block;
    transition: transform 0.2s, border-color 0.2s;
}

/* Needed to override/re-adjust images of specifically projects section. */
#projects .gallery-img,
#projects .img-fluid {
    width: 100%;
    height: 270px;
    object-fit: cover;
    object-position: center;
    border-radius: 12px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.11);
    border: 2px solid #ececec;
    background: #222;
    margin: 0 auto;
    transition: transform 0.21s, border-color 0.15s;
}



.gallery-img:hover,
.img-fluid:hover {
    transform: scale(1.07);
    border-color: #2255aa;
}

/* On small screens, making gallery images full-width */
@media (max-width: 600px) {
    .gallery-img,
    .img-fluid {
        max-width: 98vw;
        height: 26vw;
        min-height: 70px;
    }
    .about-img, .skills-img, .profile-img {
        max-width: 96vw;
    }
}

.img-caption {
    font-size: 0.98em;
    color: #6d7886;
    text-align: center;
    margin-top: 6px;
    margin-bottom: 8px;
    font-style: italic;
}

.work-gallery, .projects-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    justify-content: center;
    margin-bottom: 15px;
}


.contact-form {
    display: flex;
    flex-direction: column;
    max-width: 400px;
    margin: 0 auto;
    gap: 12px;
}
.contact-form input, .contact-form textarea {
    padding: 10px;
    border-radius: 6px;
    border: 1.2px solid #a0a8b3;
    font-size: 1em;
}
.contact-form textarea { resize: vertical; }
.contact-form button { width: 120px; align-self: flex-end; }

/* Updating footer color and making it relevant with the nav bar color. Modification date/time: July 25, 2025 : 12:20 a.m. */
.footer {
    background: #dad6cb;
    color: #303336;
    text-align: center;
    padding: 28px 0 10px;
    font-size: 1em;
    margin-top: 40px;
}

.footer-social a {
    margin: 0 10px;
    color: #303336;
    font-size: 1.35em;
    transition: color 0.16s, background 0.18s;
    background: transparent;
    border-radius: 8px;
    padding: 3px 6px;
    display: inline-block;
}
.footer-social a:hover {
    background: #f3e8da;
    color: #cc7846;
}
.footer-copy {
    margin-top: 9px;
    font-size: 0.95em;
}

/* Responsive Design */
@media (max-width: 900px) {
    .home-content, .about-content, .skills-list {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 500px) {
    h1 { font-size: 1.3em; }
    h2 { font-size: 1.15em; }
    .section { padding: 40px 6px; }
    .profile-img, .about-img, .skills-img, .gallery-img {
        width: 90vw;
        max-width: 220px;
    }
}


/* overriding these to adjust home section size. */
.home-section {
    padding-top: 12px;
    padding-bottom: 12px;
}

.home-content {
    gap: 10px;
}

.home-text h1 {
    margin-bottom: 6px;
}

.home-text .subtitle {
    margin-bottom: 8px;
}

.button {
    margin: 12px 0 12px 0;
    padding-top: 7px;
    padding-bottom: 7px;
}


.navbar-nav .nav-link {
    color: #303336;
    border-radius: 8px;
    padding: 5px 18px;
    margin: 0 5px;
    transition:
            background 1s,
            color 0.7s,
            box-shadow 0.9s;
    font-weight: 500;
    font-size: 1.07em;
    letter-spacing: 0.02em;

}


.navbar-nav .nav-link:hover {
    background: #f3e8da;
    color: #303336;
    border-color: #303336;
    box-shadow: 0 1px 7px rgba(201,111,50,0.12);
}

}

/* To re-size gaps between projects' images */



/* For popup animation inside About section */
.hover-keyword {
    position: relative;
    cursor: pointer;
    color: inherit;
    font-weight: inherit;
    display: inline-block;
}

.hover-keyword .popup-box {
    display: none;
    position: absolute;
    left: 50%;
    bottom: 120%;
    transform: translateX(-50%) scale(0.96);
    min-width: 130px;
    background: #fffbe9;
    border: 1.5px solid #eee2ce;
    color: #2f334c;
    border-radius: 14px;
    padding: 12px 13px 6px 13px;
    box-shadow: 0 6px 28px rgba(50,70,120,0.12);
    font-size: 1em;
    font-weight: 500;
    text-align: center;
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.24s, transform 0.21s;
    animation: popBounce 0.4s cubic-bezier(.47,1.64,.41,.87) both;
}

@keyframes popBounce {
    0% { transform: translateX(-50%) scale(0.7); opacity: 0;}
    60% { transform: translateX(-50%) scale(1.08); opacity: 1;}
    90% { transform: translateX(-50%) scale(0.98);}
    100% { transform: translateX(-50%) scale(1); opacity: 1;}
}

.hover-keyword:hover .popup-box,
.hover-keyword:focus .popup-box {
    display: block;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) scale(1);
}

.popup-anim {
    height: 38px;
    margin-bottom: 6px;
    border-radius: 6px;
}

.popup-label {
    color: #cc7846;
    font-size: 0.96em;
    font-weight: 700;
    margin-top: 0px;
    font-style: italic;
    letter-spacing: 0.01em;
}


/* Trying to fix the popup animation effect's issue. Modification date,time: July 23, 2025 : 01:02 a.m */

.hover-anim {
    position: relative;
    cursor: pointer;
    transition: color 0.18s;
}

.hover-anim .hover-gif {
    display: none;
    position: absolute;
    left: 50%;
    top: -90px;
    transform: translateX(-50%);
    width: 85px;
    border-radius: 10px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.13);
    z-index: 102;
    pointer-events: none;
    transition: opacity 0.22s;
    opacity: 0;
}

.hover-anim.show-gif .hover-gif {
    display: block;
    opacity: 1;
}

@media (max-width: 700px) {
    .hover-gif {
        display: none !important;
    }
}


/* Modification of Home (Hero) Section (Improvements, Enhancement). 2nd Modification Date-Time: July 23, 2025 : 02:01 a.m. 3rd (last) Modification: July 24 11:34 pm.  */
.hero-section {
    background: #333;
    padding: 38px 0 20px 0; /* reducing vertical space here */
    /* Changing the border radius (bended and sharp edge part), as I was suggested during the office hour. Now the top corners are rounded, bottom are sharp */
    border-radius: 24px 24px 0 0;
    box-shadow: 0 4px 26px rgba(0,0,0,0.08);
    margin-bottom: 14px;
}

.home-container {
    max-width: 950px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.home-left {
    flex: 1 1 350px;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 250px;
}

.home-left h1 {
    color: #fff;
    font-size: 2.1em;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 7px;
}
.home-left .highlight2 {
    color: #cc7846;
}

.home-left .subtitle {
    font-size: 1.15em;
    color: #b1bccf;
    margin-bottom: 14px;
}

.home-actions {
    display: flex;
    align-items: center;
    gap: 24px;
}

.home-actions .button {
    margin: 0;
    padding: 9px 22px;
    font-size: 1em;
    border-radius: 6px;
    background: #cc7846;
    color: #fff;
    font-weight: 600;
    border: none;
    box-shadow: 0 2px 8px rgba(50,60,70,0.08);
    transition: background 0.17s;
}
.home-actions .button:hover {
    background: #cf7b48;
    color: #fff;
}

.social-links {
    display: flex;
    align-items: center;
    gap: 12px;
}

.social-links a {
    color: #a3c4e5;
    font-size: 1.46em;
    background: none;
    border-radius: 7px;
    transition: color 0.17s, background 0.17s;
    padding: 3px;
    display: flex;
    align-items: center;
}
.social-links a:hover {
    color: #cc7846;
    background: #222;
}

.home-right {
    flex: 0 0 185px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-profile-img {
    width: 165px;
    height: 165px;
    object-fit: cover;
    border-radius: 50%;
    border: 5px solid #f3e8da;
    box-shadow: 0 4px 28px rgba(50,50,70,0.14);
    margin-bottom: 0;
}

@media (max-width: 700px) {
    .home-container {
        flex-direction: column;
        gap: 18px;
        align-items: center;
        text-align: center;
    }
    .home-left, .home-right { align-items: center; justify-content: center; min-width: 0; }
    .home-left h1 { font-size: 1.5em; }
    .hero-profile-img { width: 110px; height: 110px; }
    .home-actions { flex-direction: column; gap: 8px; }
}


/* For Toggle Position & Animation */
#theme-toggle-wrapper {
    position: fixed;
    top: 20px;
    right: 32px;
    z-index: 1200;
}


/* Modifying it to push the bulb button slightly towards left as I was instructed. This is my 3rd attempt of modification. Date-time: July 24, 2025 : 11:44 pm. */

#theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: 22px;   /* Pushes it a bit left from edge */
    margin-right: 0;
    position: static;    /* Remove any fixed/absolute! */
    vertical-align: middle;
    display: inline-block;
}

@media (max-width: 700px) {
    #theme-toggle {
        margin-left: 0;
        margin-right: 0;
        /* keep as inline-block, don't change position for mobile */
    }
}




/* For the rope pulling animation */
#bulb.pulling #rope, #bulb.pulling #handle {
    animation: ropePull 0.3s ease-in-out;
}

@keyframes ropePull {
    0% { transform: translateY(0); }
    50% { transform: translateY(5px); }
    100% { transform: translateY(0); }
}


body.dark-mode {
    background-color: #1c1f26 !important; /* This is Dark bluish-gray */
    color: #e8eaed !important;
}

body.dark-mode .section {
    background-color: #242830 !important; /* Slightly lighter dark gray */
    color: #cdd4df !important;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3 {
    color: #ffdb87 !important; /* This is warm yellow color */
}

body.dark-mode a {
    color: #4dabf7;
}

body.dark-mode .navbar,
body.dark-mode .footer {
    background-color: #20242c !important; /* Darker shade for navbar & footer */
    color: #e8eaed !important;
}


body.dark-mode .skills-description {
    color: #cdd4df !important;
}


body.light-mode #bulb-glow { opacity: 0.7; }
body.dark-mode #bulb-glow { opacity: 0; }
body.dark-mode #bulb-glass { fill: #575c66; stroke: #a0a0a0; }

body.dark-mode .navbar-nav .nav-link {
    color: #ffdb87 !important;
}

body.dark-mode .navbar-nav .nav-link:hover {
    background: #353941 !important;
    color: #ffd164 !important;
}

body.dark-mode .navbar .container > a,
body.dark-mode .navbar .container > a:visited {
    color: #ffdb87 !important;
}

body.dark-mode .navbar-toggler {
    border-color: #fff; /* This should make button border visible. */
}

/* Fixing the issue with bootstrap's navbar's humberger looking button's dark mode issue. */
body.dark-mode .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'><path stroke='rgba(255,255,255,0.95)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/></svg>");
}

body.dark-mode .skill-card{  /* Modifying new skill section's skill-card bg color's dark mode version */
    background-color: #20242c !important;
}
body.dark-mode .skill-label{  /* Modifying new skill section's skill-label color's dark mode version */
    color: golden !important;
}



/* Adding this additional "Experience Section" CSS for the modified/renovated experience section in my portfolio. Modification Date/Time: July 25, 2025 : 03:24 a.m. */

.experience-cards {
    display: flex;
    gap: 36px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 22px;
}

.exp-card {
    background: #faf9f7;
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(50,50,70,0.08);
    padding: 28px 24px 18px 24px;
    min-width: 280px;
    max-width: 330px;
    flex: 1 1 280px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 18px;
    transition: transform 0.16s, box-shadow 0.16s;
    border: 1.5px solid #eceae4;
    cursor: pointer;
}
.exp-card:hover {
    box-shadow: 0 6px 30px rgba(30,55,120,0.10);
    transform: translateY(-6px) scale(1.03);
    border-color: #ffeacc;
}

.exp-icon {
    font-size: 2.4em;
    color: #cc7846;
    background: #fff4e3;
    border-radius: 50%;
    padding: 17px 18px 14px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
    box-shadow: 0 2px 8px rgba(200,120,70,0.06);
}

.exp-details {
    flex: 1;
    min-width: 0;
}

.exp-role {
    font-weight: 700;
    font-size: 1.14em;
    color: #333;
    margin-bottom: 2px;
}
.exp-place {
    font-size: 1.02em;
    color: #666;
    margin-bottom: 8px;
}
.exp-year {
    background: #eee5d2;
    color: #cc7846;
    font-size: 0.99em;
    padding: 2px 8px;
    border-radius: 8px;
    margin-left: 6px;
}
.exp-summary {
    font-size: 0.99em;
    color: #555;
    margin-top: 2px;
    line-height: 1.45;
}

/* Responsive design */
@media (max-width: 900px) {
    .experience-cards { flex-direction: column; gap: 20px; align-items: center; }
    .exp-card { max-width: 97vw; min-width: 220px; }
}

.exp-link { text-decoration: none; color: inherit; }
.exp-link:hover, .exp-link:focus { color: inherit; }
.exp-link .exp-card { cursor: pointer; }


  /* Modifying renovated exp section's exp-card bg color's dark mode version */
    body.dark-mode .exp-card {
        background: #232632;
        color: #ffd164;
        border: 1.5px solid #2d3242;
        box-shadow: 0 4px 18px rgba(80, 80, 130, 0.13);
    }
    body.dark-mode .exp-card .exp-icon {
        color: #ffd164;
        background: #353941;
    }
    body.dark-mode .exp-card .exp-role {
        color: #ffdb87;
    }
    body.dark-mode .exp-card .exp-place,
    body.dark-mode .exp-card .exp-summary,
    body.dark-mode .exp-year {
        color: #cc7846;
    }
    body.dark-mode .exp-link:focus .exp-card,
    body.dark-mode .exp-link:hover .exp-card {
        border-color: #ffb964;
        box-shadow: 0 2px 18px rgba(210, 150, 30, 0.14);
    }


.projects-showcase {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 36px;
    margin-top: 16px;
}

.project-card {
    background: #fff;
    width: 290px;
    min-height: 235px;
    border-radius: 16px;
    box-shadow: 0 2px 18px rgba(80,80,130,0.07);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: box-shadow 0.28s, transform 0.18s;
    position: relative;
}

.project-card:hover {
    box-shadow: 0 6px 24px rgba(60,80,140,0.17);
    transform: translateY(-6px) scale(1.03);
    z-index: 2;
}

.project-img {
    height: 140px;
    width: 100%;
    background-size: cover;
    background-position: center;
    transition: filter 0.25s;
    filter: brightness(1) contrast(1.03);
}

.project-card:hover .project-img {
    filter: brightness(0.62) blur(1.2px) grayscale(0.1);
}

.project-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: transparent;
    padding: 16px 18px 14px 18px;
    transition: background 0.2s;
    position: relative;
    min-height: 80px;
}

.project-title {
    font-size: 1.13em;
    font-weight: 700;
    color: #2255aa;
    margin-bottom: 6px;
    letter-spacing: 0.01em;
    transition: color 0.15s;
}
.project-desc {
    font-size: 0.97em;
    color: #252830;
    line-height: 1.45;
    opacity: 0.83;
    transition: color 0.13s;
}
.project-card:hover .project-title {
    color: #cc7846;
}
.project-card:hover .project-info {
    background: rgba(255,255,255,0.72);
}

@media (max-width: 1000px) {
    .projects-showcase { gap: 18px; }
    .project-card { width: 94vw; max-width: 390px; }
}
@media (max-width: 600px) {
    .projects-showcase { gap: 8vw; }
    .project-card { width: 97vw; min-width: 0; }
    .project-img { height: 33vw; min-height: 110px; }
}

body.dark-mode .project-card {
    background: #1f2129;
    box-shadow: 0 2px 18px rgba(50,50,90,0.16);
}
body.dark-mode .project-title {
    color: #ffdb87;
}
body.dark-mode .project-desc {
    color: #ebebee;
}
body.dark-mode .project-card:hover .project-title {
    color: #ffb964;
}
body.dark-mode .project-card:hover .project-info {
    background: rgba(30, 30, 38, 0.79);
}