/* ======================================================
   DME Engineering Portfolio
====================================================== */

:root{

    --primary:#f4a024;          /* keep your orange */
    --secondary:#17365d;        /* navy blue */

    --text:#2b2b2b;
    --light:#f8f9fb;
    --border:#e6e9ef;

    --shadow:0 15px 40px rgba(0,0,0,.12);

}

=================================================== */

body{

    /* font-family:'Rubik',sans-serif; */
    font-family: var(--font-body);
    background:#fafafa;
    color:var(--text);

}

/* ====================================================== */

h1,h2,h3,h4{

    /* font-family:'Oswald',sans-serif; */
    font-family: var(--font-heading);
    letter-spacing:.5px;

}

/* ======================================================
   HERO
====================================================== */

.portfolio-hero{

    background:linear-gradient(135deg,var(--secondary),#0f2340);

    color:white;

    text-align:center;

    padding:90px 20px;

}

.portfolio-hero h1{
    color: white;

    font-size:58px;
    margin-bottom:15px;

}

.portfolio-hero p{

    font-size:20px;
    opacity:.9;

}

/* ======================================================
   SECTION
====================================================== */

.project-section{

    padding:80px 0;

}

.section-title{

    text-align:center;
    margin-bottom:55px;

}

.section-title h2{

    color:var(--secondary);

}

.section-title p{

    color:#666;

}

/* ======================================================
   GRID
====================================================== */

.project-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(320px,1fr));

    gap:35px;

}

/* ======================================================
   CARD
====================================================== */

.project-card{

    background:white;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 6px 18px rgba(0,0,0,.08);

    transition:.35s;

    cursor:pointer;

    display:flex;

    flex-direction:column;

}

.project-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}

.project-image{

    height:240px;

    overflow:hidden;

}

.project-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.45s;

}

.project-card:hover img{

    transform:scale(1.06);

}

.card-body{

    padding:28px;

}

.project-category{

    display:inline-block;

    background:var(--primary);

    color:white;

    padding:6px 14px;

    border-radius:40px;

    font-size:.8rem;

    margin-bottom:18px;

}

.card-body h3{

    color:var(--secondary);

    margin-bottom:15px;

}

.card-body p{

    color:#666;

    line-height:1.7;

    min-height:80px;

}

/* ======================================================
   BUTTON
====================================================== */

.read-more{
    font-family: var(--font-button);

    margin-top:auto;

    border:none;

    background:none;

    color:var(--primary);

    font-weight:600;

    transition:.25s;

}

.project-card:hover .read-more{

    transform:translateX(8px);

}

/* ======================================================
   MODAL
====================================================== */

.project-modal{

    position:fixed;

    inset:0;

    display:none;

    z-index:9999;

}

.project-modal.active{

    display:block;

}

.modal-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.75);

    backdrop-filter:blur(4px);

}

.modal-window{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    width:min(1100px,94vw);

    max-height:92vh;

    overflow:auto;

    background:white;

    border-radius:18px;

    animation:modalIn .35s ease;

}

/* ====================================================== */

@keyframes modalIn{

from{

opacity:0;

transform:translate(-50%,-46%);

}

to{

opacity:1;

transform:translate(-50%,-50%);

}

}

/* ======================================================
   CLOSE
====================================================== */

.close-modal{

    position:sticky;

    top:18px;

    float:right;

    margin:18px;

    width:46px;

    height:46px;

    border:none;

    border-radius:50%;

    background:var(--secondary);

    color:white;

    z-index:50;

    transition:.25s;

}

.close-modal:hover{

    background:var(--primary);

}

/* ======================================================
   HERO IMAGE
====================================================== */

.modal-image{

    width:100%;

    height:420px;

    object-fit:cover;

}

/* ======================================================
   CONTENT
====================================================== */

.modal-content{

    padding:45px;

}

.overview{

    font-size:1.15rem;

    color:#666;

    margin-bottom:40px;

}

/* ======================================================
   SNAPSHOT
====================================================== */

.snapshot{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:18px;

    margin-bottom:45px;

}

.snapshot div{

    background:var(--light);

    padding:22px;

    border-left:5px solid var(--primary);

    border-radius:10px;

}

.snapshot small{

    display:block;

    color:#888;

    margin-bottom:6px;

}

.snapshot strong{

    color:var(--secondary);

}

/* ======================================================
   SECTIONS
====================================================== */

.content-section{

    margin-bottom:50px;

}

.content-section h3{

    color:var(--secondary);

    margin-bottom:18px;

}

.content-section i{

    color:var(--primary);

    margin-right:12px;

}

.content-section p{

    line-height:1.85;

    white-space:pre-line;

}

/* ======================================================
   RESULTS
====================================================== */

#modalResults{

    padding-left:22px;

}

#modalResults li{

    margin-bottom:12px;

}

/* ======================================================
   GALLERY
====================================================== */

.gallery{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(220px,1fr));

    gap:18px;

}

.gallery img{

    width:100%;

    border-radius:12px;

    transition:.3s;

    cursor:pointer;

}

.gallery img:hover{

    transform:scale(1.03);

}

/* ======================================================
   NAVIGATION
====================================================== */

.modal-nav{

    display:flex;

    justify-content:space-between;

    margin-top:50px;

}

.nav-btn{
    font-family: var(--font-button);

    border:none;

    background:var(--secondary);

    color:white;

    padding:14px 28px;

    border-radius:8px;

    transition:.25s;

}

.nav-btn:hover{

    background:var(--primary);

}

/* ======================================================
   FOOTER
====================================================== */

.portfolio-footer{

    margin-top:80px;

    background:#111;

    color:white;

    padding:50px 0;

}

.portfolio-footer .container{

    display:flex;

    justify-content:space-between;

    flex-wrap:wrap;

    gap:30px;

}

.footer-right{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.footer-right a{

    color:#ddd;

    text-decoration:none;

}

.footer-right a:hover{

    color:var(--primary);

}

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

@media(max-width:768px){

.portfolio-hero h1{

    font-size:40px;

}

.modal-window{

    width:100vw;

    height:100vh;

    max-height:none;

    border-radius:0;

}

.modal-image{

    height:250px;

}

.modal-content{

    padding:25px;

}

.snapshot{

    grid-template-columns:1fr;

}

.modal-nav{

    flex-direction:column;

    gap:15px;

}

.nav-btn{
    font-family: var(--font-button);

    width:100%;

}

}