/* PROJECT LOGO CENTERING FIX */
/* Ensure all project logos are perfectly centered like Tasklify and Opulens */

.project-image {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 180px !important;
    padding: 30px !important;
    background-color: #f5f9ff !important;
    border-bottom: 1px solid #E5E7EB !important;
}

.project-image picture,
.project-image img {
    max-width: 120px !important;
    max-height: 120px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: auto !important;
    border-radius: 22px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    transition: transform 0.3s ease !important;
}

/* Ensure picture elements are centered properly */
.project-image picture {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 120px !important;
    height: 120px !important;
}

/* Hover effects */
.project-item:hover .project-image img {
    transform: scale(1.05) !important;
}

/* HOMEPAGE PORTFOLIO CENTERING FIX */
/* Fix the homepage portfolio section to match projects page */

.portfolio-image-new {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 200px !important;
    padding: 20px !important;
    border-bottom: 1px solid var(--base-gray-200) !important;
    border-radius: 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

.portfolio-image-new picture,
.portfolio-image-new img {
    max-width: 120px !important;
    max-height: 120px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: auto !important;
    border-radius: 8px !important;
    transition: transform 0.3s ease, filter 0.3s ease !important;
}

/* Ensure picture elements are centered properly on homepage */
.portfolio-image-new picture {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 120px !important;
    height: 120px !important;
}

/* Homepage hover effects */
.portfolio-item-new:hover .portfolio-image-new img {
    transform: scale(1.05) !important;
}