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

.project-hero{

    position:relative;

    width:100%;

    height:95vh;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

}

.project-hero .hero-image{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    animation:heroZoom 8s ease forwards;

}

@keyframes heroZoom{

    from{

        transform:scale(1.08);

    }

    to{

        transform:scale(1);

    }

}

.hero-overlay{

    position:absolute;

    inset:0;

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

    z-index:1;

}

.hero-content{

    position:relative;

    z-index:5;

    width:min(900px,90%);

    text-align:center;

    color:#fff;

}

.project-category{

    display:inline-block;

    margin-bottom:24px;

    font-size:15px;

    font-weight:500;

    letter-spacing:4px;

    text-transform:uppercase;

    opacity:.9;

}

.project-title{

    margin:0;

    font-size:clamp(42px,6vw,72px);

    font-weight:300;

    line-height:1.1;

    letter-spacing:1px;

}

.scroll-down{

    position:absolute;

    left:50%;

    bottom:42px;

    transform:translateX(-50%);

    width:42px;

    height:42px;

    border:none;

    background:transparent;

    cursor:pointer;

    z-index:10;

    padding:0;

}

.scroll-down span{

    display:block;

    width:18px;

    height:18px;

    margin:auto;

    border-right:2px solid #fff;

    border-bottom:2px solid #fff;

    transform:rotate(45deg);

    animation:scrollArrow 1.8s infinite;

}

@keyframes scrollArrow{

    0%{

        transform:rotate(45deg) translate(0,0);

        opacity:0;

    }

    40%{

        opacity:1;

    }

    100%{

        transform:rotate(45deg) translate(10px,10px);

        opacity:0;

    }

}

@media(max-width:991px){

    .project-hero{

        height:88vh;

    }

}

@media(max-width:767px){

    .project-hero{

        height:80vh;

    }

    .project-category{

        font-size:13px;

        letter-spacing:3px;

    }

}