/* From Uiverse.io by Pradeepsaranbishnoi */
.cardBox {
    width: 100%;
    height: 122px;
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 10px 0px, rgba(0, 0, 0, 0.5) 0px 2px 25px 0px;
}

.card {
    position: absolute;
    width: 98%;
    height: 97%;
    background: white;
    border-radius: 20px;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    color: #ffffff;
    overflow: hidden;
    padding: 20px;
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.5) 0px 18px 36px -18px inset;
}

    .card .h4 {
        position: absolute;
        top: 50%;
        left: 50%;
        color: black;
        transform: translate(-50%, -50%);
        font-size: 20px;
        font-weight: 800;
        pointer-events: none;
     
        opacity: 0.6;
        background: -webkit-linear-gradient(#ff5600, #f00);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .card .content .h3 {
        font-size: 18px;
        font-weight: 800;
        margin-bottom: 10px;
        color: black;
    }

    .card .content p {
        font-size: 11px;
        line-height: 1.4em;
        color: black;
    }

    .card .content {
        transform: translateY(100%);
        opacity: 0;
        transition: 0.3s ease-in-out;
    }

    .card:hover .content {
        transform: translateY(0);
        opacity: 1;
    }

    .card:hover .h4 {
        opacity: 0;
    }

.cardBox::before {
    content: "";
    position: absolute;
    width: 40%;
    height: 203%;
    background: #40E0D0;
    background: -webkit-linear-gradient(to right, #FF0080, #FF8C00, #40E0D0);
    background: linear-gradient(to right, #FF0080, #FF8C00, #40E0D0);
    transform-origin: center;
    animation: glowing_401 5s linear infinite;
}

@keyframes glowing_401 {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}
#BGGIF {
    background-image: url('../images/bggifimage.gif');
    background-repeat: no-repeat, repeat;
    background-size: cover;
}
#performance-dashboard {
    background-image: url('../Images/societyRegistration.jpg');
    background-repeat: no-repeat, repeat;
    background-size: cover;
}