/* Project Section - Equal Image Height */
.project-image-2 {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

/* Project Image */
.project-image-2 {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    height: 520px; /* Card height */
}

.project-image-2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;      /* Fully covers the container */
    object-position: center; /* Keeps the image centered */
    display: block;
    transition: transform 0.4s ease;
}

/* Optional hover effect */
.project-image-2:hover img {
    transform: scale(1.08);
}

/* Tablet */
@media (max-width: 991px) {
    .project-image-2 {
        height: 350px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .project-image-2 {
        height: 430px;
    }
}

/* Tablet */
@media (max-width: 991px) {
    .project-image-2 img {
        height: 550px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .project-image-2 img {
        height: 280px;
    }
}




/* Tablet only */
@media (min-width: 768px) and (max-width: 991px) {

    .project-section-inner .row{
        display: flex;
        flex-wrap: wrap;
    }

    .project-section-inner .col-md-6:last-child{
        flex: 0 0 50%;
        max-width: 50%;
        margin-left: 25%;
    }
}
@media (min-width: 992px) and (max-width: 1024px) {

    .project-section-inner .row {
        justify-content: center;
    }

    .project-section-inner .col-lg-6:last-child {
        margin-left: auto;
        margin-right: auto;
    }
}

/* Tablet */
@media (max-width: 1024px) {
    .project-image-2 .project-content h6 {
        font-size: 13px;
    }

    .project-image-2 .project-content h3 {
        font-size: 19px;
    }
}


/* Desktop */
@media (min-width: 992px) {

    .project-section .row {
        justify-content: center;
    }

    .project-section .row > .col-lg-6:last-child {
        margin-left: auto;
        margin-right: auto;
    }
}


/* ===============================
   Projects Section Responsive
================================= */

/* Desktop */
@media (min-width: 992px){

    .project-section .row{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .project-section .row > .col-lg-6{
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* Last Card Center */
    .project-section .row > .col-lg-6:last-child{
        margin-left: auto;
        margin-right: auto;
    }
}

/* Tablet */
@media (max-width: 991px){

    .project-section .row{
        justify-content: center;
    }

    .project-section .col-lg-6{
        width: 100%;
        max-width: 100%;
        margin-bottom: 25px;
    }

    .project-items{
        max-width: 650px;
        margin: 0 auto;
    }
}

/* Mobile */
@media (max-width: 767px){

    .project-section{
        padding: 70px 0;
    }

    .project-section .section-title{
        margin-bottom: 35px;
    }

  

    .project-section .project-image img{
        width: 100%;
        height: auto;
        display: block;
    }

    .project-items{
        margin-bottom: 20px;
    }

    .project-content{
        padding: 20px;
    }

 

    .project-content h6{
        font-size: 14px;
    }
}

/* Small Mobile */
@media (max-width: 575px){

    .project-section{
        padding: 60px 0;
    }

 

    .project-content{
        padding: 18px;
    }

    .project-content h3{
        font-size: 18px;
    }
}


.project-card{
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 2px solid #e7e7e7;
    border-radius: 10px;
    height: 380px;
    transition: .5s;
}

.project-bg{
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.project-bg img{
    width: 100%;
    height: 100%;
    object-fit: cover;

    transform: translateY(-100%);
    transition: .6s ease;
}

.project-bg::after{
    content: "";
    position: absolute;
    inset: 0;
  background: rgba(0, 0, 0, 0.436);   /* lighter overlay */
    opacity: 0;
    transition: .6s;
}

.project-card:hover .project-bg img{
    transform: translateY(0);
}

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

.project-body{

    position:relative;
    z-index:2;
    padding:40px 30px;
    height:100%;

    display:flex;
    flex-direction:column;
}

.project-title{

    background:#204066;
    color:#fff;
    padding:16px 28px;
    font-size:24px;
    font-weight:700;

    border-radius:0 40px 40px 0;

    width:calc(100% + 30px);
    margin-left:-30px;
    margin-bottom:35px;
}

.project-body p{

    color:#666;
    font-size:18px;
    line-height:1.8;
}

.project-footer{
    margin-top: 20px; /* Reduce the gap */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.project-footer .icon{
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #f5f3f7;

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 28px;
    color: #00984a;
    transition: .4s;
}

.project-footer a{

   width: 45px;
    height: 45px;
    font-size: 18px;
    border-radius:50%;
    background:#a54fd6;

    display:flex;
    justify-content:center;
    align-items:center;

    color:#fff;
  

    opacity:0;
    transform:translateX(20px);

    transition:.5s;
}

/* Hover */

.project-card:hover .project-bg{

    opacity:1;
}

.project-card:hover p{

    color:#fff;
}

.project-card:hover .icon{

    background:#45d5d4;
    color:#fff;
}

.project-card:hover .project-footer a{

    opacity:1;
    transform:translateX(0);
}

.project-card:hover{

    transform:translateY(-8px);
    box-shadow:0 20px 50px rgba(0,0,0,.2);
}


/* Icon Hover */
.project-card:hover .icon{
    background: #00984a;
    color: #fff;
    transition: .4s ease;
}

/* Arrow Hover */
.project-card:hover .project-footer a{
    background: #00984a;
    color: #fff;
    opacity: 1;
    transform: translateX(0);
}