/*==================================================
PORTFOLIO PAGE
==================================================*/


/*==================================================
Page Hero
==================================================*/

.portfolio-hero{

    background:
        linear-gradient(
            rgba(91,44,131,.92),
            rgba(91,44,131,.92)
        ),
        url("../images/portfolio/portfolio-banner.jpg")
        center center / cover;

    color:#fff;

    padding:120px 0 100px;

}

.portfolio-hero h1{

    color:#fff;

    font-size:56px;

    font-weight:800;

}

.portfolio-hero p{

    color:#f5f5f5;

}


/*==================================================
Portfolio Section
==================================================*/

.portfolio{

    background:#fafafa;

}


/*==================================================
Portfolio Grid
==================================================*/

.portfolio-grid{

    display:grid;

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

    gap:30px;

}


/*==================================================
Portfolio Item
==================================================*/

.portfolio-item{

    position:relative;

    overflow:hidden;

    border-radius:18px;

    cursor:pointer;

    box-shadow:var(--shadow);

    transition:var(--transition);

}

.portfolio-item:hover{

    box-shadow:var(--shadow-lg);

}


/*==================================================
Portfolio Image
==================================================*/

.portfolio-item img{

    width:100%;

    height:300px;

    object-fit:cover;

    transition:.5s;

}

.portfolio-item:hover img{

    transform:scale(1.12);

}


/*==================================================
Overlay
==================================================*/

.portfolio-overlay{

    position:absolute;

    inset:0;

    background:rgba(91,44,131,.75);

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    color:#fff;

    opacity:0;

    transition:var(--transition);

    padding:20px;

}

.portfolio-item:hover .portfolio-overlay{

    opacity:1;

}

.portfolio-overlay h4{

    color:#fff;

    margin-bottom:10px;

}

.portfolio-overlay p{

    color:#fff;

    margin-bottom:20px;

}


/*==================================================
View Button
==================================================*/

.portfolio-btn{

    background:var(--gold);

    color:#fff;

    padding:10px 22px;

    border-radius:50px;

    font-weight:600;

    transition:var(--transition);

}

.portfolio-btn:hover{

    background:#fff;

    color:var(--primary);

}


/*==================================================
Portfolio Filters
==================================================*/

.portfolio-filter{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:15px;

    margin-bottom:50px;

}

.portfolio-filter button{

    background:#fff;

    border:1px solid #ddd;

    color:var(--primary);

    padding:10px 22px;

    border-radius:50px;

    transition:var(--transition);

}

.portfolio-filter button:hover,

.portfolio-filter button.active{

    background:var(--primary);

    color:#fff;

    border-color:var(--primary);

}


/*==================================================
Animation
==================================================*/

.portfolio-item{

    animation:fadeUp .8s ease;

}