.service-card {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    background-color: rgb(0, 0, 0, 0.9);
    /*background: linear-gradient(#0a8cb4, #003747, #00212a, #003747, #0a8cb4);*/
    border-radius: 1rem;
    box-shadow: 0 0 15px #0a8cb4;
    height: 300px;
    width: 300px;
    padding: 3.5rem;
    position: relative;
    overflow: clip;
}

/* Hidden content */
.hidden-text {
    opacity: 0; /* start invisible */
    transform: translateY(10px); /* start slightly lower */
    transition: opacity 0.6s ease, transform 0.6s ease;
    position: absolute; /* overlay on the card */
    top: 50%;
    left: 50%;
    transform: translate(-50%, 10px);
    text-align: center;
    width: 80%;
}

/* Fade in on hover */
.service-card:hover .hidden-text {
    opacity: 1;
    transform: translate(-50%, -30%); /* center vertically with slight upward movement */
}

/* Optional: hide the original title when hovering */
.hidden-title {
    opacity: 1;
    transform: translateY(0); /* default position */
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.service-card:hover .hidden-title {
    opacity: 0;
    transform: translateY(-100px); /* start slightly lower */
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.service-card:hover {
    background: linear-gradient(#0a8cb4, #003747, #00212a, #003747, #0a8cb4);
}

@media (hover:none) and (pointer:coarse), (max-width:1000px) {
    .service-card{
        pointer-events:none;
    }

    .hidden-text, hidden-title{
        opacity:1;
    }

    .service-card{
        text-align:center;
    }

    .service-card {
        padding-top: 1rem; /* or whatever suits your design */
    }

        .service-card .service-card-icon {
            margin-bottom: 0.5rem;
        }

    .hidden-text {
        vertical-align:central;
    }

    .service-card:hover .hidden-title{
        transform:none;
        transition:none;
    }

    .service-card:hover .hidden-text{
        transform:none;
        transition:none;
    }
}

@media (max-width:380px){
    .service-card{
        height:300px;
        width:280px;
    }
}