/* =========================================
   ADTROP PROJECTS PAGE
========================================= */

.adt-project-hero{
    padding:120px 0 80px;
    background:#0b0b0d;
    text-align:center;
    position:relative;
    overflow:hidden;
}

.adt-project-hero::before{
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    background:radial-gradient(circle,rgba(253,184,19,.15),transparent 70%);
    top:-180px;
    right:-150px;
}

.adt-project-tag{
    color:#FDB813;
    font-size:13px;
    letter-spacing:3px;
    font-weight:700;
    display:block;
    margin-bottom:18px;
}

.adt-project-hero h1{
    color:#fff;
    font-size:58px;
    font-weight:800;
    margin-bottom:18px;
}

.adt-project-hero p{
    color:#bdbdbd;
    max-width:650px;
    margin:auto;
    line-height:1.8;
}

/* ================= Grid ================= */

.adt-project-section{
    background:#0b0b0d;
    padding:80px 0 110px;
}

.adt-project-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

/* ================= Card ================= */

.adt-project-card{
    background:#131313;
    border-radius:24px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.08);
    transition:.35s;
}

.adt-project-card:hover{
    transform:translateY(-10px);
    border-color:#FDB813;
    box-shadow:0 20px 40px rgba(253,184,19,.15);
}

.adt-project-image{
    position:relative;
    overflow:hidden;
}

.adt-project-image img{
    width:100%;
    height:240px;
    object-fit:cover;
    transition:.5s;
}

.adt-project-card:hover .adt-project-image img{
    transform:scale(1.08);
}

.adt-project-category{
    position:absolute;
    top:18px;
    left:18px;
    background:#FDB813;
    color:#111;
    padding:8px 15px;
    border-radius:30px;
    font-size:12px;
    font-weight:700;
}

.adt-project-content{
    padding:24px;
}

.adt-project-content h3{
    color:#fff;
    font-size:24px;
    margin-bottom:12px;
}

.adt-project-content p{
    color:#9ca3af;
    line-height:1.8;
    font-size:15px;
    min-height:70px;
}

.adt-project-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:25px;
    border-top:1px solid rgba(255,255,255,.08);
    padding-top:20px;
}

.adt-project-footer span{
    color:#FDB813;
    font-size:14px;
}

.adt-project-footer a{
    color:#fff;
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}

.adt-project-footer a i{
    margin-left:8px;
    transition:.3s;
}

.adt-project-footer a:hover{
    color:#FDB813;
}

.adt-project-footer a:hover i{
    transform:translateX(5px);
}

/* ================= Responsive ================= */

@media(max-width:1100px){

    .adt-project-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .adt-project-hero h1{
        font-size:44px;
    }

}

@media(max-width:768px){

    .adt-project-grid{
        grid-template-columns:1fr;
    }

    .adt-project-hero{
        padding:90px 0 70px;
    }

    .adt-project-hero h1{
        font-size:34px;
    }

    .adt-project-image img{
        height:220px;
    }

}
/* Featured Badge */

.featured-label{
    position:absolute;
    top:12px;
    right:12px;
    background:#16a34a;
    color:#fff;
    padding:6px 12px;
    border-radius:20px;
    font-size:12px;
    font-weight:700;
}

/* Filter */

.adt-project-filter{
    background:#0B0B0D;
    padding:20px 0 35px;
    text-align:center;
}

.filter-btn{
    background:#171717;
    border:1px solid rgba(255,255,255,.08);
    color:#ddd;
    padding:12px 22px;
    border-radius:30px;
    margin:6px;
    cursor:pointer;
    transition:.3s;
}

.filter-btn.active,
.filter-btn:hover{
    background:#FDB813;
    color:#111;
    border-color:#FDB813;
}

/* Empty State */

.no-projects{
    text-align:center;
    color:#fff;
    padding:80px 20px;
    grid-column:1/-1;
}

.no-projects i{
    font-size:60px;
    color:#FDB813;
    margin-bottom:20px;
}