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

.projects{

    padding:100px 0;

    background:#000;

    overflow:hidden;

}

.projects .section-tag{

    display:block;

    text-align:center;

}

.projects h2{

    text-align:center;

    color:#fff;

    font-size:3rem;

    margin:18px 0 55px;

}

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

.projects .section-tag,
.projects h2,
.projects-slider,
.projects-nav{

    opacity:0;

    transform:translateY(40px);

    transition:
        opacity .8s cubic-bezier(.22,1,.36,1),
        transform .8s cubic-bezier(.22,1,.36,1);

}

.projects.active .section-tag{

    opacity:1;

    transform:translateY(0);

    transition-delay:.10s;

}

.projects.active h2{

    opacity:1;

    transform:translateY(0);

    transition-delay:.25s;

}

.projects.active .projects-slider{

    opacity:1;

    transform:translateY(0);

    transition-delay:.45s;

}

.projects.active .projects-nav{

    opacity:1;

    transform:translateY(0);

    transition-delay:.65s;

}


/* ===========================
   SLIDER
=========================== */

.projects-slider{

    overflow:hidden;

    width:100%;

}

.projects-track{

display:flex;

flex-wrap:nowrap;

gap:35px;

transition:transform .6s ease;

touch-action:pan-y;

user-select:none;

cursor:grab;

}

.projects-track:active{

    cursor:grabbing;

}

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

.project-card{

    flex:0 0 calc((100% - 35px) / 2);

    position:relative;

    aspect-ratio:16/10;

    border-radius:24px;

    overflow:hidden;

    background:#111;

    cursor:pointer;

    transition:
        transform .35s ease,
        box-shadow .35s ease;

    -webkit-user-drag:none;

    user-select:none;

}

.project-card:hover{

    transform:translateY(-6px);

    box-shadow:0 25px 60px rgba(0,0,0,.45);

}

.project-card video{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    border-radius:inherit;

    background:#111;

    transition:transform 1s ease;

}

.project-card:hover video{

    transform:scale(1.08);

}

.project-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    border-radius:inherit;

    background:#111;

    transition:transform 1s ease;

}

.project-card:hover img{

    transform:scale(1.08);

}

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

.project-overlay{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    padding:80px 35px 30px;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.92),
        rgba(0,0,0,.60),
        transparent
    );

}

.project-overlay span{

    display:block;

    color:var(--primary-color);

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:.8rem;

    margin-bottom:10px;

}

.project-overlay h3{

    color:#fff;

    font-size:2rem;

    margin-bottom:8px;

}

.project-overlay p{

    color:#d2d2d2;

    font-size:.95rem;

}

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

.projects-nav{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-top:45px;

}

.projects-nav button{

    padding:14px 28px;

    border:1px solid rgba(255,255,255,.12);

    background:transparent;

    color:#fff;

    border-radius:100px;

    cursor:pointer;

    transition:.3s ease;

}

.projects-nav button:hover{

    background:var(--primary-color);

    border-color:var(--primary-color);

}

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

@media (max-width:992px){

    .projects{

        padding:80px 0;

    }

    .projects h2{

        font-size:2.4rem;

        margin-bottom:45px;

    }

    .projects-track{

        gap:24px;

    }

    .project-card{

        flex:0 0 calc((100% - 24px) / 2);

    }

    .project-overlay{

        padding:60px 24px 24px;

    }

    .project-overlay h3{

        font-size:1.5rem;

    }

}

@media (max-width:768px){

    .projects{

        padding:70px 0;

    }

    .projects h2{

        font-size:2rem;

        margin-bottom:35px;

    }

    .projects-track{

        gap:20px;

    }

    .project-card{

        flex:0 0 100%;

    }

    .project-overlay{

        padding:45px 20px 20px;

    }

    .project-overlay span{

        font-size:.72rem;

    }

    .project-overlay h3{

        font-size:1.35rem;

    }

    .project-overlay p{

        font-size:.9rem;

    }

    .projects-nav{

        gap:14px;

        margin-top:30px;

    }

    .projects-nav button{

        flex:1;

        padding:14px 0;

    }

}