/*==================================================
    TOP HIGHLIGHTED PROJECTS
    PART 3.2
    PROJECT CARD + IMAGE + OVERLAY
==================================================*/

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

.project-card{

    position:relative;

    min-width:calc(50% - 12px);

    border-radius:24px;

    overflow:hidden;

    background:#ffffff;

    box-shadow:0 8px 35px rgba(0,0,0,.08);

    transition:all .35s ease;

    cursor:pointer;

}

.project-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 50px rgba(0,0,0,.15);

}

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

.card-image{

    position:relative;

    width:100%;

    height:460px;

    overflow:hidden;

    border-radius:24px;

}

.card-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    transition:transform .8s ease;

    display:block;

}

.project-card:hover .card-image img{

    transform:scale(1.08);

}

/*==============================
    DARK OVERLAY
==============================*/

.image-overlay{

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:100%;

    background:linear-gradient(
        180deg,
        rgba(0,0,0,.05) 0%,
        rgba(0,0,0,.12) 35%,
        rgba(0,0,0,.35) 60%,
        rgba(0,0,0,.88) 100%
    );

    transition:.35s;

}

.project-card:hover .image-overlay{

    background:linear-gradient(
        180deg,
        rgba(0,0,0,.08) 0%,
        rgba(0,0,0,.18) 30%,
        rgba(0,0,0,.45) 60%,
        rgba(0,0,0,.92) 100%
    );

}

/*==============================
    IMAGE SHINE
==============================*/

.card-image::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:60%;

    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );

    transform:skewX(-25deg);

    z-index:5;

}

.project-card:hover .card-image::before{

    animation:shine 1.1s linear;

}

@keyframes shine{

    100%{

        left:150%;

    }

}

/*==============================
    TOP BADGES
==============================*/

.card-badge{

    position:absolute;

    top:18px;

    left:18px;

    z-index:10;

    display:flex;

    gap:10px;

    flex-wrap:wrap;

}

.badge{

    display:flex;

    align-items:center;

    justify-content:center;

    height:32px;

    padding:0 14px;

    border-radius:40px;

    font-size:13px;

    font-weight:500;

    color:#ffffff;

    backdrop-filter:blur(12px);

}

.badge.primary{

    background:#5B3DF5;

}

.badge.success{

    background:#0BA360;

}

.badge.warning{

    background:#FF9800;

}

.badge.dark{

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

}

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

.favorite-btn{

    position:absolute;

    top:18px;

    right:18px;

    width:46px;

    height:46px;

    border-radius:50%;

    background:rgba(255,255,255,.15);

    backdrop-filter:blur(15px);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#ffffff;

    z-index:10;

    transition:.35s;

}

.favorite-btn:hover{

    background:#ffffff;

    color:#ff3d57;

}

.favorite-btn i{

    font-size:18px;

}

/*==============================
    IMAGE LABEL
==============================*/

.image-label{

    position:absolute;

    bottom:22px;

    right:22px;

    background:rgba(255,255,255,.16);

    backdrop-filter:blur(10px);

    color:#ffffff;

    font-size:13px;

    padding:8px 14px;

    border-radius:30px;

    display:flex;

    align-items:center;

    gap:8px;

    z-index:10;

}

.image-label i{

    font-size:12px;

}

/*==============================
    IMAGE GRADIENT
==============================*/

.card-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.72),
        transparent 45%
    );

}

/*==============================
    RESPONSIVE
==============================*/

@media(max-width:1200px){

.card-image{

height:420px;

}

}

@media(max-width:992px){

.card-image{

height:390px;

}

}

@media(max-width:768px){

.project-card{

min-width:100%;

}

.card-image{

height:330px;

}

.card-badge{

top:15px;

left:15px;

}

.favorite-btn{

top:15px;

right:15px;

width:42px;

height:42px;

}

}

@media(max-width:576px){

.card-image{

height:280px;

}

.badge{

font-size:11px;

padding:0 10px;

height:28px;

}

.image-label{

font-size:12px;

padding:6px 12px;

}

.favorite-btn{

width:38px;

height:38px;

}

}