/* ==========================
   PROJECTS
========================== */

.projects{
    padding:100px 5%;
    background:#111827;
}

.section-title{
    text-align:center;
    margin-bottom:60px;
}

.section-title h5{
    color:#38bdf8;
    letter-spacing:3px;
    margin-bottom:10px;
}

.section-title h2{
    font-size:46px;
    margin-bottom:15px;
}

.section-title p{
    color:#94a3b8;
}

.project-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:30px;
}

.project-card{

    background:#0f172a;

    border-radius:18px;

    overflow:hidden;

    border:1px solid rgba(255,255,255,.08);

    transition:.35s;

    position: relative;

}

.project-card::before{
    pointer-events: none;
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    padding:1px;
    background:linear-gradient(
        135deg,
        rgba(56,189,248,.8),
        rgba(124,58,237,.8)
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;
            mask-composite:exclude;

    opacity:0;
    transition:.4s;
}

.project-card:hover::before{
    opacity:1;
}

.project-card:hover{

    transform:translateY(-12px);

    border-color:#38bdf8;

    box-shadow:
        0 20px 45px rgba(0,0,0,.35),
        0 0 0 1px rgba(56,189,248,.25);

}

.project-image{

    position:relative;

    aspect-ratio:16/10;
    height:auto;

    overflow:hidden;

    background:#111827;

}

.project-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;

}

.project-card:hover .project-image img{

    transform:scale(1.08);

}

.project-content{

    padding:20px;
     position: relative;
    z-index: 2;

}

.project-content h3{

    margin-bottom:15px;

}

.project-tag{

    display:inline-block;

    padding:8px 15px;

    border-radius:30px;

    font-size:13px;

    background:#21759B;

    color:white;

    margin-bottom:20px;

}

.project-buttons{

    display:flex;

    gap:15px;

}

.project-buttons a{

    flex:1;

    text-align:center;

    text-decoration:none;

    padding:12px;

    border-radius:10px;

    background:#38bdf8;

    color:white;

    font-weight:600;

    transition:.3s;

}

.project-buttons a:hover{

    background:#0ea5e9;

}

.project-category{

    display:inline-flex;

    align-items:center;

    padding:7px 14px;

    border-radius:50px;

    font-size:13px;

    font-weight:600;

    margin-bottom:18px;

}

.shopify{

    background:rgba(149,191,71,.18);

    color:#95BF47;

}

.wordpress{

    background:rgba(33,117,155,.18);

    color:#21759B;

}

.project-link{

    position: relative;
    z-index: 5;

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-top:18px;

    text-decoration:none;

    color:#38bdf8;

    font-weight:600;

    transition:.3s;

}

.project-link i{

    transition:.3s;

}

.project-link:hover i{

    transform:translateX(6px);

}

.project-content p{

    color:#94a3b8;

    line-height:1.7;

    margin-top:10px;

    min-height:70px;

}

.project-tags{
    display:flex;
    align-items:flex-start;
    gap:8px;
    margin-bottom:10px;
    flex-wrap:nowrap;
}

.project-type{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    height:36px;

    padding:0 14px;

    border-radius:999px;

    white-space:nowrap;

    font-size:12px;
    font-weight:600;
}

.agency{

    background:#FFE8CC;

    color:#D97706;

}

.hotel{

    background:#F3E8FF;

    color:#7E22CE;

}

.ecommerce{

    background:#DCFCE7;

    color:#15803D;

}

.business{

    background:#DBEAFE;

    color:#2563EB;

}

.spiritual{

    background:#FCE7F3;

    color:#BE185D;

}


.project-type,
.project-category{
    display: flex;
    align-items: center;
    justify-content: center;

    width: 110px;          /* Dono badges same width */
    height: 36px;

    border-radius: 999px;

    font-size: 12px;
    font-weight: 600;

    padding: 0;
    white-space: nowrap;
    flex-shrink: 0;
}

.project-image{
    position: relative;
    overflow: hidden;
}

.project-image::after{
    pointer-events: none;
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(15,23,42,.85) 0%,
        rgba(15,23,42,.2) 45%,
        transparent 100%
    );
    opacity: 0;
    transition: .35s ease;
}

.project-card:hover .project-image::after{
    opacity: 1;
}