/*
Custom CSS for TemplateMo 561 Purple Buzz

https://templatemo.com/tm-561-purple-buzz

*/

/* Active Nav Link Styling */
#main_nav .nav-item .nav-link.active {
    color: #fff !important;
}

/* Client Logo Uniform Sizing */
.recent-work.card {
    height: 300px;
    display: flex;
    flex-direction: column;
}

.recent-work-img.card-img {
    height: 300px;
    object-fit: contain;
    object-position: center;
    background-color: #ffffff;
    padding: 20px;
    width: 100%;
}

.recent-work .recent-work-vertical {
    height: 300px;
}

/* Ensure cards maintain consistent height on all screen sizes */
@media (max-width: 768px) {
    .recent-work.card {
        height: 250px;
    }
    
    .recent-work-img.card-img {
        height: 250px;
    }
    
    .recent-work .recent-work-vertical {
        height: 250px;
    }
}

/* Service Card Uniform Sizing */
.service-work.card {
    height: 300px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Override: Cards with card-body should expand to fit content */
.service-work.card .card-body {
    height: auto !important;
    overflow: visible !important;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
}

/* Override fixed height for cards containing card-body */
.service-work.card > .card-body {
    /* This selector targets direct card-body children */
}

.service-work .card-img,
.service-work .service.card-img {
    height: 300px;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

/* Make images in cards with card-body scale automatically and show full image */
.service-work.card .card-img-top {
    height: auto !important;
    max-height: 300px;
    flex-shrink: 0;
    object-fit: contain;
    object-position: center;
    width: 100%;
    display: block;
}

/* Keep full height for overlay cards (index page) - only when service-work-vertical exists */
.service-work.card > .service-work-vertical {
    height: 300px;
}

.service-work .service-work-vertical {
    height: 300px;
}

/* Override: Remove height constraint when card has card-body */
.projects .service-work.card {
    height: auto;
    min-height: 300px;
    overflow: visible;
}

/* Ensure service cards maintain consistent height on all screen sizes */
@media (max-width: 768px) {
    .service-work.card {
        height: 250px;
    }
    
    .projects .service-work.card {
        height: auto;
        min-height: 250px;
    }
    
    .service-work .card-img,
    .service-work .service.card-img {
        height: 250px;
    }
    
    .service-work.card .card-img-top {
        height: auto !important;
        max-height: 200px;
    }
    
    .service-work .service-work-vertical {
        height: 250px;
    }
}