.project-card {
    position: relative;
    width: 100%;
    height: 350px;

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

    overflow: hidden;
    border-radius: 10px;

    transition: transform 0.4s ease;
}

.project-card::before {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.75),
        rgba(0, 0, 0, 0.05)
    );

    z-index: 1;
}

.project-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    padding: 25px;

    z-index: 2;
}

.project-overlay h5 {
    margin: 0;
    color: #fff;
    font-size: 22px;
    font-weight: 600;
}

.project-card:hover {
    transform: scale(1.03);
}

.project-card:hover::before {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.85),
        rgba(0, 0, 0, 0.15)
    );
}






















.project-background {
    width: 100%;
    height: 450px;

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

    border-radius: 10px;
    overflow: hidden;

    cursor: pointer;
    transition: transform 0.4s ease;
}

.project-background:hover {
    transform: scale(1.02);
}