/* Fix for Portfolio and Clients sections display on index.html */

/* Ensure portfolio-scroll displays items properly */
.portfolio-section .portfolio-scroll {
    display: flex !important;
    align-items: center !important;
    min-height: 280px !important;
    width: 100% !important;
    overflow: hidden !important;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
    -webkit-mask-image: -webkit-radial-gradient(white, white) !important;
}

/* Ensure portfolio items are visible and sized correctly */
.portfolio-section .portfolio-item {
    flex-shrink: 0 !important;
    width: 280px !important;
    height: 200px !important;
    background: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Ensure images display properly in portfolio carousel */
.portfolio-section .portfolio-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
}

/* Ensure clients-scroll displays items properly */
.clients-section .clients-scroll {
    display: flex !important;
    align-items: center !important;
    min-height: 220px !important;
    width: 100% !important;
    overflow: hidden !important;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
    -webkit-mask-image: -webkit-radial-gradient(white, white) !important;
}

/* Ensure client items are visible and sized correctly */    
.clients-section .client-logo {
    flex-shrink: 0 !important;
    width: 203px !important;
    height: 200px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: white !important;
}

/* Ensure images display properly in clients carousel */
.clients-section .client-logo img {
    max-width: 90% !important;
    max-height: 85% !important;
    object-fit: contain !important;
    display: block !important;
}

/* Hide hover overlay/description on portfolio items in homepage carousel */
.portfolio-section .portfolio-overlay {
    display: none !important;
}

/* Also prevent the hover dark overlay and image scale */
.portfolio-section .portfolio-item:hover::before {
    display: none !important;
}

/* Make sure sections themselves are visible */
.portfolio-section {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.clients-section {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure portfolio scroll clips overflow correctly */
.portfolio-scroll {
    overflow: hidden !important;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .portfolio-section .portfolio-item {
        width: 220px !important;
        height: 160px !important;
    }
    
    .clients-section .client-logo {
        width: 180px !important;
        height: 170px !important;
    }
}