@charset "utf-8";
/* CSS Document */
/* =========================================================
   WEBSITEDEVELOP.IN
   PORTFOLIO PAGE CSS
========================================================= */


/* ==========================
   PORTFOLIO HERO
========================== */

.hero{
    padding:100px 0 85px;
    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(37,99,235,.13),
            transparent 30%
        ),
        #f8fafc;
}

.hero-tag{
    color:var(--primary);
    font-size:13px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:1px;
}

.hero h1{
    font-size:55px;
    line-height:1.1;
    font-weight:800;
    letter-spacing:-1.5px;
    margin-top:12px;
}

.hero h1 span{
    color:var(--primary);
}

.hero p{
    max-width:720px;
    margin:22px auto 0;
    color:var(--text);
    font-size:18px;
}


/* ==========================
   PORTFOLIO FILTER
========================== */

.filter-wrapper{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:45px;
}

.filter-btn{
    border:1px solid var(--border);
    background:#fff;
    color:#475569;
    padding:10px 20px;
    border-radius:50px;
    font-size:14px;
    font-weight:600;
    transition:.3s;
}

.filter-btn:hover,
.filter-btn.active{
    background:var(--primary);
    border-color:var(--primary);
    color:#fff;
}


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

.project-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:20px;
    overflow:hidden;
    height:100%;
    transition:.35s;
}

.project-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 45px rgba(15,23,42,.10);
    border-color:#bfdbfe;
}


/* ==========================
   PROJECT IMAGE
========================== */

.project-image{
    height:250px;
    background:#e2e8f0;
    position:relative;
    overflow:hidden;
}

.project-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.5s;
}

.project-card:hover .project-image img{
    transform:scale(1.05);
}


/* ==========================
   PROJECT CATEGORY
========================== */

.project-category{
    position:absolute;
    left:18px;
    top:18px;
    background:#fff;
    color:var(--primary);
    padding:6px 12px;
    border-radius:30px;
    font-size:11px;
    font-weight:800;
    box-shadow:0 5px 15px rgba(0,0,0,.08);
}


/* ==========================
   PROJECT CONTENT
========================== */

.project-content{
    padding:25px;
}

.project-content h3{
    font-size:20px;
    font-weight:700;
    margin-bottom:9px;
}

.project-content p{
    color:var(--text);
    font-size:14px;
    margin-bottom:18px;
}


/* ==========================
   PROJECT TAGS
========================== */

.project-tags{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-bottom:20px;
}

.project-tags span{
    background:#f1f5f9;
    color:#475569;
    padding:5px 9px;
    border-radius:5px;
    font-size:11px;
    font-weight:600;
}


/* ==========================
   VIEW PROJECT
========================== */

.view-project{
    color:var(--primary);
    font-size:13px;
    font-weight:700;
}

.view-project i{
    transition:.3s;
}

.project-card:hover .view-project i{
    transform:translateX(4px);
}


/* ==========================
   PORTFOLIO STATS
========================== */

.stats{
    background:#0f172a;
    color:#fff;
    padding:60px 0;
}

.stat{
    text-align:center;
}

.stat h3{
    font-size:38px;
    font-weight:800;
    margin-bottom:4px;
}

.stat p{
    color:#94a3b8;
    margin:0;
    font-size:14px;
}


/* ==========================
   CASE STUDY
========================== */

.case-study{
    background:#fff;
    border:1px solid var(--border);
    border-radius:22px;
    padding:40px;
}

.case-study-icon{
    width:65px;
    height:65px;
    background:#eff6ff;
    color:var(--primary);
    border-radius:15px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    margin-bottom:20px;
}

.case-study h3{
    font-size:23px;
    font-weight:800;
}

.case-study p{
    color:var(--text);
    font-size:14px;
}

.case-list{
    list-style:none;
    padding:0;
}

.case-list li{
    margin-bottom:9px;
    color:#475569;
    font-size:14px;
}

.case-list i{
    color:#22c55e;
    margin-right:7px;
}


/* ==========================
   PORTFOLIO MOBILE
========================== */

@media(max-width:767px){

    .hero{
        padding:70px 0;
    }

    .hero h1{
        font-size:38px;
    }

    .hero p{
        font-size:16px;
    }

    .project-image{
        height:220px;
    }

    .case-study{
        padding:28px;
    }

}