/*
    USAGE:
     <div class="row no-padding">
    <div class="col-md-6"  style="padding: 5% 3% 5% 7%;">

        <div class="service-card">
            <div class="service-content">
                <div class="service-image">
                    <img src="~/assets/images/icons/list.png" />
                </div>
                <div class="service-text">
                    <h2>
                        C-City
                    </h2>
                    <p>È lo spazio pubblico della piattaforma C-BOX® dove gli Issuer possono dare visibilità della loro offerta formativa ed esperienziale rappresentata attraverso l’uso di badge digitali</p>
                </div>
            </div>
            <div class="service-info">
                <p>Scopri</p>
            </div>
        </div>

    </div>
    <div class="col-md-6" style="padding: 5% 7% 5% 3%;">
        <div class="service-card">
            <div class="service-content">
                <div class="service-image">
                    <img src="~/assets/images/icons/profile.png" />
                </div>
                <div class="service-text">
                    <h2 style="font-size:27pt">
                        Human Capital Competence
                    </h2>
                    <p>È lo spazio pubblico della piattaforma C-BOX® dove gli utenti possono rendere visibili saperi e competenze possedute e riconosciute attraverso l’acquisizione di badge digitali</p>
                </div>
            </div>
            <div class="service-info">
                <p>Scopri</p>
            </div>
        </div>
    </div>
</div>

*/

.service-card {
    position: relative;
    background: white;
    padding: 40pt 40pt 20pt;
    border-radius: 40pt;
}

    .service-card .service-content {
        position: relative;
        transition: 0.5s;
    }

        .service-card .service-content .service-image {
            position: relative;
            margin-bottom: 30pt;
            text-align: center
        }

            .service-card .service-content .service-image img {
                max-width: 25%;
                transition: 0.5s;
            }

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

            .service-card .service-content .service-text h2 {
                font-size: 30pt;
                font-weight: 700
            }

    .service-card .service-info {
        position: relative;
        bottom: 5px;
        width: 100%;
        text-align: center
    }

        .service-card .service-info p {
            transform: translateY(40px);
            transition: 0.5s;
            opacity: 0;
            margin: unset;
            font-size: 16pt;
            font-weight: 600;
            color: var(--hoverblue);
        }

    .service-card:hover .service-info p {
        transform: translateY(0px);
        opacity: 1;
    }

    .service-card:hover .service-content {
        transform: translateY(-20px);
    }

        .service-card:hover .service-content .service-image img {
            transform: scale(1.2);
        }