.solid-box {
    position: relative;
    width: 100%;
    height: 100%;
    aspect-ratio: 1/1;
    background-color: rgba(238, 9, 109, 0.8);
    transition: all 0.3s ease;
}

/* Desktop/PC only hover effects - 768px and above */
@media (min-width: 768px) {
    .hover-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        color: white;
        opacity: 0;
        transition: all 0.3s ease;
        width: 85%;
        padding: 15px;
    }

    .hover-text {
        font-size: 15px; /* Reduced font size */
        line-height: 1.4; /* Added line height for better readability */
        margin-bottom: 10px;
        font-family: 'Ocean Sans', sans-serif;
        /* Added text overflow handling */
        display: -webkit-box;
        -webkit-line-clamp: 8; /* Maximum lines to show */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .click-icon {
        font-size: 18px; /* Reduced icon size */
        color: white;
        margin-top: 5px;
    }

    .single-portfolio:hover .solid-box {
        background-color: rgba(238, 9, 109, 0.9);
    }

    .single-portfolio:hover .hover-content,
    .single-portfolio.active .hover-content {
        opacity: 1;
    }

    .single-portfolio:hover .bottom-right-text,
    .single-portfolio.active .bottom-right-text {
        opacity: 0;
    }
}

.bottom-right-text {
    position: absolute;
    bottom: 20px;
    right: 20px;
    transition: all 0.3s ease;
}