.project-section-container {
    display: flex;
    flex-direction: column;
    /* gap: 30px; */
}

/* .project-section-container .project-header {

} */

.projects-container {
    display: grid;
    margin-block: 30px;
}

.project-card {
    display: grid;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background: var(--secondary-white);
    border-radius: var(--radius-20);
    /* margin: 2%; */
    padding: 15px 10px;

    perspective: 1000px;
    margin-inline: auto;
    max-width: 1200px;
}

.project-card:is(:hover, :focus-visible){
    transform: translateY(-7px);
    scale: 1.01;
}

.pro-img-container {
    height: 200px;
    overflow: hidden;
}


.pro-img-container img{
    height: 100%;
    border-radius: var(--radius-16);
}

.project-card .pro-desc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 5px;
    margin-inline: 20px;
}

.pro-desc .pro-techStack{
    display:flex;
    gap: 20px;
}

.pro-techStack > p{
    padding: 5px 10px;
    background-color: var(--accent-teal-light);
    color: var(--accent-teal-dark);
    border-radius: var(--radius-20);
}

.pro-desc .pro-about{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-block-end: 20px;
}

/* .pro-desc .pro-btns {

} */

.pro-btns button{
    margin-inline: 0px 15px;
}








.pro-not-available{
    background-color: var(--bg-white);
    width: 300px;
    border-radius: var(--radius-20);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--fontSize-3);
    font-weight: var(--weight-semiBold);
    color: var(--text-gray);
}