/* =====================================
   PROJECTS
===================================== */

#projects{

    position: relative;

    padding: 120px 0 200px;

}

.section-title{

    text-align: center;

    margin-bottom: 100px;

}

#projects-container{

    position: relative;

    display: flex;

    flex-direction: column;

}

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

.project-card{

    position: sticky;

    top: 80px;

    height: 82vh;

    background: rgba(255, 255, 255, 0.85);

    backdrop-filter: blur(16px);

    -webkit-backdrop-filter: blur(16px);

    border: 1px solid #e5e7eb;

    border-radius: 32px;

    padding: 40px;

    display: flex;

    flex-direction: column;

    box-shadow: 0 20px 40px rgba(0,0,0,.05);

    transition: .35s ease;

    box-sizing: border-box;

    overflow: hidden;

}

/* Overlap */

.project-card:not(:first-child){

    margin-top: -20vh;

}

/* Hover */

.project-card:hover{

    transform: translateY(-8px);

}

/* ===========================
   VIDEO
=========================== */

.project-video{

    width:100%;

    height:100%;

    max-height:520px;

    overflow:hidden;

    border-radius:24px;

    background:#f5f5f5;

    border:1px solid #ececec;

}

.project-video video,
.project-video img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

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

.project-content{

    display:flex;

    flex-direction:column;

    justify-content:center;

    height:100%;

}

.project-category{

    font-size:.9rem;

    font-weight:600;

    color:#777;

    margin-bottom:10px;

}

.project-content h2{

    font-size:4rem;

    line-height:1;

    margin-bottom:20px;

    color:#111;

}

.project-content p{

    color:#666;

    line-height:1.8;

    margin-bottom:35px;

}

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

.project-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.status{

    padding:8px 18px;

    border-radius:999px;

    font-size:.85rem;

    font-weight:600;

}

.status.completed{

    background:#ECFDF3;

    color:#027A48;

}

.status.building{

    background:#FFF7E6;

    color:#B54708;

}

.status.coming{

    background:#EEF4FF;

    color:#175CD3;

}

.project-card-inner-link {
    text-decoration: none;
    color: inherit;
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: 50px;
    align-items: center;
    width: 100%;
    height: 100%;
}

.project-explore-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    background: #0f172a;
    color: #ffffff;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.project-card:hover .project-explore-btn {
    background: #2563eb;
    transform: translateX(4px);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
}