.card-top {
    position: relative;
    width: 100%;
    
}

.card-img {
    width: 100%;
    height: auto;
    display: block;
}


.card-img-overlay-top {
    position: absolute;
    top: 50%;
    left: 70%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    text-align: center;
    border-radius: 10px;
}

.card-text-top {
    color: rgb(83, 86, 90);
    font-size: 16px;
    top: 50%;
    text-align: left;
}
.bg-dark-top {
    background-color: white !important;
}
h1.card-title.display-1-top {
    color: #53565A;
    font-size: 32px;
    font-weight: bold;
    text-align: left;
}

@media only screen and (max-width: 768px) {
    .card-top {
        position: relative;
        width: 100%;
        height: 300px; /* Adjust the height as needed */
    }

    .card-img {
        width: 100%;
        height: auto;
        display: block;
    }

    .card-img-overlay-top {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: white;
        padding: 20px;
        width: 60%; 
        height: 60%;
        max-height: 300px; 
    }

    .card-text-top {
        color: rgb(83, 86, 90);
        font-size: 14px; 
        position: absolute;
        top: calc(40%); 
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        width: 80%; 
    }

    h1.card-title.display-1-top {
        color: #53565A;
        font-size: 16px; 
        font-weight: bold;
        text-align: center;
    }
}