body{
background:#F7F1EA;
font-family:Poppins,sans-serif;
}

/* Hero */

.hero{
padding:30px 0;
}

.hero h1{
font-family:Playfair Display;
font-size:65px;
font-weight:700;
}

.hero p{
letter-spacing:3px;
color:#C69A54;
}

/* Filter */

.filter-btn{
margin:5px;
border-radius:30px;
padding:10px 30px;
border:1px solid #C69A54;
background:white;
}

.filter-btn:hover{
background:#C69A54;
color:#fff;
}

/* Featured */

.featured{
background:white;
border-radius:20px;
overflow:hidden;
box-shadow:0 10px 25px rgba(0,0,0,.08);
margin-bottom:50px;
}

.featured img{
height:500px;
width:100%;
object-fit:cover;
}

.project-info{
padding:35px;
}

.project-info h3{
font-family:Playfair Display;
font-size:40px;
}

.project-info a{
color:#C69A54;
font-weight:600;
}

/* Cards */

.project-card{
height: fit-content !important;
background:white;
border:none;
border-radius:20px;
overflow:hidden;
margin-bottom:30px;
transition:.4s;
box-shadow:0 8px 18px rgba(0,0,0,.08);
}

.project-card:hover{
transform:translateY(-8px);
}

.project-card img{
height:260px;
object-fit:cover;
}

.card-body h5{
font-family:Playfair Display;
}


/* CTA */

.cta{

padding:90px 0;
text-align:center;
}

.btn-gold{

background:#C69A54;
color:white;
padding:15px 35px;
border-radius:40px;
}

.btn-gold:hover{
background:#b48745;
color:white;
}

#portfolio-flters{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:18px;
    margin:50px 0;
    padding:0;
}

#portfolio-flters li{
    list-style:none;
    padding:10px 24px;
    background:#fff;
    color:#555;
    border-radius:30px;
    cursor:pointer;
    font-size:15px;
    font-weight:600;
    transition:.35s;
    border:1px solid transparent;
    box-shadow:0 8px 20px rgba(0,0,0,.06);
}

#portfolio-flters li:hover{
    transform:translateY(-4px);
    color:#c89a55;
}

#portfolio-flters li.active{
    background:linear-gradient(135deg,#c89a55,#e4c88d);
    color:#fff;
    box-shadow:0 12px 30px rgba(200,154,85,.35);
}

.banner-box{
    background:
    linear-gradient(
        to bottom,
        rgba(0,0,0,.80) 0%,
        rgba(0,0,0,.45) 30%,
        rgba(0,0,0,.25) 100%
    ),
        url('../img/service-banner.jpg');

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    padding:120px 0;
}

.banner-box h1{
    font-size:60px;
    font-weight:700;
    color:#eee;
    margin-bottom:15px;
    line-height:1.1;
}

.banner-box p{
    color:#eee;
    font-size:17px;
    line-height:1.8;
    margin-bottom:20px;
}

.banner-breadcrumb{
    font-size:15px;
}

.banner-breadcrumb a{
    color:#C7A46A;
    text-decoration:none;
}

.banner-breadcrumb span{
    margin:0 5px;
    color:#eee;
}

@media(max-width:991px){

    .page-banner{
        padding:90px 0;
    }

    .banner-box{
        max-width:100%;
        padding:30px;
    }

    .banner-box h1{
        font-size:45px;
    }
}

@media(max-width:767px){

    .page-banner{
        padding:70px 0;
    }

    .banner-box{
        padding:25px;
    }

    .banner-box h1{
        font-size:34px;
    }

    .banner-box p{
        font-size:15px;
    }
    .project-card{
    height:fit-content !important;
    }
    .project-card img{
    height:fit-content !important;
    width:100%;
    object-fit:cover;
}
}