.project-number{
    position:absolute;
    top:20px;
    right:20px;
    width:45px;
    height:45px;
    background:#1e8042;
    color:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    font-size:26px;
    z-index:4;
    box-shadow:0 5px 15px rgba(0,0,0,0.2);
}

/* Tablet */
@media (max-width:991px){
    .project-number{
        width:40px;
        height:40px;
        font-size:15px;
        top:15px;
        right:15px;
    }
}

/* Mobile */
@media (max-width:576px){
    .project-number{
        width:35px;
        height:35px;
        font-size:14px;
        top:12px;
        right:12px;
    }
}

/* Equal size only for project images */
.projects-grid .hover > img{
    width: 100%;
    height: 400px;
    object-fit: cover;
}

/* Responsive */
@media (max-width:991px){
    .projects-grid .hover > img{
        height:240px;
    }
}

@media (max-width:576px){
    .projects-grid .hover > img{
        height:200px;
    }
}
/* Project Info Cards */

.project-box{
    border:1px solid #eaeaea;
    padding:30px 20px;
    border-radius:8px;
    text-align:center;
    height:100%;
    transition:all .3s ease;
    background:#fff;
}

.project-box:hover{
    transform:translateY(-5px);
    box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

/* Icon */

.project-icon{
    width:60px;
    height:60px;
    line-height:60px;
    margin:0 auto 15px auto;
    border-radius:50%;
    background:var(--accent-color);
    color:#fff;
    font-size:22px;
}

/* Heading */

.project-box h4{
    font-size:16px;
    font-weight:600;
    margin-bottom:8px;
}

/* Text */

.project-box p{
    font-size:15px;
    margin:0;
    color:#555;
}